如何在视频播放结束时显示 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();
});
6 个解决方案
解决方案1
14 2014-04-10 06:20:14
A more straightforward way of doing this:一种更直接的方法：
<script type="text/javascript">
var video= $('#cms_video').get(0);
video.addEventListener('ended',function(){
video.load();
},false);
</script>
Which is a shortcut to loganphp answer.这是 loganphp 答案的快捷方式。 Indeed when changing the src of a video tag you implicitly call a load() on it.实际上，在更改视频标签的 src 时，您会在其上隐式调用 load()。
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.此方法有一个警告，即再次请求媒体 URL，并且根据缓存设置，它可能会重新下载全长媒体资源，从而导致客户端不必要的网络/CPU 使用。 But still it does answer the question the way loganphp asked it.但它仍然以 loganphp 的方式回答了这个问题。
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.如果您想绕过这个警告，您可以使用并覆盖图像/div 并在其上绑定一个 click/touchstart 事件以显示视频标签并隐藏覆盖层。 When the ended event has fired just hide the video tag and show the overlay image.当结束事件触发时，只需隐藏视频标签并显示叠加图像。
解决方案2
6 已采纳 2014-04-04 11:14:33
Finally I achieved my goal with following code最后我用以下代码实现了我的目标
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
});
解决方案3
0 2014-04-04 13:56:07
只需在视频的末尾，显示一个与海报 src 相同的 div（使用上 z-index 或隐藏视频）如果您需要重播视频，请在显示的 div 上绑定一个点击事件（以切换可见性和重播)
解决方案4
0 2017-05-31 09:10:01
**video start autoplay and Poster showing at end of video ** **视频开始自动播放并在视频结束时显示海报**
<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>
解决方案5
0 2020-07-13 17:56:17
TRY THIS尝试这个
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()
});
解决方案6
-1 2014-04-04 10:07:37
Try to give your poster an id or class then you can do:尝试给你的海报一个id或 class 然后你可以这样做：
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
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.