logo标签列表

如何在HTML5视频播放结束后显示海报？

javascriptjqueryhtmlhtml5-video
6
我想在播放后显示视频海报。我尝试了以下代码，但没有成功。
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
    this.posterImage.show();
});
2
可能是HTML5视频/视频海报的结束的重复问题。 - Lajos Mészáros
6个回答
15

一种更为简单直接的方法：

<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事件来显示视频标签并隐藏覆盖层。当ended事件触发后，只需隐藏视频标签并显示覆盖图像即可。

7

这是我找到的解决方案：

var video=$('#cms_video').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v;            
});
尝试查看我的答案，我认为它会更简单一些。 - Arnaud Leyder
0
在视频结束时，简单地显示一个带有与海报相同的src的div（使用较高的z-index或隐藏视频）。如果需要重新播放视频，请在显示的div上绑定一个点击事件（以切换可见性并重新播放）。
0

试一下

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()
});
0

**视频开始自动播放，视频结束时显示海报**

<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>
-2
尝试给你的海报添加一个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 
});
2
我不想应用任何类。我想展示视频海报。视频海报意味着HTML视频播放器具有名称为poster的属性，它在加载视频播放器和视频播放之前显示。现在我想在视频播放结束时显示这个海报。 - Logan
<video width="1024" height="576" poster="http://example.com/a.png" controls="controls" preload="auto" id="cms_video"> <source type="video/mp4" src="http://example.com/a.mp4"></source> 未设置Flash播放器。<a href="/pinkwater/branches/staging/admin/config/media/video/players">请选择一个播放Flash视频的播放器。</a></video> - Logan
海报无法被选择，因为它不是元素，而是视频标签的属性。 - Lajos Mészáros
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接