最近在做手機(jī)端的 h5 頁面的視頻直播功能，用到了 Video 標(biāo)簽，所以又繼續(xù)深入學(xué)習(xí)HTML5?？偨Y(jié)下來，其常用的屬性有以下幾個(gè)：

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

1、src屬性 和 poster屬性

跟<img>標(biāo)簽的一樣，這個(gè)屬性用于指定視頻的地址，而poster屬性用于指定一張圖片，在當(dāng)前視頻數(shù)據(jù)無效時(shí)顯示，可當(dāng)作一張 預(yù)覽圖。視頻數(shù)據(jù)無效可能是視頻正在加載，可能是視頻地址錯(cuò)誤等等。

2、preload屬性

此屬性用于定義視頻是否預(yù)加載。屬性有三個(gè)可選擇的值：none、metadata、auto。如果不使用此屬性，默認(rèn)為auto。

None：不進(jìn)行預(yù)加載。使用此屬性值，可能是頁面制作者認(rèn)為用戶不期望此視頻，或者減少HTTP請(qǐng)求。

Metadata：部分預(yù)加載。使用此屬性值，代表頁面制作者認(rèn)為用戶不期望此視頻，但為用戶提供一些元數(shù)據(jù)（包括尺寸，第一幀，曲目列表，持續(xù)時(shí)間等等）。

Auto：全部預(yù)加載。

3、autoplay屬性

Autoplay屬性用于設(shè)置視頻是否自動(dòng)播放，是一個(gè)布爾屬性。當(dāng)出現(xiàn)時(shí)，表示自動(dòng)播放，去掉是表示不自動(dòng)播放。

注意：HTML中布爾屬性的值不是true和false。正確的用法是，在標(biāo)簽中使用此屬性表示true，此時(shí)屬性要么沒有值，要么其值恒等于他的名字

（此處，自動(dòng)播放為 <video autoplay /> 或者 <video autoplay=”autoplay” />）；而在標(biāo)簽中不使用此屬性表示false（此處不進(jìn)行自動(dòng)播放為 <video />）。

4、loop屬性

一目了然，loop屬性用于指定視頻是否循環(huán)播放，同樣是一個(gè)布爾屬性。

5、controls屬性

Controls屬性用于向?yàn)g覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。

控制欄須包括播放暫?？刂?，播放進(jìn)度控制，音量控制等等。

每個(gè)瀏覽器默認(rèn)的播放控制欄在界面上不一樣。由于我瀏覽器的詭異問題，Firefox 和 Safari 的Video標(biāo)簽不正常，所以這兩個(gè)只能在網(wǎng)上找截圖了。

6、width屬性和height屬性

屬于標(biāo)簽的通用屬性了，這個(gè)不用多說。

7、source標(biāo)簽

除了上述屬性外，video標(biāo)簽還支持內(nèi)嵌標(biāo)簽，如 source標(biāo)簽，如：

Source標(biāo)簽用于給媒體（因?yàn)?/span>audio標(biāo)簽同樣可以包含此標(biāo)簽，所以這兒用媒體，而不是視頻）指定多個(gè)可選擇的（瀏覽器最終只能選一個(gè)）文件地址，且只能在媒體標(biāo)簽沒有使用src屬性時(shí)使用。

瀏覽器按source標(biāo)簽的順序檢測標(biāo)簽指定的視頻是否能夠播放（可能是視頻格式不支持，視頻不存在等等），如果不能播放，換下一個(gè)。此方法多用于兼容不同的瀏覽器。Source標(biāo)簽本身不代表任何含義，不能單獨(dú)出現(xiàn)。

此標(biāo)簽包含 src、type、media 三個(gè)屬性。

src屬性：用于指定媒體的地址，和video標(biāo)簽的一樣。

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

Media屬性：用于說明媒體在何種媒介中使用，不設(shè)置時(shí)默認(rèn)值為all，表示支持所有媒介。你想到<style>標(biāo)簽的media屬性了么？一樣一樣一樣的。

一個(gè)完整例子：

這段代碼在頁面中定義了一個(gè)視頻，此視頻的預(yù)覽圖為poster的屬性值，顯示瀏覽器的默認(rèn)媒體控制欄，預(yù)加載視頻的元數(shù)據(jù)，循環(huán)播放，寬度為900像素，高度為240像素。

第一選擇視頻地址為第一個(gè)source標(biāo)簽的src屬性值，視頻類別為Ogg視頻，視頻編碼譯碼器為Theora，音頻編碼譯碼器為Vorbis，播放媒 介為顯示器；第二選擇視頻地址不再累述。如果你還要兼容IE的話，可以在最后一個(gè)source標(biāo)簽后再加上Flash播放器的標(biāo)簽集，或者使用一點(diǎn) JavaScript代碼。

原文來自：博客園/52PHP