Video標簽的使用

現(xiàn)在如果要在頁面中使用video標簽，需要考慮三種情況驱犹，支持Ogg Theora或者VP8（如果這玩意兒沒出事的話）的（Opera匹厘、Mozilla、Chrome）维哈，支持H.264的（Safari绳姨、IE 9、Chrome）阔挠，都不支持的（IE6飘庄、7、8）购撼。好吧跪削，現(xiàn)在讓我們從技術(shù)層面來認識HTML 5的視頻，包括video標簽的使用迂求，視頻對象可以用到的媒介屬性和方法碾盐，以及媒介事件。

Video標簽的使用

Video標簽含有src揩局、poster毫玖、preload、autoplay、loop孕豹、controls涩盾、width、height等幾個屬性励背，以及一個內(nèi)部使用的標簽<source>春霍。Video標簽內(nèi)除了可以包含<source>標簽外，還可以包含當指定的視頻都不能播放時叶眉，返回的內(nèi)容址儒。

(1) src屬性和poster屬性

你能想象src屬性是用來干啥的。跟<img>標簽的一樣衅疙，這個屬性用于指定視頻的地址莲趣。而poster屬性用于指定一張圖片，在當前視頻數(shù)據(jù)無效時顯示（預(yù)覽圖）饱溢。視頻數(shù)據(jù)無效可能是視頻正在加載喧伞，可能是視頻地址錯誤等等。

(2) preload屬性

這個屬性也能通過名字了解用處绩郎，此屬性用于定義視頻是否預(yù)加載潘鲫。屬性有三個可選擇的值：none、metadata肋杖、auto溉仑。如果不使用此屬性，默認為auto状植。

None：不進行預(yù)加載浊竟。使用此屬性值，可能是頁面制作者認為用戶不期望此視頻津畸，或者減少HTTP請求振定。

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

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

(3) autoplay屬性

又是一個看名字知道用處的屬性。Autoplay屬性用于設(shè)置視頻是否自動播放胧后，是一個布爾屬性芋浮。當出現(xiàn)時，表示自動播放，去掉是表示不自動播放纸巷。

注意镇草，HTML中布爾屬性的值不是true和false。正確的用法是瘤旨，在標簽中使用此屬性表示true梯啤，此時屬性要么沒有值，要么其值恒等于他的名字（此處存哲，自動播放為<video autoplay />或者<video autoplay=”autoplay” />）因宇；而在標簽中不使用此屬性表示false（此處不進行自動播放為<video />）。

(4) loop屬性

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

(5) controls屬性

Controls屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器修肠，需要瀏覽器啟用本身的播放控制欄贺辰。

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

每個瀏覽器默認的播放控制欄在界面上不一樣艰管。由于我瀏覽器的詭異問題滓侍，F(xiàn)irefox和Safari的Video標簽不正常，所以這兩個只能在網(wǎng)上找截圖了牲芋。

(6) width屬性和height屬性

屬于標簽的通用屬性了撩笆，這個不用多說。

(7) source標簽

Source標簽用于給媒體（因為audio標簽同樣可以包含此標簽缸浦，所以這兒用媒體夕冲，而不是視頻）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標簽沒有使用src屬性時使用裂逐。

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

此標簽包含src、type薪缆、media三個屬性秧廉。

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

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

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

(8) 一個完整的例子

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

第一選擇視頻地址為第一個source標簽的src屬性值，視頻類別為Ogg視頻盾致，視頻編碼譯碼器為Theora主经，音頻編碼譯碼器為Vorbis，播放媒介為顯示器庭惜；第二選擇視頻地址不再累述罩驻。如果你還要兼容IE的話，可以在最后一個source標簽后再加上Flash播放器的標簽集护赊，或者使用一點 JavaScript代碼惠遏。

preload 屬性規(guī)定是否在頁面加載后載入視頻。

如果設(shè)置了 autoplay 屬性骏啰，則忽略該屬性节吮。

HTML 4.01 與 HTML 5 之間的差異

preload 屬性是 HTML 5 中的新屬性。

語法

屬性值

auto - 當頁面加載后載入整個視頻
meta - 當頁面加載后只載入元數(shù)據(jù)
none - 當頁面加載后不載入視頻

1. 如何獲取視頻的加載進度判耕，讓視頻加載完成后才讓用戶進入透绩？

不能，沒有任何的辦法來判斷視頻的加載進度壁熄，而且在iOS中帚豪，只有視頻在播放的時候，才臨時去加載視頻草丧。因此志鞍，即使在video標簽中寫了preload屬性也是不管用的。使用canplaythrough事件也是沒法檢測的方仿，雖然video標簽在加載的時候會觸發(fā)canplaythrough方法，但播放時依然會有卡頓的現(xiàn)象，而且某些android還不支持次屬性仙蚜。

2. 播放視頻時只有聲音沒有圖像

有部分原因是視頻的編碼不正確此洲，在mp4格式的視頻中，只支持h.264的視頻委粉。我的項目中也遇到了這種情況呜师，但不是視頻編碼的問題。我在自己的網(wǎng)絡(luò)下測試時贾节，沒有這樣的問題汁汗，但是在外部環(huán)境測試時就會出現(xiàn)黑屏、有聲音沒圖像的情況栗涂。那么應(yīng)該就是視頻有點大了知牌，然后我就把視頻壓縮了一下，結(jié)果還是會有這樣的情況出現(xiàn)斤程。

經(jīng)過同事的指點角寸，我在用戶點擊和視頻正式播放之前添加一個loading效果，當視頻正式播放的時候就取消loading忿墅。如下：

function video_loading( $video ){
$('.video_loading').show();
var timer = setInterval(function(){
var currentTime = $video[0].currentTime; // 檢測當前的播放時間
if( currentTime>0 ){
$('.video_loading').hide();
clearInterval( timer );
}
}, 100)
}

原：https://blog.csdn.net/xiaoxiaohui520134/article/details/82901089