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

Posted 2023-03-29

【中文标题】如何在嵌入视频的末尾添加缩略图？

【英文标题】：How to add thumbnail to the end of embedded video?

【发布时间】：2020-09-25 01:45:32

【问题描述】：

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

大家能帮我看看视频播放完后如何添加缩略图吗？

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

【参考方案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>