H5 Video 使用網(wǎng)絡(luò)地址時獲取其大小和第一幀圖片

NoraXie 發(fā)布于2019-08-22 16:33 / 3524人閱讀

摘要：問題描述某一天接了個需求，要求前端獲取視頻文件的大小時長以及第一幀圖片傳給后端服務(wù)器存儲，這樣有兩種情況，一種是通過上傳本地視頻文件，一種是給出視頻的網(wǎng)絡(luò)地址，將其直接賦值給標(biāo)簽的屬性。

問題描述

某一天接了個需求，要求前端獲取視頻文件的大小、時長以及第一幀圖片傳給后端服務(wù)器存儲，這樣有兩種情況，一種是通過input上傳本地視頻文件，一種是給出視頻的網(wǎng)絡(luò)地址，將其直接賦值給video標(biāo)簽的src屬性。

使用input標(biāo)簽上傳本地視頻

使用上傳的視頻文件，這都好說，有了file文件對象，可以隨意操作，獲取其size，再通過FileReader對象來處理file。
這里附上一個demo(使用vue)

    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);
      }

使用網(wǎng)絡(luò)地址訪問視頻

現(xiàn)在需求變一下，視頻不是從本地引入的，而是后端服務(wù)器直接給前端返回視頻src，前端在對視頻播放之后需要給后端服務(wù)器上傳視頻的大小，時長，第一幀圖片，我內(nèi)心：？？？？
時長倒是好處理，可以借鑒第一種情況，通過監(jiān)聽onloadeddata的方法獲取，問題來了，大小怎么獲取？？
上一面文章里面提供了一種canvas圖片跨域的方法https://segmentfault.com/a/11...，最后一種方法也可以用來解決這里的需求，通過發(fā)起一個ajax請求，將網(wǎng)絡(luò)地址的視頻下載為本地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轉(zhuǎn)換為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)
  }
}

這里面根據(jù)視頻的兩種情況分別提供了解決方法，可根據(jù)自身情況選取，自封為“最全解決方法”hhhh