需求场景
现在的移动端播放器往往都是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);
});
};演示地址
异常情况
- ios下video标签必须加上autoplay，否则不会触发loadeddata事件。
- 如果在微信中测试，可以发现ios并不能生效，在safari浏览器却是可以的，原因和微信禁止了视频的默认播放有关。
- 还有一个缺点， 如果视频第一帧是黑屏，截图出来就会是黑的。
总结
总的来说，前端生成封面只能是一种临时解决方案。最好还是通过后端实现封面的上传和截图，最简单的可以调用七牛云等服务商的视频封面api。七牛云视频封面演示
http://cdn.urcloud.co/190318231014076505.mp4?vframe/jpg/offset/1