H5 Video 使用网络地址时获取其大小和第一帧图片

时间: 2018-04-20阅读: 210标签: 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/