【HTML5 video】video標籤的部分屬性解析

轉自：http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html

 

如今若是要在頁面中使用video標籤，須要考慮三種狀況，支持Ogg Theora或者VP8（若是這玩意兒沒出事的話）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 九、Chrome），都不支持的（IE六、七、8）。好吧，如今讓咱們從技術層面來認識HTML 5的視頻，包括video標籤的使用，視頻對象能夠用到的媒介屬性和方法，以及媒介事件。

Video標籤的使用

Video標籤含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性， 以及一個內部使用的標籤<source>。Video標籤內除了能夠包含<source>標籤外，還能夠包含當指定的視頻都不能 播放時，返回的內容。

(1) src屬性和poster屬性

你能想象src屬性是用來幹啥的。跟<img>標籤的同樣，這個屬性用於指定視頻的地址。而poster屬性用於指定一張圖片，在當前視頻數據無效時顯示（預覽圖）。視頻數據無效多是視頻正在加載，多是視頻地址錯誤等等。

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

 

(2) preload屬性

這個屬性也能經過名字瞭解用處，此屬性用於定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。若是不使用此屬性，默認爲auto。

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

 

None：不進行預加載。使用此屬性值，多是頁面製做者認爲用戶不指望此視頻，或者減小HTTP請求。

Metadata：部分預加載。使用此屬性值，表明頁面製做者認爲用戶不指望此視頻，但爲用戶提供一些元數據（包括尺寸，第一幀，曲目列表，持續時間等等）。

Auto：所有預加載。

(3) autoplay屬性

又是一個看名字知道用處的屬性。Autoplay屬性用於設置視頻是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。

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

 

注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標籤中使用此屬性表示true，此時屬性要麼沒有值，要麼其值恆等於他的名字 （此處，自動播放爲<video autoplay />或者<video autoplay=」autoplay」 />）；而在標籤中不使用此屬性表示false（此處不進行自動播放爲<video />）。

 (4) loop屬性

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

 

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

(5) controls屬性

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

 

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

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

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

(6) width屬性和height屬性

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

(7) source標籤

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

 

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

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

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

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

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

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

(8) 一個完整的例子

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

 

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

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