HTML5< video>回调？ [英] HTML5 <video> callbacks?

问题描述

我正在为客户开发网站，他们坚持使用HTML5的视频标签作为其部分视频内容的投放方式。我现在已经开始使用它，并且从 http://videojs.com/ 获得一些帮助来处理Internet Explorer Flash他们要求我做的一件事是，在视频播放结束后（它们都是不同的长度），将它们淡出然后淡入淡出。

图片代替视频---想象它就像视频后的海报框架。

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

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

解决方案

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

例如：

  $（video）。bind （已结束，function（）{
 alert（我已经完成！）; 
}）; 
  

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

关于时间码的其他问题，播放时发生 timeupdate 事件，并且整个持续时间发生变化时发生 durationchange 事件。您可以绑定并使用它们，就像我在上面显示结束事件一样。使用 timeupdate ，您可能需要 currentTime 属性，并且 durationchange 持续时间属性，每个属性都直接离开DOM对象，如下所示：

< pre $ $（video）。bind（durationchange，function（）{
alert（Current duration is：+ this.duration）;
}）;


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.

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?

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!

解决方案

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.

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&lt; video&gt;回调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！