這篇文章主要介紹了html5中標(biāo)簽video播放的示例分析，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
前端同學(xué)要使用 HTML5 播放器視頻，必然會(huì)使用 video 標(biāo)簽，不過(guò)大多數(shù)同學(xué)只是使用了較簡(jiǎn)單的功能，其實(shí)它本身?yè)碛胁环仓τ写覀儼l(fā)現(xiàn)。
首先，我們先來(lái)看下 video 最基礎(chǔ)的用法：
使用 src 屬性
使用 source 標(biāo)簽
這是 MDN 關(guān)于 video 給出的基本用例。在這里我們簡(jiǎn)單介紹下兩種方法的不同，src 只能賦予 video 一個(gè)播放地址，當(dāng)瀏覽器不支持這種視頻格式的解碼時(shí)就會(huì)出現(xiàn)錯(cuò)誤，導(dǎo)致視頻播放失敗。為了解決這個(gè)問(wèn)題才有了 source 標(biāo)簽，利用多個(gè) source 標(biāo)簽引入不同格式的視頻，從上到下解析直到遇到看上述代碼當(dāng)瀏覽器不支持 ogg 格式時(shí)，瀏覽器會(huì)自動(dòng)播放 foo.mp4。
實(shí)用技巧我們會(huì)發(fā)現(xiàn)使用 video:src 屬性播放視頻的時(shí)候會(huì)經(jīng)常出現(xiàn)播放失敗，我們?cè)撛趺醋瞿芴嵘曨l播放的質(zhì)量？
這種情況一般都使用 cdn，為了更保險(xiǎn)一般還會(huì)將不同的 cdn 廠商分為主用 cdn 和備用 cdn。那么問(wèn)題來(lái)了，我們?cè)趺蠢?video 本身的特性并結(jié)合 cdn 保證我們的視頻播放質(zhì)量？
不難看出，source 標(biāo)簽不僅支持不同視頻格式的自動(dòng)切換，也適用于相同視頻格式的失敗切換，即 main.mp4 因網(wǎng)絡(luò)問(wèn)題無(wú)法獲取時(shí)瀏覽器會(huì)自動(dòng)切換到 backup.mp4 。
高階技能如果大家瀏覽視頻的時(shí)候，可以發(fā)現(xiàn)很多網(wǎng)站的 video 是這個(gè)樣子的：
如果直接訪問(wèn) blob 這個(gè)地址發(fā)現(xiàn)并不存在。
這個(gè)地址就是映射 Blob 對(duì)象的 DOMString，其實(shí) video 屬性 src 支持 Blob 的，不過(guò)新的標(biāo)準(zhǔn)是使用 srcObject 屬性來(lái)替代這一個(gè)功能，目前代碼可以這樣寫(xiě)：
重慶分公司
重慶分公司
const mediaSource = new MediaSource();
const video = document.createElement('video');
try {
video.srcObject = mediaSource;
} catch (error) {
video.src = URL.createObjectURL(mediaSource);
}在這段代碼中除了 Blob 對(duì)象，還有 MediaSource 對(duì)象，讓 video 擁有不凡之力的主要因素是瀏覽器對(duì) MediaSource 對(duì)象的支持，才讓 JavaScript 對(duì) video 有了更大的操縱空間。關(guān)于如何使用 MediaSource 不在本文講述，大家可以自行查閱，我們要說(shuō)的是 video 結(jié)合 MediaSource 可以做哪些事情？
清晰度無(wú)縫切換點(diǎn)播領(lǐng)域里 mp4 是最普遍、兼容性最好的視頻容器，不過(guò) mp4 也有它的局限性，比如常見(jiàn)的清晰度切換，我們是無(wú)法像youtube那樣做到無(wú)縫切換的。我們可以看下普通的mp4播放的網(wǎng)絡(luò)請(qǐng)求和youtube視頻播放的網(wǎng)絡(luò)請(qǐng)求的區(qū)別。
圖1.1 普通mp4的下載請(qǐng)求過(guò)程
圖1.2 Youtube視頻下載請(qǐng)求過(guò)程
這兩張圖不難看出，在默認(rèn)情況下 mp4 使用一次 http 請(qǐng)求所有的視頻數(shù)據(jù)，Youtube 則分次請(qǐng)求。當(dāng)然這個(gè)描述很不專業(yè)，但確實(shí)形象。造成這種差異的是 video 不支持流式的視頻數(shù)據(jù)，Youtube 采用的是流式的視頻容器 webm，而 mp4 是非流式的。那如何解釋清楚流式的視頻數(shù)據(jù)呢，從專業(yè)的角度三言兩語(yǔ)很難說(shuō)清楚，但用大白話翻譯過(guò)來(lái)就是流式的視頻數(shù)據(jù)支持分段獨(dú)立播放，非流式的不可以。換句話說(shuō)一個(gè)10M的視頻文件，流式的視頻可以把0~1M的數(shù)據(jù)請(qǐng)求回來(lái)單獨(dú)播放，但是非流式的不可以。
上面我們描述了視頻格式的不同，接下來(lái)我們要說(shuō)的是第一張圖中的視頻加載是瀏覽器來(lái)控制的，通過(guò)給 video 的 src 屬性配置視頻地址，觸發(fā)播放之后瀏覽器就會(huì)開(kāi)始下載了，JS干涉不了。而 Youtube 的視頻加載是通過(guò)JS來(lái)控制的，各位可以再次看下第二張圖的網(wǎng)絡(luò)請(qǐng)求類型：xhr，足以證明這一點(diǎn)。
上面兩點(diǎn)搞清楚之后我們就該說(shuō)下清晰度切換的事情了。這個(gè)需求大家都不陌生，但是直接使用 mp4 格式做無(wú)縫清晰度切換，難度還挺大的。先解釋下“無(wú)縫清晰度切換”的概念：從播放一個(gè)分辨率的視頻到另一個(gè)分辨率且保證畫(huà)面、聲音不停頓的平滑切換過(guò)程。了解了這個(gè)概念，大家應(yīng)該知道了用 video 無(wú)縫切換 mp4 有多難。一方面，video 是不支持流式的視頻格式的，一方面，video 的加載是不受JS控制的。通過(guò)切換 video 的 src 屬性，必然會(huì)導(dǎo)致畫(huà)面中斷、重新請(qǐng)求視頻數(shù)據(jù)等。有的同學(xué)想到說(shuō)利用兩個(gè) video 再結(jié)合 z-index 來(lái)搞，但是當(dāng)你生成另一個(gè)video去加載視頻的時(shí)候，無(wú)法保證兩個(gè)畫(huà)面是嚴(yán)格一致的，即使將原來(lái)的畫(huà)面暫停到一個(gè)時(shí)刻，用另一個(gè)視頻通過(guò) currentTime 屬性與之同步，切換仍然看到畫(huà)面閃爍，基本無(wú)法和 Youtube 無(wú)縫切換的體驗(yàn)匹敵。而且還會(huì)造成更多流量的浪費(fèi)，背后的原因大家可以研究下 mp4 容器和 webm 容器的異同，也可以看下視頻解碼相關(guān)的文章。
還有一種方法就是將 mp4 格式統(tǒng)統(tǒng)轉(zhuǎn)碼到流式的視頻格式比如 hls、webm 等。不過(guò)這種看上去可行的方式實(shí)際上會(huì)帶來(lái)很大的成本開(kāi)銷，如將大量視頻做轉(zhuǎn)碼會(huì)消耗高昂的機(jī)器資源、雙倍存儲(chǔ)的費(fèi)用、CDN的雙倍費(fèi)用等等。其實(shí)我們也是在這種背景下研究出來(lái)新的技術(shù)問(wèn)題解決清晰度無(wú)縫切換的。
首先，我們改變對(duì) mp4 視頻的播放流程，不再直接使用 video 的 src 來(lái)播放，因?yàn)槲覀儧](méi)有任何可以操作的空間。video不僅支持 src 屬性還支持 Blob 對(duì)象，我們就是利用后者。播放的流程如下：
圖1.3 mp4 視頻新播放流程
來(lái)請(qǐng)求 mp4 視頻數(shù)據(jù)，這樣可以結(jié)合視頻 Range 服務(wù)，做到精確加載。
編寫(xiě)解析器將加載回來(lái)的部分 mp4 視頻數(shù)據(jù)進(jìn)行解復(fù)用
將解復(fù)用的視頻數(shù)據(jù)轉(zhuǎn)成 fmp4 格式并傳遞給 MediaSource
使用 video 進(jìn)行解碼完成播放
然后在做清晰度切換的時(shí)候流程如下：
圖1.4 mp4視頻清晰度切換原理示意圖
來(lái)請(qǐng)求 mp4 視頻數(shù)據(jù)，這樣可以結(jié)合視頻 Range 服務(wù)，做到精確加載。
編寫(xiě)解析器將加載回來(lái)的部分 mp4 視頻數(shù)據(jù)進(jìn)行解復(fù)用
將解復(fù)用的視頻數(shù)據(jù)轉(zhuǎn)成 fmp4 格式并傳遞給 MediaSource
使用 video 進(jìn)行解碼完成播放
然后在做清晰度切換的時(shí)候流程如下：
圖1.5 mp4視頻清晰度切換流程示意圖
這個(gè)過(guò)程看上去比較繁瑣，但是所有的操作都是在瀏覽器端完成，也就是說(shuō)都是JS來(lái)實(shí)現(xiàn)的。這樣之前說(shuō)的所有成本問(wèn)題都不存在，還能做到y(tǒng)outube相同體驗(yàn)的無(wú)縫切換。如果大家也想使用這個(gè)功能不需要自己再去實(shí)現(xiàn)一遍上述流程，可以使用如下代碼：
import Player from 'xgplayer';
import 'xgplayer-mp4';
let player = new Player({
el:document.querySelector('#mse'),
url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
});
player.emit('resourceReady', [{name: '高清', url: '/mp4/',cname:'高清'}, {name: '超清', url: '/mp5/',cname:'超清'}]);如果對(duì)這段代碼有什么疑惑或者想深入了解下它背后是如何實(shí)現(xiàn)的可以參考 文檔 或者 Github。
節(jié)省視頻流量我們平時(shí)直接使用video加載視頻，大概是這樣的：
圖2.1 video默認(rèn)下載截圖
我隨便找了個(gè)視頻，大家看下視頻總長(zhǎng)度是 02:08,在播放到 00:05 的時(shí)候，瀏覽器已經(jīng)下載到 01:30 了，如果用戶終止觀看，下載的視頻就這樣被浪費(fèi)掉了。當(dāng)然，如果不斷的 seek 也會(huì)造成較多的流量浪費(fèi)。按照我們之前的統(tǒng)計(jì)在短視頻領(lǐng)域，用戶 seek 的頻率在 80%，所以這部分流量是可以節(jié)省掉的。具體原理如下：
圖2.2 播放器加載視頻原理
設(shè)置每次加載的數(shù)據(jù)包大小
設(shè)置預(yù)加載時(shí)長(zhǎng)
開(kāi)啟加載隊(duì)列，完成第一次數(shù)據(jù)包下載，判斷緩沖時(shí)間和預(yù)加載時(shí)長(zhǎng)是否滿足，不滿足請(qǐng)求下一個(gè)數(shù)據(jù)包
具體實(shí)現(xiàn)代碼如下：
import Player from 'xgplayer';
import 'xgplayer-mp4';
const player = new Player({
id:'vs',
url:'//abc.com/a/mp4',
preloadTime:10
});這樣就實(shí)現(xiàn)了視頻在播放過(guò)程中永遠(yuǎn)只預(yù)加載10秒的數(shù)據(jù)，進(jìn)而保證節(jié)省流量。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享html5中標(biāo)簽video播放的示例分析內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
