视频播放完毕后显示海报

Question

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

我的方法是使用视频标签的poster属性。 我会在播放视频后设置海报，但是当视频停在视频文件的最后一帧时，海报不会显示，所以我使用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;