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

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

這個時候用戶點擊播放按鈕就可以開始播放了。

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

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

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

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

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

video 提供了 包括 play , pause , progress 等事件。當(dāng)播放器處在不同的狀態(tài)時候進行觸發(fā)。其中 progress 會在視頻進行下載的時候進行觸發(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);

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

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

  // 通過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();
  };

測試結(jié)果

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

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