html5 video 視頻頁面內緩存 - 全量加載方法

preload

默認狀況下咱們實現一個簡單的 H5 的播放器，只須要這麼簡單的代碼就好：

<video preload width="320" height="240" controls src="./static/videos/1.mp4"></video>

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

可是爲了更好的用戶體驗，咱們有的時候須要預加載視頻，好比有的視頻多是在用戶產生某些交互進行顯示播放的。這個時候咱們優先想到的是 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 事件咱們能夠確保咱們的視頻都可以緩衝完成。可是現代的瀏覽器都只會進行局部內容的下載，由於瀏覽器認爲這段內容足夠完成成功播放。所以，咱們能夠經過播放視頻一會在暫停用於視頻緩衝的方式在後臺進行視頻加載。

使用 bloburl

其實咱們可使用 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的方式咱們能夠將整個視頻緩存在本地，而後指定視頻的播放位置也能快速播放。對於有操做視頻的而且及時性要求比較高的小夥伴能夠試試。