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.歡迎關注微信公衆號：傅里葉變換