題目形貌

某一天接了個需求，要求前端獵取視頻文件的大小、時長以及第一幀圖片傳給後端服務器存儲，如許有兩種狀況，一種是經由過程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