html5中標(biāo)簽video播放的示例分析

這篇文章主要介紹了html5中標(biāo)簽video播放的示例分析，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

前端同學(xué)要使用 HTML5 播放器視頻，必然會使用 video 標(biāo)簽，不過大多數(shù)同學(xué)只是使用了較簡單的功能，其實它本身擁有不凡之力有待我們發(fā)現(xiàn)。

首先，我們先來看下 video 最基礎(chǔ)的用法：

• 使用 src 屬性

  <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  你的瀏覽器不支持 <code>video</code> 標(biāo)簽。
  </video>

• 使用 source 標(biāo)簽

  <video controls>
    <source src="foo.ogg" type="video/ogg">
    <source src="foo.mp4" type="video/mp4">
    Your browser does not support the <code>video</code> element.
  </video>

這是 MDN 關(guān)于 video 給出的基本用例。在這里我們簡單介紹下兩種方法的不同，src 只能賦予 video 一個播放地址，當(dāng)瀏覽器不支持這種視頻格式的解碼時就會出現(xiàn)錯誤，導(dǎo)致視頻播放失敗。為了解決這個問題才有了 source 標(biāo)簽，利用多個 source 標(biāo)簽引入不同格式的視頻，從上到下解析直到遇到看上述代碼當(dāng)瀏覽器不支持 ogg 格式時，瀏覽器會自動播放 foo.mp4。

實用技巧

我們會發(fā)現(xiàn)使用 video:src 屬性播放視頻的時候會經(jīng)常出現(xiàn)播放失敗，我們該怎么做能提升視頻播放的質(zhì)量？

這種情況一般都使用 cdn，為了更保險一般還會將不同的 cdn 廠商分為主用 cdn 和備用 cdn。那么問題來了，我們怎么利用 video 本身的特性并結(jié)合 cdn 保證我們的視頻播放質(zhì)量？

<video controls>
  <source src="//a.com/main.mp4" type="video/mp4">
  <source src="//b.com/backup.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

不難看出，source 標(biāo)簽不僅支持不同視頻格式的自動切換，也適用于相同視頻格式的失敗切換，即 main.mp4 因網(wǎng)絡(luò)問題無法獲取時瀏覽器會自動切換到 backup.mp4 。

高階技能

如果大家瀏覽視頻的時候，可以發(fā)現(xiàn)很多網(wǎng)站的 video 是這個樣子的：

<video src="blob:http://abc.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107">
</video>

如果直接訪問 blob 這個地址發(fā)現(xiàn)并不存在。

這個地址就是映射 Blob 對象的 DOMString，其實 video 屬性 src 支持 Blob 的，不過新的標(biāo)準(zhǔn)是使用 srcObject 屬性來替代這一個功能，目前代碼可以這樣寫：

const mediaSource = new MediaSource();
const video = document.createElement('video');
try {
  video.srcObject = mediaSource;
} catch (error) {
  video.src = URL.createObjectURL(mediaSource);
}

在這段代碼中除了 Blob 對象，還有 MediaSource 對象，讓 video 擁有不凡之力的主要因素是瀏覽器對 MediaSource 對象的支持，才讓 JavaScript 對 video 有了更大的操縱空間。關(guān)于如何使用 MediaSource 不在本文講述，大家可以自行查閱，我們要說的是 video 結(jié)合 MediaSource 可以做哪些事情？

清晰度無縫切換

點播領(lǐng)域里 mp4 是最普遍、兼容性最好的視頻容器，不過 mp4 也有它的局限性，比如常見的清晰度切換，我們是無法像youtube那樣做到無縫切換的。我們可以看下普通的mp4播放的網(wǎng)絡(luò)請求和youtube視頻播放的網(wǎng)絡(luò)請求的區(qū)別。

圖1.1 普通mp4的下載請求過程

圖1.2 Youtube視頻下載請求過程

這兩張圖不難看出，在默認(rèn)情況下 mp4 使用一次 http 請求所有的視頻數(shù)據(jù)，Youtube 則分次請求。當(dāng)然這個描述很不專業(yè)，但確實形象。造成這種差異的是 video 不支持流式的視頻數(shù)據(jù)，Youtube 采用的是流式的視頻容器 webm，而 mp4 是非流式的。那如何解釋清楚流式的視頻數(shù)據(jù)呢，從專業(yè)的角度三言兩語很難說清楚，但用大白話翻譯過來就是流式的視頻數(shù)據(jù)支持分段獨立播放，非流式的不可以。換句話說一個10M的視頻文件，流式的視頻可以把0~1M的數(shù)據(jù)請求回來單獨播放，但是非流式的不可以。

上面我們描述了視頻格式的不同，接下來我們要說的是第一張圖中的視頻加載是瀏覽器來控制的，通過給 video 的 src 屬性配置視頻地址，觸發(fā)播放之后瀏覽器就會開始下載了，JS干涉不了。而 Youtube 的視頻加載是通過JS來控制的，各位可以再次看下第二張圖的網(wǎng)絡(luò)請求類型：xhr，足以證明這一點。

上面兩點搞清楚之后我們就該說下清晰度切換的事情了。這個需求大家都不陌生，但是直接使用 mp4 格式做無縫清晰度切換，難度還挺大的。先解釋下“無縫清晰度切換”的概念：從播放一個分辨率的視頻到另一個分辨率且保證畫面、聲音不停頓的平滑切換過程。了解了這個概念，大家應(yīng)該知道了用 video 無縫切換 mp4 有多難。一方面，video 是不支持流式的視頻格式的，一方面，video 的加載是不受JS控制的。通過切換 video 的 src 屬性，必然會導(dǎo)致畫面中斷、重新請求視頻數(shù)據(jù)等。有的同學(xué)想到說利用兩個 video 再結(jié)合 z-index 來搞，但是當(dāng)你生成另一個video去加載視頻的時候，無法保證兩個畫面是嚴(yán)格一致的，即使將原來的畫面暫停到一個時刻，用另一個視頻通過 currentTime 屬性與之同步，切換仍然看到畫面閃爍，基本無法和 Youtube 無縫切換的體驗匹敵。而且還會造成更多流量的浪費，背后的原因大家可以研究下 mp4 容器和 webm 容器的異同，也可以看下視頻解碼相關(guān)的文章。

還有一種方法就是將 mp4 格式統(tǒng)統(tǒng)轉(zhuǎn)碼到流式的視頻格式比如 hls、webm 等。不過這種看上去可行的方式實際上會帶來很大的成本開銷，如將大量視頻做轉(zhuǎn)碼會消耗高昂的機(jī)器資源、雙倍存儲的費用、CDN的雙倍費用等等。其實我們也是在這種背景下研究出來新的技術(shù)問題解決清晰度無縫切換的。

首先，我們改變對 mp4 視頻的播放流程，不再直接使用 video 的 src 來播放，因為我們沒有任何可以操作的空間。video不僅支持 src 屬性還支持 Blob 對象，我們就是利用后者。播放的流程如下：

  圖1.3 mp4 視頻新播放流程

• 來請求 mp4 視頻數(shù)據(jù)，這樣可以結(jié)合視頻 Range 服務(wù)，做到精確加載。

• 編寫解析器將加載回來的部分 mp4 視頻數(shù)據(jù)進(jìn)行解復(fù)用

• 將解復(fù)用的視頻數(shù)據(jù)轉(zhuǎn)成 fmp4 格式并傳遞給 MediaSource

• 使用 video 進(jìn)行解碼完成播放

然后在做清晰度切換的時候流程如下：

  圖1.4 mp4視頻清晰度切換原理示意圖

• 來請求 mp4 視頻數(shù)據(jù)，這樣可以結(jié)合視頻 Range 服務(wù)，做到精確加載。

• 編寫解析器將加載回來的部分 mp4 視頻數(shù)據(jù)進(jìn)行解復(fù)用

• 將解復(fù)用的視頻數(shù)據(jù)轉(zhuǎn)成 fmp4 格式并傳遞給 MediaSource

• 使用 video 進(jìn)行解碼完成播放

  然后在做清晰度切換的時候流程如下：

  
  圖1.5 mp4視頻清晰度切換流程示意圖

  這個過程看上去比較繁瑣，但是所有的操作都是在瀏覽器端完成，也就是說都是JS來實現(xiàn)的。這樣之前說的所有成本問題都不存在，還能做到y(tǒng)outube相同體驗的無縫切換。如果大家也想使用這個功能不需要自己再去實現(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:'超清'}]);

如果對這段代碼有什么疑惑或者想深入了解下它背后是如何實現(xiàn)的可以參考 文檔 或者 Github。

節(jié)省視頻流量

我們平時直接使用video加載視頻，大概是這樣的：

圖2.1 video默認(rèn)下載截圖

我隨便找了個視頻，大家看下視頻總長度是 02:08,在播放到 00:05 的時候，瀏覽器已經(jīng)下載到 01:30 了，如果用戶終止觀看，下載的視頻就這樣被浪費掉了。當(dāng)然，如果不斷的 seek 也會造成較多的流量浪費。按照我們之前的統(tǒng)計在短視頻領(lǐng)域，用戶 seek 的頻率在 80%，所以這部分流量是可以節(jié)省掉的。具體原理如下：

圖2.2 播放器加載視頻原理

• 設(shè)置每次加載的數(shù)據(jù)包大小

• 設(shè)置預(yù)加載時長

• 開啟加載隊列，完成第一次數(shù)據(jù)包下載，判斷緩沖時間和預(yù)加載時長是否滿足，不滿足請求下一個數(shù)據(jù)包

具體實現(xiàn)代碼如下：

  import Player from 'xgplayer';
  import 'xgplayer-mp4';
  const player = new Player({
    id:'vs',
    url:'//abc.com/a/mp4',
    preloadTime:10
  });

這樣就實現(xiàn)了視頻在播放過程中永遠(yuǎn)只預(yù)加載10秒的數(shù)據(jù)，進(jìn)而保證節(jié)省流量。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享html5中標(biāo)簽video播放的示例分析內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!