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

这里面根据视频的两种情况分别提供了解决方法，可根据自身情况选取，自封为“最全解决方法”

转载来源：https://segmentfault.com/

链接: https://www.fly63.com/article/detial/686