视频完成后展示海报

Question

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

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

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

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

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

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

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

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

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

Answer 1

使用videoElement.src = "“而不是videoElement.removeAttribute("src")

Answer 2

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

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

这段视频本质上隐藏了图像，直到播放完毕。

Answer 3

您试过将currentTime设置为0吗？

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