HTML5视频/视频海报结束

Question

<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">

有了以上; 在HTML5 <video>标签中,我可以添加一张海报; 一个图像或动画.gif就好了,播放/运行实际视频"播放"之前.

现在,我该如何添加图像; 特别是.gif(动画.gif适用于海报)将在视频播放后运行？

Answer 1

一种直截了当的方式:

<script>
var video = document.querySelector('video');       
video.addEventListener('ended', function() {
  video.load();     
});
</script>

实际上,当更改视频标记的src时,您隐式地在其上调用load().

此方法需要再次请求媒体URL,并且根据缓存设置,它可能会重新下载全长媒体资源,从而导致客户端不必要的网络/ CPU使用.

解决此问题的更合适的方法是在视频标记的顶部使用叠加图像/ div,并在视频启动时隐藏它.当结束事件触发时,再次显示叠加图像.

Answer 2

这是我在视频播放结束后看到海报时最终做的事情:

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)

Answer 3

简而言之：您需要的是添加 video.addEventListener('ended',function() {})和触发video.load()在您的自定义 JavaScript 中。

这是播放视频后重定向的相关帖子，您可以相应地对其进行修改 -播放后重定向 html5 视频。

查找详细信息的参考资料：

• 您需要了解的有关 HTML5 视频和音频的所有信息
• 您可以绑定的媒体事件
• HTML5 视频事件和 API
• MSDN - 使用 HTML5 视频事件

Answer 4

尝试这个

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