视频结束后展示海报答案

【问题标题】：Show poster after video is finished视频结束后展示海报
【发布时间】：2017-04-26 17:39:19
【问题描述】：

我使用视频作为页面背景，视频在页面启动时播放。视频完成后，我想用一张图片作为我的页面背景，图片实际上是视频的最后一帧，是视频最后一帧的更高质量版本。

我的做法是使用视频标签的海报属性。我会在视频播放后设置海报，但是当视频停止时海报不会显示，因为它停留在视频文件的最后一帧，所以我使用 javascript 来监控视频播放的结束：

设置 src 为 null 将显示视频标签的海报

document.getElementById("video-player").setAttribute("src", null);

但从视频中删除源将不会显示海报，而是之前删除的视频的最后一帧。

document.getElementById("video-player").removeAttribute("src");

我的问题是是否有更好的方法来显示视频标签的海报，因为将 src 设置为 null 不仅看起来像 hack，而且还会给我 404 错误，尽管它有效。

编辑：这将在删除 src 后重新加载我的海报，但也可能重新加载视频。

document.getElementById("video-player").load()

【问题讨论】：

【解决方案1】：

使用 videoElement.src = "" 代替 videoElement.removeAttribute("src")

【讨论】：

【解决方案2】：

您可以将视频容器元素的背景图片设置为海报图片。

然后在视频结束时将视频元素设置为不透明度 0。

视频基本上隐藏了图像，直到它播放完毕。

【讨论】：

【解决方案3】：

您是否尝试将 currentTime 设置为 0？

document.getElementById("video-player")[0].currentTime = 0;

【讨论】：