HTML5 <视频>回调? [英] HTML5 <video> callbacks?

问题描述

我正在为客户开发一个网站，他们坚持使用 HTML5 的视频标签作为其某些视频内容的交付方式.我目前在 http://videojs.com/ 的帮助下启动并运行它来处理 Internet Explorer Flash回退.

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.

他们让我做的一件事是，在视频播放完后(它们的长度都不同)，将它们淡出，然后淡出一张图片来代替视频——把它想象成视频后的海报框.

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.

这甚至可能吗?您能否通过 Javascript 或其他方法获取当前正在播放的电影的时间码?我知道 Flowplayer (http://flowplayer.org/demos/scripting/grow.html) 有一个 onFinish 函数，这是我应该采用的路线来代替 HTML5 视频方法吗?IE 用户将获得 Flash 播放器这一事实是否需要两个单独的解决方案?

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?

任何输入将不胜感激.我目前在网站上使用 jQuery，所以如果可能的话，我想将解决方案保留在该领域.谢谢！

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!

推荐答案

您可以在此处查看规范中的完整事件列表.

例如:

$("video").bind("ended", function() {
   alert("I'm done!");
});

您可以像 jQuery 中的任何其他内容一样绑定到元素上的事件...至于您的评论问题，无论您为 IE 提供什么元素，是的，它需要一个单独的处理程序来绑定它提供的任何事件.

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.

另一个关于时间码的问题，timeupdate事件在播放时发生，durationchange事件发生在整体持续时间改变时.您可以绑定并使用它们，就像我在上面的 ended 事件中展示的那样.使用 timeupdate 您可能需要 currentTime 属性，使用 durationchange 您需要 duration 属性，每个其中您直接从 DOM 对象中获取，如下所示:

For the other question about timecode, the timeupdate event occurs when it's playing, and the durationchange event occurs when the overall duration changes. You can bind to and use them just like I showed with the ended event above. With timeupdate you'll probably want the currentTime property, with durationchange you'll want the duration property, each of which you get directly off the DOM object, like this:

$("video").bind("durationchange", function() {
   alert("Current duration is: " + this.duration);
});

这篇关于HTML5 <视频>回调?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！