🎥✨js截取video视频某一帧做封面的简单案例📸

在日常开发中，我们经常需要从一个视频中提取某一帧作为封面图，这不仅能提升用户体验，还让界面更加美观！今天给大家分享一个简单的实现方式，只需几行代码即可搞定！💻⚡

首先，我们需要借助HTML5中的`

1️⃣ 创建一个`

2️⃣ 使用`video.play()`播放视频至目标时间点；

3️⃣ 调用`canvas`绘制当前画面，再导出为图片格式（如PNG或JPEG）。

示例代码如下：

```html

```

接着，添加JS逻辑：

```javascript

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

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

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

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

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

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

cover.src = canvas.toDataURL('image/png'); // 导出为图片

});

```

💡小贴士：记得提前测试视频路径是否正确哦！如果视频较长，可以手动调整播放时间，比如设置`currentTime`属性。快试试吧，制作属于你的个性化视频封面！💫