Javascript HTML5 <video> 回调？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2954595/
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> callbacks?
提问by Andrew
I'm working on a site for a client and they're insistent on using HTML5's video tag as the delivery method for some of their video content. I currently have it up and running with a little help from http://videojs.com/to handle the Internet Explorer Flash fallback.
我正在为客户开发一个网站，他们坚持使用 HTML5 的视频标签作为其某些视频内容的交付方式。我目前在http://videojs.com/ 的帮助下启动并运行它来处理 Internet Explorer Flash 回退。
One thing they've asked me to do is, after the videos finish playing (they're all a different length), fade them out and then fade a picture in place of the video --- think of it like a poster frame after the video.
他们让我做的一件事是，在视频播放完后（它们的长度都不同），将它们淡出，然后用一张图片代替视频——把它想象成一个海报框架该视频。
Is this even possible? Can you get the timecode of a currently playing movie via Javascript or some other method? I know Flowplayer (http://flowplayer.org/demos/scripting/grow.html) has an onFinish function, is that the route I should take in lieu of the HTML5 video method? Does the fact that IE users will be getting a Flash player require two separate solutions?
这甚至可能吗？您可以通过 Javascript 或其他方法获取当前正在播放的电影的时间码吗？我知道 Flowplayer ( http://flowplayer.org/demos/scripting/grow.html) 有一个 onFinish 功能，这是我应该采用的路线来代替 HTML5 视频方法吗？IE 用户将获得 Flash 播放器这一事实是否需要两个单独的解决方案？
Any input would be greatly appreciated. I'm currently using jQuery on the site, so I'd like to keep the solution in that realm if at all possible. Thanks!
任何投入将不胜感激。我目前在网站上使用 jQuery，所以如果可能的话，我想将解决方案保留在该领域。谢谢！
回答by Nick Craver
You can view a complete list of events in the spec here.
For example:
例如：
$("video").bind("ended", function() {
alert("I'm done!");
});
You can bind to the event on the element like anything else in jQuery...as for your comment question, whatever element you're delivering for IE, yes, it would need a separate handler rigged up to whatever event it provides.
您可以像 jQuery 中的任何其他内容一样绑定到元素上的事件……至于您的评论问题，无论您为 IE 提供什么元素，是的，它都需要一个单独的处理程序来绑定它提供的任何事件。
For the other question about timecode, the timeupdateevent occurs when it's playing, and the durationchangeevent occurs when the overall duration changes. You can bind to and use them just like I showed with the endedevent above. With timeupdateyou'll probably want the currentTimeproperty, with durationchangeyou'll want the durationproperty, each of which you get directly off the DOM object, like this:
关于时间码的另一个问题，timeupdate事件在播放durationchange时发生，事件在整体持续时间发生变化时发生。您可以绑定并使用它们，就像我在ended上面的事件中展示的那样。随着timeupdate你可能会想的currentTime财产，有durationchange你想要的duration属性，每一个你直接关闭DOM对象，就像这样：
$("video").bind("durationchange", function() {
alert("Current duration is: " + this.duration);
});
回答by Eric J.
There is an OnEnded event associated with the video tag. However, it does not work for me in the current version of Google Chrome.
有一个与视频标签关联的 OnEnded 事件。但是，它在当前版本的 Google Chrome 中对我不起作用。
HTML 5 Video OnEnded Event not Firing
and see also
另见
Detect when an HTML5 video finishes
For a general-purpose solution (supports video tag with fallback see)
对于通用解决方案（支持带回退的视频标签，请参阅）
http://camendesign.com/code/video_for_everybodyor http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Libraryor http://www.mediafront.org/
http://camendesign.com/code/video_for_everybody或 http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library或http://www.mediafront.org/
回答by Novice Guy
I used this code. It basically reloads the video which will get the poster to show again. Assuming you want the image at the end to be the same as the poster. I only have one video on the page so using the video tag works. I have my video set to autoplay on page load so I added the pause after the reload.
我使用了这个代码。它基本上会重新加载视频，这将使海报再次显示。假设您希望最后的图像与海报相同。我在页面上只有一个视频，所以使用视频标签是有效的。我将视频设置为在页面加载时自动播放，因此我在重新加载后添加了暂停。
<script type="text/javascript">
var video= $('video')[0];
var videoJ= $('video');
videoJ.on('ended',function(){
video.load();
video.pause();
});
</script>
