HTML5 <video> 回调？答案

【问题标题】：HTML5 <video> callbacks?HTML5 <video> 回调？
【发布时间】：2011-02-26 15:07:22
【问题描述】：

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

他们要求我做的一件事是，在视频播放完毕后（它们的长度都不同），淡出它们，然后淡出图片代替视频 --- 把它想象成视频后的海报框架。

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

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

【问题讨论】：

标签： javascript jquery video html html5-video

【解决方案1】：

You can view a complete list of events in the spec here。

例如：

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

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

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

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

【讨论】：

@Eric - 我在这里有一个旧的测试页面，在 chrome 中工作，我在 6，但是当我成功时，这在 5 中起作用），不确定其他哪些......他们是不过，这只是正常的事件，如果浏览器支持它们，这应该可以工作。
您能否快速查看我的旧（未答复）帖子stackoverflow.com/questions/2925851/…，如果您发现问题，请告诉我？
@Eric - 如果还有其他问题，我不能确定没有媒体文件，但请从onended 中删除on，当你打电话给@ 时，它只是ended 987654335@，和onmouseover事件一样，比如mouseover。
尼克，感谢您的快速回答。整个网站只有几个视频，所有视频的行为都相似，但对此的快速测试表明在 Firefox、Safari 和 Chrome 中取得了成功。由于 Flowplayer 服务于 IE，我将使用内置的 onFinish 函数来保持一致性。你摇滚！

【解决方案2】：

有一个与视频标签关联的 OnEnded 事件。但是，它不适用于当前版本的 Google Chrome。

HTML 5 Video OnEnded Event not Firing

另见

Detect when an HTML5 video finishes

对于通用解决方案（支持带有后备的视频标签，请参阅）

http://camendesign.com/code/video_for_everybody 要么 http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library 或 http://www.mediafront.org/

【讨论】：

这绝对有帮助，但是对于在我的情况下交付的是 Flash 播放器而不是原生视频的 IE 用户，是否需要单独的解决方案？
@Andrew：提出了三个使用视频标签但也提供使用 Flash 视频的后备解决方案。

【解决方案3】：

我使用了这个代码。它基本上会重新加载视频，这将使海报再次显示。假设您希望最后的图像与海报相同。我的页面上只有一个视频，因此使用视频标签有效。我将视频设置为在页面加载时自动播放，所以我在重新加载后添加了暂停。

<script type="text/javascript">
    var video= $('video')[0]; 
    var videoJ= $('video');        
    videoJ.on('ended',function(){
        video.load();     
        video.pause();
    });
</script>

【讨论】：