<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">
以上；在 HTML5 <video> 标签内，我可以添加一张海报；图像或动画 .gif 就可以了，并在“播放”实际视频之前播放/运行。
现在，如何添加图片；特别是在视频播放完后运行的 .gif（动画 .gif 与海报一起使用）？
【问题讨论】：
一个简单的方法：
<script>
var video = document.querySelector('video');
video.addEventListener('ended', function() {
video.load();
});
</script>
确实，在更改视频标签的 src 时，您会在其上隐式调用 load()。
此方法需要再次请求媒体 URL，并且根据缓存设置，它可能会重新下载完整长度的媒体资源，从而导致客户端不必要的网络/CPU 使用。
解决此问题的更合适的方法是在视频标签顶部使用叠加图像/div，并在视频开始时将其隐藏。当结束事件触发时，只需再次显示叠加图像。
【讨论】：
这就是我在视频播放完毕后看到海报的结果：
# Show poster at the end of the video
$('video').on('ended',->
$('video')[0].autoplay=false
$('video')[0].load()
)
【讨论】：
简而言之：您需要在自定义 JavaScript 中添加 video.addEventListener('ended',function() {}) 并触发 video.load()。
这是播放视频后重定向的相关帖子，您可以相应地修改它-Redirect html5 video after play。
参考资料以查找详细信息：
【讨论】：
试试这个
var video=$('#video_id').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
});
【讨论】：
video.load(); 相比，这对我来说效果更好。出于某种原因，load() 方法导致我的海报框在调用它后每隔几秒钟闪烁一次……虽然我喜欢 load() 的简单性，但这个解决方案并没有让我的海报框闪烁。不确定闪烁的海报框架是由于用户错误还是某种错误（或功能？）
最后我得到了解决方案：视频将首次自动播放，在视频结束时您会看到海报图片：
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
document.observe('dom:loaded', function(evt){
$('#myVideo').each(function(elm){
elm.play();
var wrapper = elm.wrap('span');
var vid = elm.clone(true);
elm.observe('ended', function(){
wrapper.update(vid);
});
});
});
</script>
<video id="myVideo" poster="1.png" >
<source src="1.mp4" type="video/mp4" />
</video>
【讨论】：
这对我有用。
var video=$('#video_id').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
video.pause();
});
【讨论】：
如果你想要一张海报，这是唯一的要求，那么我会说只需在视频文件中添加一个结束帧作为该海报，并跳过加载不必要的 JS。视频结束时，您将看到结束帧，即您添加的海报。
如果您想在最后显示视频海报，或者换句话说重新加载视频，请使用 EL Yusubov 上面显示的自定义事件
【讨论】：
我看到两种方法可以解决您的问题。
第一个将在视频结束后将当前帧设置为位置 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，只是为了确保。使用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>
【讨论】：
我有相同的目标，并通过使用 jQuery 将视频源重置为自身找到了解决方案。现在我得到了我在播放前后的动画 gif 海报。 这是一个简单的javascript播放函数和jQuery代码。
function play()
{
movie_ID.play();
$(document).ready(function(){
$("#movie_ID").bind("ended", function() {
$('#movie_ID').attr('src', 'movie_ID.src');
});
});
}
【讨论】：
通过在视频本身的末尾添加 1 个额外的帧（海报）来解决，因为网站不支持插入 javascripts
【讨论】：