34

我有一个 html 视频，我想在视频结束时运行一个函数。我尝试了以下方法，但我什么也没得到：

$(document).ready(function(){

    $('video').live('ended',function(){

        alert('video ended');

    });

});

任何想法为什么这不会在视频结束时触发？还是我没有提供足够的信息来回答这里的任何问题？

注意：我使用 live() 函数而不是 on() 因为这个项目需要 jQuery 1.7。

4

6 回答 6

69

为了您的粘贴和复制乐趣，jQuery 解决方案：

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>/*<![CDATA[*/
  $(document).ready(function(){
    $('video').on('ended',function(){
      console.log('Video has ended!');
    });
  });
/*]]>*/</script>

将'video'-part 替换为视频的正确选择器。

编辑：这是没有 jQuery 的解决方案：

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script>/*<![CDATA[*/
  document.querySelector('video').addEventListener('ended',function(){
    console.log('Video has ended!');
  }, false);
/*]]>*/</script>

将'video'-part 替换为视频的正确选择器。

于 2014-07-10T10:32:57.887 回答
14 
<html>
<head>
    <title></title>

    <script>
function videoEnded() {
    alert('video ended');
}


    </script>
</head>
<body>

<video src="video/endscene.mp4" id="video" controls onended="videoEnded()">
    video not supported
</video>
</body>
</html>
于 2013-05-25T23:01:53.877 回答
6

使用结束事件

var video = document.getElementsByTagName('video')[0];

video.onended = function(e) {
  alert('video ended');
}

阅读更多关于 HTML5 视频和音频你需要知道的一切

于 2013-01-25T08:02:39.947 回答
5

我管理它工作的唯一方法是以下代码：

$('video')[0].on('ended',function(){
    console.log('Video has ended!');
});
于 2016-10-31T08:07:21.037 回答
5

您可以尝试以下方法：

$(document).on('ended', 'video', function (e) {
    alert('video ended');
});

您说视频是在加载 DOM后动态插入的。在此脚本中，您在 DOM 上搜索video元素并将其与ended函数绑定。

这是.on()的文档。
这是动态项目的 SO 问题。

我希望这有帮助！

于 2016-03-10T14:02:34.710 回答
2

你可以在现场使用。因为 jquery 新版本支持 on 方法，而新版本不推荐使用 live 方法。

您可以将代码替换为此，您的问题将得到解决。

$(document).ready(function(){

$('video').on('ended',function(){

    alert('video ended');

});

});

于 2016-09-22T07:24:22.243 回答