HTML5 video 視頻標籤 經常使用屬性

最近在作手機端的 h5 頁面的視頻直播功能，用到了 Video 標籤。其經常使用的屬性有如下幾個：

src、poster、preload、autoplay、loop、controls、width、height等屬性。

 

一、src屬性 和 poster屬性

跟<img>標籤的同樣，這個屬性用於指定視頻的地址，而poster屬性用於指定一張圖片，在當前視頻數據無效時顯示，可看成一張 預覽圖。視頻數據無效多是視頻正在加載，多是視頻地址錯誤等等。

<video width="658" height="444" src="http://www.youname.com/images/123456.mp4" poster="http://www.youname.com/images/123456.png" autoplay="autoplay"></video>

 

二、preload屬性

此屬性用於定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。若是不使用此屬性，默認爲auto。

<video width="658" height="444" src="http://www.youname.com/images/123456.mp4" poster="http://www.youname.com/images/123456.png" autoplay="autoplay" preload="none"></video>

• None：不進行預加載。使用此屬性值，多是頁面製做者認爲用戶不指望此視頻，或者減小HTTP請求。
• Metadata：部分預加載。使用此屬性值，表明頁面製做者認爲用戶不指望此視頻，但爲用戶提供一些元數據（包括尺寸，第一幀，曲目列表，持續時間等等）。
• Auto：所有預加載。

 

三、autoplay屬性

Autoplay屬性用於設置視頻是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。

<video width="658" height="444" src="http://www.youname.com/images/123456.mp4" poster="http://www.youname.com/images/123456.png" autoplay="autoplay" preload="none"></video>

注意：HTML中布爾屬性的值不是true和false。正確的用法是，在標籤中使用此屬性表示true，此時屬性要麼沒有值，要麼其值恆等於他的名字

（此處，自動播放爲 <video autoplay /> 或者 <video autoplay=」autoplay」 />）；而在標籤中不使用此屬性表示false（此處不進行自動播放爲 <video />）。

 

四、loop屬性

<video width="658" height="444" src="http://www.youname.com/images/123456.mp4" poster="http://www.youname.com/images/123456.png" autoplay="autoplay" loop="loop"></video>

一目瞭然，loop屬性用於指定視頻是否循環播放，一樣是一個布爾屬性。

 

五、controls屬性

<video width="658" height="444" src="http://www.youname.com/images/123456.mp4" poster="http://www.youname.com/images/123456.png" autoplay="autoplay" preload="none" controls="controls"></video>

Controls屬性用於向瀏覽器指明頁面製做者沒有使用腳本生成播放控制器，須要瀏覽器啓用自己的播放控制欄。

控制欄須包括播放暫停控制，播放進度控制，音量控制等等。

每一個瀏覽器默認的播放控制欄在界面上不同。因爲我瀏覽器的詭異問題，Firefox 和 Safari 的Video標籤不正常，因此這兩個只能在網上找截圖了。

 

六、width屬性和height屬性

屬於標籤的通用屬性了，這個不用多說。

 

七、source標籤，除了上述屬性外，video標籤還支持內嵌標籤，如 source標籤，如：

<video width="658" height="444" poster="http://www.youname.com/images/123456.png" autoplay="autoplay" preload="none" controls="controls">
	<source src="http://www.youname.com/images/123456.ogv" />
	<source src="http://www.youname.com/images/123456.ogg" />
</video>

 

Source標籤用於給媒體（由於audio標籤一樣能夠包含此標籤，因此這兒用媒體，而不是視頻）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標籤沒有使用src屬性時使用。

瀏覽器按source標籤的順序檢測標籤指定的視頻是否可以播放（多是視頻格式不支持，視頻不存在等等），若是不能播放，換下一個。此方法多用於兼容不一樣的瀏覽器。Source標籤自己不表明任何含義，不能單獨出現。

此標籤包含 src、type、media 三個屬性。

src屬性：用於指定媒體的地址，和video標籤的同樣。

Type屬性：用於說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。

Media屬性：用於說明媒體在何種媒介中使用，不設置時默認值爲all，表示支持全部媒介。你想到<style>標籤的media屬性了麼？同樣同樣同樣的。

 

一個完整例子：

<video width="658" height="444" poster="http://www.youname.com/images/123456.png" autoplay="autoplay" preload="none" controls="controls">
	<source src="http://www.youname.com/images/123456.ogv" />
	<source src="http://www.youname.com/images/123456.ogg" />
</video>

這段代碼在頁面中定義了一個視頻，此視頻的預覽圖爲poster的屬性值，顯示瀏覽器的默認媒體控制欄，預加載視頻的元數據，循環播放，寬度爲900像素，高度爲240像素。

第一選擇視頻地址爲第一個source標籤的src屬性值，視頻類別爲Ogg視頻，視頻編碼譯碼器爲Theora，音頻編碼譯碼器爲Vorbis，播放媒 介爲顯示器；第二選擇視頻地址再也不累述。若是你還要兼容IE的話，能夠在最後一個source標籤後再加上Flash播放器的標籤集，或者使用一點 JavaScript代碼。

 

 

延伸閱讀：

使用 JavaScript 控制 HTML5 視頻播放器

7款很棒的 HTML5 視頻播放器