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

Question

我想在比赛结束后播放视频海报.我正在尝试遵循代码,但没有运气.

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

Answer 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事件以显示视频标记并隐藏叠加层.触发结束事件时,只需隐藏视频标记并显示叠加图像.

Answer 2

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

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