Html HTML5 视频 / 视频海报结尾
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14245644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video / End of a Video Poster
提问by doc holiday
<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">
With the above; within the HTML5 <video>tag, I can add a poster; of an image or animated .gif just fine and plays / runs before the actual video is 'played'.
与上述; 在 HTML5<video>标签中，我可以添加海报；图像或动画 .gif 就好了，并在“播放”实际视频之前播放/运行。
NOW, how can I add an image; specifically a .gif (animated .gif works with poster) that will run AFTER the video has played through?
现在，我如何添加图像；特别是将在视频播放完后运行的 .gif（动画 .gif 与海报一起使用）？
采纳答案by Yusubov
In short:what you need is to add video.addEventListener('ended',function() {})and trigger video.load()in your custom JavaScript.
简而言之：您需要的是在您的自定义 JavaScript 中添加 video.addEventListener('ended',function() {})和触发video.load()。
Here is a related post that redirects after video is played, you may modify it accordingly - Redirect html5 video after play.
这是播放视频后重定向的相关帖子，您可以相应地对其进行修改 -播放后重定向 html5 视频。
Referencesto look for detailed information:
查找详细信息的参考资料：
回答by Arnaud Leyder
A straightforward way of doing this:
一个简单的方法：
<script>
var video = document.querySelector('video');
video.addEventListener('ended', function() {
video.load();
});
</script>
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 使用。
A more appropriate way to solve this issue is to use an overlay image/div on top the video tag and to hide it when video starts. When the ended event fires just show the overlay image again.
解决此问题的更合适的方法是在视频标签顶部使用叠加图像/div，并在视频开始时将其隐藏。当结束事件触发时，只需再次显示叠加图像。
回答by Hackeron
This is what I ended up doing to see a poster after the video finished playing:
这就是我在视频播放完毕后看到海报时所做的事情：
# Show poster at the end of the video
$('video').on('ended',->
$('video')[0].autoplay=false
$('video')[0].load()
)
回答by Logan
try this
尝试这个
var video=$('#video_id').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
});
回答by Niraj patel
Finally I got the solution: video will autoplay first-time and at end of video you will see the poster image:
最后我得到了解决方案：视频将首次自动播放，在视频结束时您将看到海报图像：
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
document.observe('dom:loaded', function(evt){
$('#myVideo').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>
回答by Viktor Kocev
This works for me.
这对我有用。
var video=$('#video_id').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
video.pause();
});
回答by sunnyuff
If you want a poster at the end, and thats the only requirement, then i would say just add a ending frame in the video file as that poster and skip loading unnecessary JS. When the video ends you will see the end frame which is now the poster you added.
如果你想要最后一张海报，这是唯一的要求，那么我会说只需在视频文件中添加一个结束帧作为海报并跳过加载不必要的 JS。视频结束后，您将看到结束帧，即现在添加的海报。
If you want to display the video poster at the end or in other words reload the video, then use custom event as shown above by EL Yusubov
如果您想在最后显示视频海报，或者换句话说，重新加载视频，请使用 EL Yusubov 如上所示的自定义事件
回答by weshen
I had the same objective, and found a solution by using jQuery to reset the source of the video to itself on ended. Now I get my animated gif poster before and after play. Here is a simple javascript play function and the jQuery code.
我有同样的目标，并通过使用 jQuery 在结束时将视频源重置为自身找到了解决方案。现在我在玩之前和之后都会得到我的动画 gif 海报。这是一个简单的 javascript 播放函数和 jQuery 代码。
function play()
{
movie_ID.play();
$(document).ready(function(){
$("#movie_ID").bind("ended", function() {
$('#movie_ID').attr('src', 'movie_ID.src');
});
});
}
回答by player0
solved by adding 1 extra frame (poster) at the end of the video itself, because website didnt support inserting of javascripts
通过在视频本身的末尾添加 1 个额外的帧（海报）来解决，因为网站不支持插入 javascripts
