场景
最近测试提的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)
}
})
}