摘要：此屬性用于定義視頻是否預(yù)加載。它并沒(méi)有自動(dòng)進(jìn)行全部視頻內(nèi)容的下載，這樣的策略實(shí)際有利于節(jié)約用戶寬帶造成不必要的請(qǐng)求。因此，我們可以通過(guò)播放視頻一會(huì)在暫停用于視頻緩沖的方式在后臺(tái)進(jìn)行視頻加載。

默認(rèn)情況下我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 H5 的播放器，只需要這么簡(jiǎn)單的代碼就好：

這個(gè)時(shí)候用戶點(diǎn)擊播放按鈕就可以開(kāi)始播放了。

但是為了更好的用戶體驗(yàn)，我們有的時(shí)候需要預(yù)加載視頻，比如有的視頻可能是在用戶產(chǎn)生某些交互進(jìn)行顯示播放的。這個(gè)時(shí)候我們優(yōu)先想到的是 preload 屬性。
此屬性用于定義視頻是否預(yù)加載。屬性有三個(gè)可選擇的值：none、metadata、auto。如果不使用此屬性，默認(rèn)為auto。

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

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

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

但是我們查看視頻的請(qǐng)求，我們發(fā)現(xiàn)其實(shí)只預(yù)加載了一部分。它并沒(méi)有自動(dòng)進(jìn)行全部視頻內(nèi)容的下載，這樣的策略實(shí)際有利于節(jié)約用戶寬帶造成不必要的請(qǐng)求。

video 提供了 包括 play , pause , progress 等事件。當(dāng)播放器處在不同的狀態(tài)時(shí)候進(jìn)行觸發(fā)。其中 progress 會(huì)在視頻進(jìn)行下載的時(shí)候進(jìn)行觸發(fā)。

　　video.addEventListener("progress", function() {
　　// When buffer is 1 whole video is buffered
　　if (Math.round(video.buffered.end(0)) / Math.round(video.seekable.end(0)) === 1) {
　　// Entire video is downloaded
　　}
　　}, false);

通過(guò) progress 事件我們可以確保我們的視頻都能夠緩沖完成。但是現(xiàn)代的瀏覽器都只會(huì)進(jìn)行局部?jī)?nèi)容的下載，因?yàn)闉g覽器認(rèn)為這段內(nèi)容足夠完成成功播放。因此，我們可以通過(guò)播放視頻一會(huì)在暫停用于視頻緩沖的方式在后臺(tái)進(jìn)行視頻加載。

其實(shí)我們可以使用 ajax 去進(jìn)行資源的請(qǐng)求，如果響應(yīng)的類型是 blob 的話，我們可以創(chuàng)建一個(gè) object url 的。而此時(shí)這個(gè) url 的生命周期取決于 document 創(chuàng)建開(kāi)始。

  // 通過(guò)blob預(yù)加載 src為原視頻的視頻地址
  blob_load = (src) => {
    const req = new XMLHttpRequest();
    req.open("GET", src, true);
    req.responseType = "blob";
    req.onload = function () {
      // Onload is triggered even on 404
      // so we need to check the status code
      if (this.status === 200) {
        const videoBlob = this.response;
        const blobSrc = URL.createObjectURL(videoBlob); // IE10+
        // Video is now downloaded
        // and we can set it as source on the video element
        // video.src = blobSrc ;
        
        console.log(blobSrc, "blobSrc加載完畢");
      }
    };
    req.onerror = function () {
      // Error
    };
    req.send();
  };

測(cè)試結(jié)果

通過(guò)圖片發(fā)現(xiàn)video的src發(fā)生了變化，但是播放的內(nèi)容都是一樣的。

通過(guò)bloburl的方式我們可以將整個(gè)視頻緩存在本地，然后指定視頻的播放位置也能快速播放。對(duì)于有操作視頻的并且及時(shí)性要求比較高的小伙伴可以試試。