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

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

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

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

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

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

Auto：全部預加載。

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

video 提供了 包括 play , pause , progress 等事件。當播放器處在不同的狀態時候進行觸發。其中 progress 會在視頻進行下載的時候進行觸發。

　　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 事件我們可以確保我們的視頻都能夠緩沖完成。但是現代的瀏覽器都只會進行局部內容的下載，因為瀏覽器認為這段內容足夠完成成功播放。因此，我們可以通過播放視頻一會在暫停用于視頻緩沖的方式在后臺進行視頻加載。

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

  // 通過blob預加載 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();
  };

測試結果

通過圖片發現video的src發生了變化，但是播放的內容都是一樣的。

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