34

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

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

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

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

4

3 回答 3

71

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

例如：

$("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);
});
于 2010-06-02T02:25:26.030 回答
3

有一个与视频标签关联的 OnEnded 事件。但是，它在当前版本的 Google Chrome 中对我不起作用。

HTML 5 Video OnEnded 事件未触发

也可以看看

检测 HTML5 视频何时结束

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

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

于 2010-06-02T02:21:22.183 回答
1

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

<script type="text/javascript">
    var video= $('video')[0]; 
    var videoJ= $('video');        
    videoJ.on('ended',function(){
        video.load();     
        video.pause();
    });
</script>
于 2015-04-10T13:28:44.703 回答