如何显示html5视频海报结束视频播放
How to show html5 video poster end of video play?
我想在播放后展示视频海报。我正在尝试遵循代码,但没有运气。
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()。
此方法需要再次请求媒体 URL,并且根据缓存设置,它可能会重新下载完整长度的媒体资源,从而导致客户端不必要的网络/CPU 使用率。但它仍然以loganphp问它的方式回答了这个问题。
如果您想绕过此警告,您可以使用并覆盖图像/div,并在其上绑定单击/触摸启动事件以显示视频标签并隐藏叠加层。触发已结束事件后,只需隐藏视频标签并显示叠加图像即可。
这是我
找到的解决方案:
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
});
只需在视频末尾,显示一个与海报相同的div(带有较高的 z 索引或隐藏视频)如果需要重播视频,请在显示的div 上绑定点击事件(以切换可见性和重播)
**视频开始自动播放,海报显示在视频末尾**
<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>
试试这个
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()
});
尝试给你的海报一个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
});
相关文章:
- 视频HTML没有'无法在Internet Explorer 11上工作
- 如何在视频上显示海报图像使用Jquery结束
- 在iPad 2上播放一次后,视频海报消失
- 如何定位“隐藏”的 iframe?(应用程序:链接到嵌入“隐藏的海报图像”嵌入的 Youtube 视频的起始位置)
- 找不到视频src时的备用海报
- 海报图像在视频中不起作用,azure媒体播放器的1.5.0版本更新
- 在html5视频的开头和结尾放置不同的海报
- 显示海报图像或暂停按钮时,HTML5视频暂停
- video .js在视频开始前使用currentTime删除海报
- 在HTML5视频中动态使用第一帧作为海报
- HTML后视频海报显示
- VideoJS如何重置视频,显示海报和播放按钮
- 视频标签的问题.视频通话结束后,海报不可见
- HTML5视频播放器卡在海报上
- 视频海报图像不显示,除非点击移动
- 使用视频中的一帧作为videoJS中的预览海报
- Javascript停止并返回海报HTML 5视频
- 如何显示html5视频海报结束视频播放
- 没有海报属性的视频海报(移动浏览器)
- 返回多个视频海报照片