js截取视频第一帧(截取图片不会是黑色的)

场景

最近测试提的bug里有个我做的上传视频的功能,编辑回显的视频封面有时候是黑色的。经排查是在截取视频第一帧时出的问题。

问题

我的电脑是win7系统,测试们的电脑是win10系统,且都是用的chrome浏览器,我的是截图的图片每次都是正常的,但是他们的电脑使用该功能时确实偶尔会出现黑色图片封面的问题。经从网上搜索终于解决了,由于复现不了bug搞了一下午。

解决

最终不知道加的哪行代码起的作用,反正这些代码是起了解决截取视频第一帧图片不会是黑色的问题的。
bash 复制代码
video.setAttribute('crossOrigin', 'anonymous');
video.setAttribute('preload', 'auto');
video.setAttribute('autoplay', true);
video.setAttribute('muted', true);
video.preload = 'auto';
video.autoplay = true;
video.muted = true;
下面附上js截取视频第一帧的完整方法
bash 复制代码
cutPicture(item) {
  let video = document.createElement("video");
  video.style = 'position:fixed; top: 9999px;left:9999px;z-index:-9999'
  video.src = item.location_url
  video.setAttribute('crossOrigin', 'anonymous');
  video.setAttribute('preload', 'auto');
  video.setAttribute('autoplay', true);
  video.setAttribute('muted', true);
  video.preload = 'auto';
  video.autoplay = true;
  video.muted = true;
  // video.currentTime = 1   //截取的视频第一秒作为图片
  video.width = 56
  video.height = 56
  document.body.appendChild(video)
  let oGrayImg=require('@/assets/images/icon/txt.png');
  return new Promise((resolve,reject)=>{
    video.onloadeddata = function () {
      let canvas = document.createElement('canvas')
      canvas.width = 56
      canvas.height = 56
      canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
      oGrayImg = canvas.toDataURL('image/jpeg');
      this.remove()
      resolve(oGrayImg)
    }
  })
}
相关推荐
旧味清欢|7 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾24 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin36 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员