截取视频中某一帧的图片,以及解决视频截图空白的问题
接触到视频录制这类的需求,我们通常为了ui展示更加美化,我们会在预览的时候,展示视频的某一帧的图片;
在h5的video中,有个poster属性可以实现;但是,也只是在pc端兼容,对于移动端,还是很不友好的,所以,我们通常会自己截图放在img标签中显示;
具体方式如代码:
function getVideoBase64(url) { return new Promise((resovle) =>{ let dataUrl = ''; let video = document.createElement('video'); video.src = url; video.width = 200; video.height = 200; video.muted = true; video.autoplay = true; video.preload = true;
video.setAttribute('playsinline','');
video.setAttribute('webkit-playsinline',''); //这个属性是内联播放,避免在ios中,ios会劫持播放器,自动弹出播放界面
video.onloadeddata = function(){ video.play(); //当视频j据加载完毕时,我们需要先播放视频,从而实现视频截图,解决视频图片空白的问题; setTimeout(()=>{ //设置定时器,播放500ms后,停止播放,然后用canvas生成图片; video.pause(); let canvas = document.createElement('canvas'); canvas.width = video.width; canvas.height = video.height; let ctx = canvas.getContext('2d'); ctx.drawImage(video,0,0,video.width,video.height); dataUrl = canvas.toDataURL('image/png'); // let img = new Image(); // img.src = dataUrl; // img.width = 100; // img.height = 100; // img.style = "border:1px solid red"; // document.querySelector('div').appendChild(img)
// 在ios端会出现,跳出视频播放的界面,我的解决办法如下
video.remove(); //删除创建的视频标签
resovle(dataUrl) },500) } }) }
若有更好的办法,请评论留言。。。。