寫在前邊：因為項目是用vue.js框架實現，所以以下代碼是vue.js語法。 首先，看一下Dom元素（[video相關屬性和事件](https://link.segmentfault.com/?enc=S6OyzGRqu9w8ieCMy6y1bw%3D%3D.PR4qH%2FD%2FKPqA6uFVUJBVTwKLm4kAGHXCXbpkUOJuWNozsopGF5yL83UaFVfnDw5ocGmuqqx3TlFm7H%2F2ZutAJu%2FpFFvrm9a1O44ANcNTnyk%3D)）： ``` ~~~awk <video @loadeddata="createPreImg($event)" // loadeddata事件表示media中的首幀已經加載 class="content-video" :src="item.videoUrl" // 視頻地址（可以是當前域下的，也可以是其他域下的） crossorigin="anonymous" // 允許跨域（由于瀏覽器的同源策略，如果視頻是其他域，需要設置此屬性） preload="auto" // 預加載（移動端需要設置此屬性，因為移動端有很多播放限制，很多都不會自動加載） ></video> ~~~ ``` 其次，是javascript部分代碼： ``` ~~~mel createPreImg(event) { // event js原生事件 const videoEle = event.target; // 當前video dom節點 videoEle.currentTime = 1; // 設置視頻開始播放時間（因為有些手機第一幀顯示黑屏，所以這里選取視頻的第一秒作為封面） videoEle.addEventListener('canplay', function () { // 監聽video的canplay事件 // 創建canvas元素 并設置canvas大小等于video節點的大小 const canvas = document.createElement('canvas'); const scale = 0.8; // 壓縮系數 canvas.width = videoEle.videoWidth * scale; canvas.height = videoEle.videoHeight * scale; // canvas畫圖 canvas.getContext('2d').drawImage(videoEle, 0, 0, canvas.width, canvas.height); // 把canvas轉成base64編碼格式 const imgSrc = canvas.toDataURL('image/png'); // 創建img元素 插入到文檔中 const img = document.createElement('img'); img.src = imgSrc; img.style.position = 'absolute'; img.style.left = '0'; img.style.top = '0'; img.style.objectFit = 'cover'; videoEle.parentNode && videoEle.parentNode.appendChild(img); }); } ~~~ ```