Vue 截取视频封面图


上传的视频可能没有封面图,可以运用此方法实现自动创建封面图!可以省略自己手动添加,大大的方便了 seo 运营 部分同事的工作效率。

首先要创建个 canvas ,这里注意:要在视频URL地址赋值前在 canvas 元素里设置属性 crossOrigin="anonymous" (防止跨域)

var canvas = document.createElement('canvas');
var img = document.getElementById('img');
const video = document.getElementById('video');
video.setAttribute('crossOrigin', 'anonymous');
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL('image/png');
img.setAttribute('src', dataURL);

398

声明:Web前端小站 - 前端博客 - 王搏的个人博客|版权所有,违者必究|如未注明,均为原创

转载:转载请注明原文链接 - Vue 截取视频封面图

评论
孙瑞杰生日