video标签没有默认封面

### 设置 HTML5 Video 标签的默认封面图

为了确保 `video` 标签具有默认封面图，在 HTML 中可以利用 `poster` 属性来指定一张图片作为视频未播放之前的展示图像[^1]。

<video width="320" height="240" controls poster="path_to_your_image.jpg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

上述代码片段展示了如何通过 `poster` 属性设置静态封面图。其中 `"path_to_your_image.jpg"` 应替换为实际封面图片路径，而 `<source>` 标签内的属性则用于定义要加载的媒体文件及其 MIME 类型。

对于动态更新封面的情况，比如在某些场景下用户中途停止播放后希望恢复原始封面而非暂停帧，则可以通过 JavaScript 来实现这一需求：

const videos = document.querySelectorAll('video');
videos.forEach(video => {
    let originalPoster = video.poster;
    
    video.addEventListener('play', function() {
        this.setAttribute('data-poster', this.getAttribute('poster'));
        this.removeAttribute('poster'); // 移除 poster 让其显示当前帧
    });

    video.addEventListener('pause', function() {
        const savedPoster = this.getAttribute('data-poster') || originalPoster;
        this.setAttribute('poster', savedPoster);
        this.load(); // 加载新的 poster 并重置视频位置
    });
});

此段脚本会在每次播放时保存原有的 `poster` 值，并在玩家暂停时重新应用该值以覆盖掉最后一帧画面，从而达到保持原封面的效果[^2]。