jquery 如何显示html5视频海报结束视频播放?

0qx6xfy6  于 2023-08-04  发布在  jQuery
关注(0)|答案(6)|浏览(131)

我想在比赛结束后展示视频海报。我试着跟踪代码,但没有运气。

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

字符串

ct3nt3jp

ct3nt3jp1#

一个更简单的方法来做到这一点:

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

字符串
这是一个快捷的loganphp答案。实际上,当改变一个video标签的src时,你会隐式地调用它的load()。
此方法有一个警告,即再次请求媒体URL,并且根据缓存设置,它可能会重新下载完整长度的媒体资源,从而导致客户端不必要的网络/CPU使用。但它仍然回答了loganphp提出的问题。
如果你想绕过这个警告,你可以使用和覆盖image/div,并在上面绑定一个click/touchstart事件来显示视频标签并隐藏覆盖。当结束事件被触发时,只需要隐藏视频标签并显示覆盖图像。

gmxoilav

gmxoilav2#

以下是我找到的解决方案:

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

字符串

uqdfh47h

uqdfh47h3#

只需在视频的末尾显示一个与海报相同src的div(使用较高的z索引或隐藏视频)如果您需要重播视频,请在显示的div上绑定一个click事件(以切换可见性和重播)

ct2axkht

ct2axkht4#

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

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

字符串

lyr7nygr

lyr7nygr5#

试试这个

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

字符串

idv4meu8

idv4meu86#

尝试给予你的海报一个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 
});

字符串

相关问题