如何显示html5视频海报结束视频播放？ [英] How to show html5 video poster end of video play?

问题描述

我想在比赛结束后播放视频海报。我正在尝试使用代码，但没有运气。

I want to show video poster after play. I am trying following code but no luck.

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

推荐答案

更简单的方法：

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

这是loganphp回答的快捷方式。实际上，在更改视频标记的src时，您隐式调用它上面的load（）。

Which is a shortcut to loganphp answer. Indeed when changing the src of a video tag you implicitly call a load() on it.

此方法需要再次请求媒体URL，具体取决于缓存设置它可能会重新下载全长媒体资源，从而导致客户端不必要的网络/ CPU使用。但它仍然以loganphp提出的方式回答了这个问题。

This method has the caveat to request the media URL again and depending on caching settings it may re-download the full-length media resource causing unnecessary network/CPU usage for the client. But still it does answer the question the way loganphp asked it.

如果你想绕过这个警告，你可以使用和叠加image / div并在其上绑定一个click / touchstart事件来显示视频标签并隐藏叠加层。触发结束事件时，只需隐藏视频标记并显示叠加图像。

If you want to bypass this caveat you can use and overlay image/div and bind a click/touchstart event on it to show the video tag and hide the overlay. When the ended event has fired just hide the video tag and show the overlay image.

这篇关于如何显示html5视频海报结束视频播放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！