js截取视频第一帧为封面

PC端

如果只有pc端的需求,那么可以直接利用loadeddata方法截取视频内容

const canvas = document.createElement('canvas');
const video = document.getElementById('video');
video.setAttribute('crossOrigin', 'anonymous'); // 添加跨域标识,否则canvas转图报错
video.currentTime = 1; //  不设置会导致进度为0,截取空白内容
const { clientWidth, clientHeight } = video
canvas.width = clientWidth;
canvas.height =  clientHeight;
video.onloadeddata = (() => {
    canvas.getContext('2d').drawImage(video, 0, 0, clientWidth, clientHeight);
    const dataURL = canvas.toDataURL('image/png');
    video.setAttribute("poster", dataURL); // 设置canvas转化后的图片为封面
})

移动端

但是在移动端,loadeddata方法只有在视频播放时才会被调用。尝试以下方式,仍是无效。

  1. 在加载完节点后手动调用该方法,但是拿到的仍是空白页面。
  2. 添加属性autoplay为true,无效。
  3. 手动调用play方法再赞同,无效。浏览器已经不支持在移动端默认播放视频了,所以强制调用只会报错。

所以,咱得借助第三方。

  1. 腾讯云
    官方地址:https://cloud.tencent.com/document/product/436/73434
src = `${videoSrc}?ci-process=snapshot&time=0.01`
  1. 阿里云
    官方地址:https://help.aliyun.com/document_detail/64555.html
src = `${videoSrc}?x-oss-process=video/snapshot,t_50000,f_jpg,w_800,h_600`
  1. 七牛云
src = `${videoSrc}?vframe/jpg/offset/0`

如果你的视频存储在其他云平台,也可以到对应平台查看是否有方法可以直接获取

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容