HTML5 <video> 回调函数？

Question

我为客户制作网站，他们坚持使用HTML5的视频标签作为其某些视频内容的传递方式。我已经成功地使用了http://videojs.com/进行设置，并处理了Internet Explorer中的Flash回退。

他们要求我做的一件事是，在视频播放完毕后（它们的长度都不同），将它们淡出并淡入一张图片代替视频 --- 就像视频之后的海报画面。

这是否可能？能否通过Javascript或其他方法获取当前正在播放电影的时间码？我知道Flowplayer (http://flowplayer.org/demos/scripting/grow.html)有一个onFinish函数，那么该如何在HTML5视频方法无法使用时采取这一方法？IE用户将获得Flash播放器是否需要两个单独的解决方案？

非常感谢任何意见。我目前在网站上使用jQuery，因此如果可能的话，我希望保持解决方案在这个领域内。谢谢！

- Andrew

Answer 1

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

例如：

$("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);
});

- Nick Craver

---

@Eric - 我这里有一个旧的测试页面，在Chrome上可以工作，我现在用的是6，但我制作它时在5上也可以工作，不确定其他浏览器...但它们只是普通事件，如果浏览器支持它们，这应该可以工作。 - Nick Craver

能否快速看一下我旧的（未回答的）帖子 https://dev59.com/YE7Sa4cB1Zd3GeqP0hMW ，并让我知道你是否发现了问题？ - Eric J.

@Eric - 如果没有媒体文件，我不能确定是否还有其他问题，但是在调用.bind()时，请从onended中删除on，它只是ended，例如onmouseover事件也是一样，只需使用mouseover。 - Nick Craver

Nick，感谢你的快速回答。整个网站只有几个视频，它们都会表现得类似，但是在Firefox、Safari和Chrome中进行了快速测试后，都取得了成功。由于Flowplayer正在为IE提供服务，我将使用内置的onFinish函数以保持一致性。你太棒了！ - Andrew

Answer 2

视频标签有一个OnEnded事件。然而，在当前版本的Google Chrome中，它对我无效。

HTML 5视频OnEnded事件未触发

另请参见

检测HTML5视频何时完成

对于通用解决方案（支持具有回退的视频标签，请参见）

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

- Eric J.

---

这确实很有帮助，但对于使用IE的用户，是否需要单独的解决方案？在我的情况下，他们将收到Flash播放器而不是本机视频。 - Andrew

@Andrew：提供了三种使用video标签的解决方案，但也提供了回退选项以使用Flash视频。 - Eric J.

Answer 3

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

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

- Novice Guy