截取视频中某一帧的图片，以及解决视频截图空白的问题

接触到视频录制这类的需求，我们通常为了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)
    }
  })
}

若有更好的办法，请评论留言。。。。