我想在比赛结束后展示视频海报。我试着跟踪代码,但没有运气。
var video=$('#cms_video').get(0); video.play(); video.addEventListener('ended',function(){ this.posterImage.show(); });
字符串
ct3nt3jp1#
一个更简单的方法来做到这一点:
<script type="text/javascript"> var video= $('#cms_video').get(0); video.addEventListener('ended',function(){ video.load(); },false); </script>
字符串这是一个快捷的loganphp答案。实际上,当改变一个video标签的src时,你会隐式地调用它的load()。此方法有一个警告,即再次请求媒体URL,并且根据缓存设置,它可能会重新下载完整长度的媒体资源,从而导致客户端不必要的网络/CPU使用。但它仍然回答了loganphp提出的问题。如果你想绕过这个警告,你可以使用和覆盖image/div,并在上面绑定一个click/touchstart事件来显示视频标签并隐藏覆盖。当结束事件被触发时,只需要隐藏视频标签并显示覆盖图像。
gmxoilav2#
以下是我找到的解决方案:
var video=$('#cms_video').get(0); video.play(); video.addEventListener('ended',function(){ v=video.currentSrc; video.src=''; video.src=v; });
uqdfh47h3#
只需在视频的末尾显示一个与海报相同src的div(使用较高的z索引或隐藏视频)如果您需要重播视频,请在显示的div上绑定一个click事件(以切换可见性和重播)
ct2axkht4#
视频开始自动播放,视频结束时显示海报
<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>
lyr7nygr5#
试试这个
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() });
idv4meu86#
尝试给予你的海报一个id或类,然后你可以这样做:
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 });
6条答案
按热度按时间ct3nt3jp1#
一个更简单的方法来做到这一点:
字符串
这是一个快捷的loganphp答案。实际上,当改变一个video标签的src时,你会隐式地调用它的load()。
此方法有一个警告,即再次请求媒体URL,并且根据缓存设置,它可能会重新下载完整长度的媒体资源,从而导致客户端不必要的网络/CPU使用。但它仍然回答了loganphp提出的问题。
如果你想绕过这个警告,你可以使用和覆盖image/div,并在上面绑定一个click/touchstart事件来显示视频标签并隐藏覆盖。当结束事件被触发时,只需要隐藏视频标签并显示覆盖图像。
gmxoilav2#
以下是我找到的解决方案:
字符串
uqdfh47h3#
只需在视频的末尾显示一个与海报相同src的div(使用较高的z索引或隐藏视频)如果您需要重播视频,请在显示的div上绑定一个click事件(以切换可见性和重播)
ct2axkht4#
视频开始自动播放,视频结束时显示海报
字符串
lyr7nygr5#
试试这个
字符串
idv4meu86#
尝试给予你的海报一个
id
或类,然后你可以这样做:字符串