HTML连载9-video标签的第二种格式&audio标签

1、video第二种格式

1.背景：因为视频数据很是重要，因此五大浏览器厂商都不肯意支持别人的视频格式，因此致使了没有一种视频格式是全部浏览器都支持的。这个时候W3C为了解决这个问题，因此推出了第二种video标签的格式。

2.格式：

 

<video controls="controls" width="500px" height="500px">

    <source src="地址" type="video/webm"></source>

    <source src="地址" type="video/MPEG4"></source>

    <source src="地址" type="video/Ogg"></source>

</video>

　　

 

3.浏览器解析逻辑

 

来源：http://www.w3school.com.cn/html5/html_5_video.asp

不一样浏览器支持的格式种类不一样，大体能够分为三类格式：webm、MPEG四、Ogg。咱们这里三种格式都写上了，所以会逐一进行校验，直至成功为止。

4.注意：当前经过video标签的第二种格式虽然可以指定全部的浏览器都支持的视频格式，可是显然全部的浏览器都经过video标签播放视频还有一个前提条件，就是浏览器必须都支持HTML5标签，不然一样没法播放，在过去的一些浏览器是不支持HTML5标签的，因此为了让过去的一些浏览器也可以经过video标签来播放视频，咱们之后能够经过一个JS的框架叫作html5media来实现

2、audio标签

1.做用：用来播放视频

2.格式：（两种，相似video标签）

 

<audio src="地址" controls="controls"></audio>

 

 

或者

 

<audio  controls="controls">

    <source src="地址" type="audio/audimp3">

    <source src="地址" type="audio/Ogg Vorbis">

    <source src="地址" type="audio/Wav">

</audio>

　　

 

3.（1）属性(除了height、width、poster不能用，其余均可以)（2）两种格式（3）解析逻辑（4）注意点

都同video标签相似，可见连载8

3、源码

d53_video_label_second_form

d54_audio_label_exercise

地址：https://github.com/ruigege66/HTML_learning/tree/master

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.简书：https://www.jianshu.com/u/a9169ca4f1c9（心悦君兮君不知dqr）

4.欢迎关注微信公众号：傅里叶变换