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

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