【问题标题】:HTML 5 Video OnEnded Event not FiringHTML 5 Video OnEnded 事件未触发
【发布时间】:2010-05-28 00:03:39
【问题描述】:

我正在尝试对video 标签的 HTML 5 onended 事件做出反应,但没有成功。在下面的代码 sn-p 中,我添加了 mouseleave 事件以确保 jQuery 代码正确并且该事件确实激活了alert() 框。

视频播放正常,但我没有收到onended 事件(我的alert() 没有触发)。

在 Chrome 中测试,今天更新到版本 5.0.375.55。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
  $("#myVideoTag").bind('mouseleave onended', function(){
        alert("All done, function!");
  });
});

</script>
</head>
<body>
<video id="myVideoTag" width="640" height="360" poster="Fractal-zoom-1-04-Snowflake.jpg" controls>
    <source src="Fractal-zoom-1-04-Snowflake.mp4" type="video/mp4"></source>
    <source src="Fractal-zoom-1-04-Snowflake.ogg" type="video/ogg"></source>
</video>

<body>
<html>

【问题讨论】:

    标签: html html5-video jquery


    【解决方案1】:

    确保您绑定到ended 事件而不是onended,在与jQuery 绑定时始终保留on,例如您不能执行.on("onclick"),您可以执行@987654326 @。

    如果有帮助,这里有&lt;video&gt; 元素可用事件的完整列表:http://www.w3.org/2010/05/video/mediaevents.html

    【讨论】:

    • 还要记住,该事件不会在 Windows Phone Mobile 的 ie9 mobile 上触发。
    • 两年后,它仍然是一个草案规范Editor's Draft 26 June 2012
    • 3 年后实现:编辑草稿 2013 年 7 月 30 日
    • 四个。编辑草稿 2014 年 6 月 22 日
    • 2016 年报告。不再是草稿:P
    【解决方案2】:

    我也在寻找这个问题的答案。以下是 jQuery 移动框架对我有用的内容:

    $(document).ready(function(){
      $("#idname").bind('ended', function(){
      $.mobile.changePage($('#idofpageyouwantogoto'), 'fade');
      });
    });
    

    【讨论】: