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

NoraXie 发布于2019-08-22 16:33 / 3282人阅读

摘要：问题描述某一天接了个需求，要求前端获取视频文件的大小时长以及第一帧图片传给后端服务器存储，这样有两种情况，一种是通过上传本地视频文件，一种是给出视频的网络地址，将其直接赋值给标签的属性。

问题描述

某一天接了个需求，要求前端获取视频文件的大小、时长以及第一帧图片传给后端服务器存储，这样有两种情况，一种是通过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

专线服务云服务器 js获取视频第一帧获取图片大小 h5 webrtc 获取IP地址 js截取视频第一帧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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