如何在视频播放结束时显示 html5 视频海报？答案

【问题标题】：How to show html5 video poster end of video play?如何在视频播放结束时显示 html5 视频海报？
【发布时间】：2014-04-04 10:03:58
【问题描述】：

我想在播放后显示视频海报。我正在尝试以下代码，但没有运气。

var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
    this.posterImage.show();
});

【问题讨论】：

HTML5 Video / End of a Video Poster的可能重复

标签： javascript jquery html html5-video

【解决方案1】：

一种更直接的方法：

<script type="text/javascript">
var video= $('#cms_video').get(0);       
video.addEventListener('ended',function(){
    video.load();     
},false);
</script>

这是 loganphp 答案的快捷方式。实际上，当更改视频标签的 src 时，您会在其上隐式调用 load()。

此方法需要再次请求媒体 URL，并且根据缓存设置，它可能会重新下载完整长度的媒体资源，从而导致客户端不必要的网络/CPU 使用。但它仍然回答了 loganphp 提出的问题。

如果您想绕过此警告，您可以使用并覆盖图像/div 并在其上绑定 click/touchstart 事件以显示视频标签并隐藏覆盖。当结束事件触发时，只需隐藏视频标签并显示叠加图像。

【讨论】：

【解决方案2】：

最后我用下面的代码实现了我的目标

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

【讨论】：

试试看我的回答我觉得简单一点

【解决方案3】：

只需在视频的末尾，显示一个与海报相同的 src 的 div（具有较高的 z-index 或隐藏视频）如果需要回放视频，在显示的 div 上绑定一个点击事件（切换可见性和回放）

【讨论】：

【解决方案4】：

**视频开始自动播放并在视频结尾显示海报**

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<body>
<script type="text/javascript">
document.observe('dom:loaded', function(evt){
    $$('video').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>

【讨论】：

【解决方案5】：

试试这个

var video=$('#cms_video').get(0);        
  video.play();
  video.addEventListener('ended',function(){
   v=video.currentSrc;
   video.src='';
   video.src=v;   
   $('#cms_video')[0].autoplay=false
    $('#cms_video')[0].load()
});

【讨论】：

【解决方案6】：

尝试给你的海报一个id 或班级然后你可以这样做：

var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
    $('#poster').show();
    // ^ Use . here if you apply class instead of if for your poster 
});

【讨论】：

我不想申请任何课程。我想展示视频海报。视频海报意味着html视频播放器具有海报的属性名称，它在加载视频播放器和播放视频之前显示。现在我想在视频播放结束时显示此海报。
不能选择海报，因为它不是一个元素，而是视频标签的一个属性