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

NoraXie 發布于2019-08-22 16:33 / 3508人閱讀

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

問題描述

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

使用input標簽上傳本地視頻

使用上傳的視頻文件，這都好說，有了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);
      }

使用網絡地址訪問視頻

現在需求變一下，視頻不是從本地引入的，而是后端服務器直接給前端返回視頻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

GPU云服務器云服務器 js獲取視頻第一幀獲取圖片大小 h5 webrtc 獲取IP地址 js截取視頻第一幀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94454.html

html5新特性與用法大全了解一下

摘要：有好多小伙伴私聊我問我新特性和用法，下面我給大家具體介紹一下都新加了哪些新特性，下面我給大家總結一下。簡單了解一下就可以。有好多小伙伴私聊我問我html5新特性和用法，下面我給大家具體介紹一下html5都新加了哪些新特性，下面我給大家總結一下。 1)新的語義標簽 footer header 等等2）增強型表單表單2.03）音頻和視頻4）canvas 繪圖5） SVG繪圖6）地理定位7）...

番茄西紅柿 2019-04-23 13:23 評論0 收藏0
談談常見H5制作方法——視頻與CSS3

摘要：但目前白名單申請途徑已經關閉。目前在安卓有一種同層播放器的解決方案。可解決安卓機自動全屏以及視頻播放完畢會跳出廣告的問題，并且可以實現交互。本文在H5動效的常見制作手法的基礎上，對相印的H5動效制作手法進行了擴展和整理，并結合案例談談怎么將其做得生動。視頻類 1、體驗案例視頻類h5可以帶給用戶動效逼真，流暢的體驗。雖然說制作視頻的難度較大，但是瑕不掩瑜，一支視頻可以盡可能地創造出...

tracy 2019-06-21 16:14 評論0 收藏0
WEB/H5性能優化總結

摘要：如下圖所示一重繪與回流前端性能優化最關鍵的就是減少頁面的重繪與回流。很明顯就是少了一步，這是因為把會觸發回流的屬性用替代，這樣就使渲染的過程減少了這一步，使渲染的時間減少從而提高性能。我們今天來說說前端圖形渲染優化，因為我接下來的時間可能要開始研究webgl方面的東西，所以就在這里把之前做過的H5做一個總結，現同步發布于GERRY_BLOG，TiMiGerry-知乎，轉載請保留鏈接。...

stdying 2019-08-06 13:36 評論0 收藏0