如何在嵌入视频的末尾添加缩略图？

Question

我的网站上有一个嵌入式视频，目前正在使用以下代码。我不希望视频循环播放，但一旦视频播放完毕就会出现黑屏。我知道 video 标签下有 poster 选项，但它只在视频开始时显示缩略图，播放完毕后不显示。

请问大家帮我看看视频播放完后怎么加缩略图？

<video controls autoplay poster="some_path">
    <source src="some_video.mp4" type="video/mp4">
</video>

Answer 1

我看到有两种方法可以解决您的问题。

这将在视频结束后将您的当前帧设置为位置 0（第一帧）。你可以设置任何你喜欢的框架。推荐使用此解决方案。

<video controls id="myVideo" poster="test.jpg">
  <source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
  myVideo.currentTime = 0;
};
</script>

下一篇会重新加载视频源，所以海报会再次出现。根据 video 中 poster 的规范，它只会显示到视频开始一次。之后，再次获得海报的唯一方法是重新加载视频 src 和一个 poster，只是为了确保。工作会更稳定一点。

<video controls id="myVideo" poster="test.jpg">
  <source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
  myVideo.poster = "test.jpg"
  myVideo.src = "test.mp4"
};
</script>

如何在嵌入视频的末尾添加缩略图？

How to add thumbnail to the end of embedded video?

html

javascript

css

video

thumbnails