在制作網(wǎng)頁時，我們常常需要為H5 Video添加一個吸引人的封面圖。今天就來分享如何用簡單的JavaScript實(shí)現(xiàn)這一功能！??

首先，我們需要HTML結(jié)構(gòu)，包含一個`

```html

```

接著，通過JavaScript獲取視頻的第一幀并將其設(shè)置為封面：

```javascript

const video = document.getElementById('myVideo');

const coverImage = document.getElementById('coverImage');

// 當(dāng)視頻加載完成后截圖

video.addEventListener('loadeddata', () => {

const canvas = document.createElement('canvas');

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

coverImage.src = canvas.toDataURL(); // 轉(zhuǎn)換為圖片格式

});

```

這樣，視頻的第一幀就被成功提取并設(shè)置為封面啦！??

無論是提升用戶體驗(yàn)，還是增強(qiáng)視覺效果，這種方法都非常實(shí)用。快來試試吧！??