HTML5<视频>回调？

发布于 2024-09-04 14:22:02 字数 584 浏览 4 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泪是无色的血 2024-09-11 14:22:02

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

例如：

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

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

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

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

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);
});

回复收藏 0 原文

糖果控 2024-09-11 14:22:02

有一个与视频标签关联的 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/

回复收藏 0 原文

左岸枫 2024-09-11 14:22:02

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

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

I used this code. It basically reloads the video which will get the poster to show again. Assuming you want the image at the end to be the same as the poster. I only have one video on the page so using the video tag works. I have my video set to autoplay on page load so I added the pause after the reload.

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

回复收藏 0 原文

~没有更多了~