HTML5视频/视频海报的结尾

与上述；在HTML5

标签中，我可以添加海报；在“播放”实际视频之前，播放/运行图像或动画.gif

---

现在，如何添加图像；特别是一个.gif（动画.gif与海报一起使用）将在视频播放完毕后运行？

简而言之：您需要在自定义JavaScript中添加

video.addEventListener（'end'，function（）{}）

和触发器

video.load（）

这里有一个相关的帖子，在视频播放后重定向，你可以相应地修改它-

参考查找详细信息：

---

我也有同样的目标，并通过使用jQuery在结束时将视频源重置为自身找到了解决方案。现在，我得到我的动画gif海报前后发挥。 下面是一个简单的javascript播放函数和jQuery代码

<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">

试试这个

function play()
    {
    movie_ID.play(); 

    $(document).ready(function(){
         $("#movie_ID").bind("ended", function() {
        $('#movie_ID').attr('src', 'movie_ID.src');
            });
         });   
     }  

---

一种简单的方法：

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v;            
});  

var video=document.querySelector（'video'）；
video.addEventListener（'end'，function（）{
video.load（）；
});

实际上，在更改视频标记的src时，您会隐式地对其调用load（）

此方法有再次请求媒体URL的警告，根据缓存设置，它可能会重新下载全长媒体资源，从而导致客户端不必要的网络/CPU使用

---

解决此问题的一个更合适的方法是在视频标签顶部使用覆盖图像/div，并在视频开始时将其隐藏。当结束事件激发时，只需再次显示覆盖图像

这就是我在视频播放结束后看到海报时所做的：

<script>
var video = document.querySelector('video');       
video.addEventListener('ended', function() {
  video.load();     
});
</script>

---

解决方法是在视频本身的末尾添加一个额外的帧（海报），因为网站不支持插入javascripts。最后，我得到了解决方案：视频将首次自动播放，在视频的末尾，您将看到海报图像：

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)

document.observe（'dom:loaded'，函数（evt）{
$（'#myVideo'）。每个（函数（elm）{
elm.play（）；
var wrapper=elm.wrapp（'span'）；
var vid=elm.clone（真）；
elm.observe（'end'，function（）{
包装器更新（vid）；
});
});
});

这对我很有用

<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>

---

如果你想要一张海报在结尾，这是唯一的要求，那么我会说只要在视频文件中添加一个结尾帧作为海报，然后跳过加载不必要的JS。当视频结束时，您将看到结束帧，它现在是您添加的海报

---

如果您想在结尾显示视频海报，或者换言之，重新加载视频，请使用EL Yusubov所示的自定义事件。我有两种方法可以解决您的问题

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

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v; 
    video.pause();          
}); 

---

你能解释一下“做”的部分吗？是的，我同意。这并没有真正回答这个问题。。在结束事件的函数的花括号内，您可以使用js或jQuery将视频交换为与视频大小和css样式相同的图像。。。怎样？您可以将视频的src属性更改为图像。。或者只是删除视频并添加一个图像…这是正确的答案（Arnaud更详细地解释了为什么这不是很好，但这段代码更清晰，并且禁用了自动播放），很遗憾HTML5规范本机不支持此功能。上面将在safari中添加flickr黑色图像。如何实现此解决方案？如果没有jQuery:var videoElement=document.getElementById（'video-id'）；videoElement.addEventListener（'ended'，函数（）{videoElement.autoplay=false videoElement.load（）}，false）；感谢phil Collins我很高兴与大家分享这个想法这几乎是一个简单的javascript解决方案，这正是我想要的。我用getElementById（）替换了第一行，并添加了video.autoplay=false以防止循环。这对我来说更有效，而不仅仅是

video.load（）。由于某种原因，
load（）
方法导致我的海报框在调用后每隔几秒钟就会闪烁一次……虽然我喜欢
load（）
的简单性，但此解决方案并没有使我的海报框闪烁。不确定闪烁的海报框是否是由于用户错误或某种错误（或功能？）
<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 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>