截取視頻中某一幀的圖片，以及解決視頻截圖空白的問題

接觸到視頻錄制這類的需求，我們通常為了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)
    }
  })
}

若有更好的辦法，請評論留言。。。。