URCloud

/ 0评 / 14/ 最后更新:2021-12-08
前端自动截取视频第一帧作为封面

需求场景

现在的移动端播放器往往都是h5实现的,我们知道通过设置poster属性就可以设置视频封面,一种方式就是后台上传视频的时候同时上传封面,或者自动生成封面。这样后端同学的工作就相对多了,还有一种折衷的方案就是前端自动生成封面图。

基本原理

通过video的loadeddata事件,以及canvas绘制视频的第一帧,生成base64图片后赋值给video的poster属性。

核心代码

    function setPoster(video,scale) {
      var scale = scale || 0.8
      // 设置poster属性:(非本地视频资源会有跨域截图问题)
      // video.setAttribute('crossOrigin', 'anonymous');//处理跨域
      video.addEventListener('loadeddata', function (e) {
        // 截取视频第一帧
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        var src = canvas.toDataURL('image/png');
        // 设置属性
        video.setAttribute('poster', src);
      });
    };

演示地址

前端自动截取视频第一帧作为封面演示地址

异常情况

  1. ios下video标签必须加上autoplay,否则不会触发loadeddata事件。
  2. 如果在微信中测试,可以发现ios并不能生效,在safari浏览器却是可以的,原因和微信禁止了视频的默认播放有关。
  3. 还有一个缺点, 如果视频第一帧是黑屏,截图出来就会是黑的。

总结

总的来说,前端生成封面只能是一种临时解决方案。最好还是通过后端实现封面的上传和截图,最简单的可以调用七牛云等服务商的视频封面api。七牛云视频封面演示

http://cdn.urcloud.co/190318231014076505.mp4?vframe/jpg/offset/1

后端视频截图参考

ffmpeg视频截图

14

Leave a Reply

Your email address will not be published.