H5 Video 使用網絡地址時獲取其大小和第一幀圖片

問題描述

某一天接了個需求，要求前端獲取視頻文件的大小、時長以及第一幀圖片傳給後端服務器存儲，這樣有兩種狀況，一種是經過input上傳本地視頻文件，一種是給出視頻的網絡地址，將其直接賦值給video標籤的src屬性。

使用input標籤上傳本地視頻

使用<input type="file">上傳的視頻文件，這都好說，有了file文件對象，能夠隨意操做，獲取其size，再經過FileReader對象來處理file。
這裏附上一個demo(使用vue)

<img id="video-poster" alt="視頻封面" />
<input type="file" id="upload-video" accept="video/*" @change="uploadVideo" />
<video id="video" controls />

uploadVideo: function () {
        var video_file = document.getElementById('upload-video').files[0];
        // 這裏能夠打印出視頻文件的size大小
        console.log(video_file.size);
        if (!video_file) return;
        var reader = new FileReader();
        reader.onload = function () {
          var videoDom = document.getElementById('video');
          videoDom.onloadeddata = function () {
            // 這裏能夠打印視頻時長
            console.log(this.duration);
            // 這裏取得視頻封面
            var canvas = document.createElement('canvas');
            canvas.width = 300;
            canvas.height = 300 * this.videoHeight / this.videoWidth;
            canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
            document.getElementById('video-poster').src = canvas.toDataURL();
          }
          videoDom.src = reader.result;
        }
        reader.readAsDataURL(video_file);
      }

使用網絡地址訪問視頻

如今需求變一下，視頻不是從本地引入的，而是後端服務器直接給前端返回視頻src，前端在對視頻播放以後須要給後端服務器上傳視頻的大小，時長，第一幀圖片，我心裏：？？？？
時長卻是好處理，能夠借鑑第一種狀況，經過監聽onloadeddata的方法獲取，問題來了，大小怎麼獲取？？
上一面文章裏面提供了一種canvas圖片跨域的方法https://segmentfault.com/a/11...，最後一種方法也能夠用來解決這裏的需求，經過發起一個ajax請求，將網絡地址的視頻下載爲本地blob視頻文件，再將blob文件賦值給視頻的src

function getVideoBlob (url, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open('get', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (this.status == 200) {
      // 獲取視頻文件大小
      console.log(this.response.size / 1000000 + 'MB');
      spiderVideoResponse = this.response;
      // 將response賦值爲Video的src 或者也能夠使用preView轉換爲base64的格式
      // 截取第一幀的圖片方法跟第一種狀況同樣，並且還解決了獲取圖片時跨域的問題 一箭雙鵰
      video.src = URL.createObjectURL(this.response);
    }
  };
  xhr.send();
}
function preView (url) {
  let reader = new FileReader();
  getImageBlob(url, function (blob) {
    reader.readAsDataURL(blob);
  });
  reader.onload = function (e) {
    console.log(e.loaded)
  }
}

這裏面根據視頻的兩種狀況分別提供瞭解決方法，可根據自身狀況選取，自封爲「最全解決方法」hhhh