javascript HTML5 视频嵌入在播放结束时返回海报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21540959/
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 Embed Return to Poster at End of Play
提问by Thesis
I was using Video.JS but ultimately had to scrap it and go with plain HTML video embed tag. Can someone help me with the JavaScript that will return the to start poster when the video stops playing. I had it working in Video.JS but can't find the right code for standard HTML.
我正在使用 Video.JS，但最终不得不放弃它并使用纯 HTML 视频嵌入标签。有人可以帮助我使用 JavaScript，它会在视频停止播放时返回起始海报。我让它在 Video.JS 中工作，但找不到标准 HTML 的正确代码。
Here's the current code and I cleared out the JavaScript since it wasn't working anyway.
这是当前代码，我清除了 JavaScript，因为它无论如何都不起作用。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="testimonials" width="448" height="336" controls preload="auto" poster="https://dl.dropboxusercontent.com/u/236154657/video-splash-image4.png"
data-setup='{"example_option":true}'>
<source src="https://dl.dropboxusercontent.com/u/236154657/WK%20Life%20Coaching%20Video%2012.13.mp4" type='video/mp4'>
</video>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
</body>
</html>
回答by Offbeatmammal
The easiest way I have been able to find is to reset the source of the video on the endedevent so that it returns to the beginning. The other way to handle it would be to have a div with the poster image in that you swap out for the video, but this is simpler...
我能找到的最简单的方法是重置ended事件的视频源，以便它返回到开头。处理它的另一种方法是使用带有海报图像的 div 来替换视频，但这更简单......
<script>
var vid=document.getElementById('testimonials');
vid.addEventListener("ended", resetVideo, false);
function resetVideo() {
// resets the video element by resetting the source
this.src = this.src
}
</script>
回答by Phlip
A f'up to my above comment: The onendedevent fires only after the video player has expended its content, and gone to black. So between the end of video and the poster, we see a black flicker.
对我上述评论的补充：该onended事件仅在视频播放器用完其内容并变黑后才会触发。所以在视频的结尾和海报之间，我们看到了一个黑色的闪烁。
To prevent the flicker, I simply ran the video to near its end, then called .load()to park the player back onto the poster:
为了防止闪烁，我只是将视频播放到接近尾声，然后调用.load()将播放器停回到海报上：
<video ontimeupdate="video_time_update(this)"
poster="/ourMovie.png">
<source src="/ourMovie.mp4" type="video/mp4">
</video>
...
...
function video_time_update(video) {
if (video.currentTime > 3.3) {
video.load(); /* parks the video back to its poster */
}
}
Note that we know our video is 3.4 seconds long, AND we don't mind missing the last few frames. video_time_update()is lazy, and does not call for every tick.
请注意，我们知道我们的视频长 3.4 秒，而且我们不介意错过最后几帧。video_time_update()是懒惰的，并且不会调用每个滴答声。
And note that those of you serving videos of unknown duration might need this.durationinstead of 3.3, there.
请注意，那些提供未知持续时间的视频的人可能需要this.duration而不是 3.3，那里。
回答by Datorproblem
Below its working 100%
低于其工作 100%
<script type="text/javascript">
function skip(value) {
var video = document.getElementById("Video1");
video.addEventListener("ended", resetVideo, false);
video.currentTime = 0;
video.currentTime += value;
video.play();
function resetVideo() {
video.load();
}
}
</script>
回答by Jatin
Please go through the link below with realated infor: Redirect html5 video after play
请通过以下链接查看相关信息： 播放后重定向 html5 视频
<script src="text/javascript">
// Do not name the function "play()"
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Hope this helps.
希望这可以帮助。
