摘要：使用標(biāo)簽這是關(guān)于給出的基本用例。其實(shí)我們也是在這種背景下研究出來新的技術(shù)問題解決清晰度無縫切換的。這樣之前說的所有成本問題都不存在，還能做到相同體驗(yàn)的無縫切換。所有代碼來自帶解析器能節(jié)省流量的西瓜播放器

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

首先，我們先來看下 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è)問題才有了 source 標(biāo)簽，利用多個(gè) source 標(biāo)簽引入不同格式的視頻，從上到下解析直到遇到看上述代碼當(dāng)瀏覽器不支持 ogg 格式時(shí)，瀏覽器會(huì)自動(dòng)播放 foo.mp4。

我們會(huì)發(fā)現(xiàn)使用 video:src 屬性播放視頻的時(shí)候會(huì)經(jīng)常出現(xiàn)播放失敗，我們?cè)撛趺醋瞿芴嵘曨l播放的質(zhì)量？

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

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

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

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

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

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 不在本文講述，大家可以自行查閱，我們要說的是 video 結(jié)合 MediaSource 可以做哪些事情？

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

圖1.1 普通mp4的下載請(qǐng)求過程

圖1.2 Youtube視頻下載請(qǐng)求過程

這兩張圖不難看出，在默認(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è)的角度三言兩語很難說清楚，但用大白話翻譯過來就是流式的視頻數(shù)據(jù)支持分段獨(dú)立播放，非流式的不可以。換句話說一個(gè)10M的視頻文件，流式的視頻可以把0~1M的數(shù)據(jù)請(qǐng)求回來多帶帶播放，但是非流式的不可以。

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

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

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

首先，我們改變對(duì) mp4 視頻的播放流程，不再直接使用 video 的 src 來播放，因?yàn)槲覀儧]有任何可以操作的空間。video不僅支持 src 屬性還支持 Blob 對(duì)象，我們就是利用后者。播放的流程如下：

圖1.3 mp4 視頻新播放流程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我隨便找了個(gè)視頻，大家看下視頻總長度是 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í)長

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

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

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

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

所有代碼來自帶解析器、能節(jié)省流量的西瓜播放器,Github