HTML5视频/视频海报的结尾

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (39)
<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">

在HTML5 <video>标签中,我可以添加poster; 一个图像或动画.gif就好了,在播放实际视频之前播放/播放。

现在,我如何添加图像,特别是一个.gif(动画.gif与海报一起工作),将在视频播放完毕后运行?

提问于
用户回答回答于

一个更直接的方式(使用jQuery):

<script type="text/javascript">
var video= $('#myvideo')[0]; 
var videoJ= $('#myvideo');        
videoJ.on('ended',function(){
    video.load();     
});
</script>

事实上,当改变视频标签的src时,会隐式地调用一个load()。

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

解决此问题的更合适的方法是使用和覆盖图像/ div并绑定点击/触摸启动事件以显示视频标记并隐藏覆盖图。当结束事件触发时,只需隐藏视频标签并显示叠加图像。

用户回答回答于

简而言之,需要的是video.addEventListener('ended',function() {})在自定义JavaScript中添加 并执行此操作。

扫码关注云+社区

领取腾讯云代金券