HTML5每日一練之視頻標籤的應用

與音頻同樣，在過去，咱們若是想在Web上播放視頻，也是都是經過Flash來播放，一樣並非全部的瀏覽器都安裝了Flash播放器插件，而如今咱們在HTML5中，就能徹底脫離Flash或其餘的插件來播放視頻了。


video標籤：

	IE9	FireFox 5.0	Safari 5.5	Chrome 12	Opera 11.5
Mpeg4	√	×	√	√	×
Ogg	×	√	×	√	√
WebM	×	√	×	√	√

Ogg：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件



video標籤的屬性有：

屬性	值(可省略)	描述
src	url	要播放的視頻的 URL，路徑可爲網絡路徑或相對路徑。
controls	controls	向用戶顯示控件，好比播放按鈕。
loop	loop	每當視頻結束時從新開始播放。
preload	preload	視頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。
autoplay	autoplay	則視頻在就緒後立刻播放。
width	autoplay	則視頻的寬度。
height	autoplay	則視頻的高度。

注：video的屬性與audio的屬性基本一致，只不過多出了Width和height屬性。



source子標籤

此標籤是用來指定視頻的路徑，通常存在此子標籤的時候則不能再video中出現src屬性，在不一樣的瀏覽器下對video標籤有不一樣的視頻支持，那麼咱們爲了讓其可以在不一樣的瀏覽器下播放，能夠有多種視頻格式，那麼咱們只須要加入此標籤，來指定視頻便可，瀏覽器則會是video播放所支持的視頻格式。Source有兩個屬性，分別是：

屬性	描述
src	要播放的視頻的 URL，路徑可爲網絡路徑或相對路徑。
type	視頻類型

---

1. <h1>請看視頻，視頻來自搜狗瀏覽器首頁的實驗室：</h1>
2. <video width="600" height="400" controls="controls" autoplay="true">
3.         <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.mp4" type="video/mp4"/>
4.         <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.ogv" type="video/ogg"/>
5. </video>