Question

我有一个HTML视频，我希望在视频结束时运行一个功能。我尝试过以下但我什么都没得到：

$(document).ready(function(){

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

        alert('video ended');

    });

});

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

注意：我正在使用live（）函数而不是on（），因为需要使用这个项目的jQuery 1.7。

Answer 1

对于你的粘贴＆amp;复制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' - 部分替换为正确的视频选择器。

编辑：这是没有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' - 部分替换为正确的视频选择器。

Answer 2

<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>

Answer 3

使用 onended 事件

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

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

详细了解Everything you need to know about HTML5 video and audio

Answer 4

您可以尝试以下方法：

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

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

以下是.on()的文档以下是dynamic items的问题。

我希望这有帮助！

Answer 5

我管理它的唯一方法是使用以下代码：

$('video')[0].on('ended',function(){
    console.log('Video has ended!');
});

Answer 6

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

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

$(document).ready(function(){

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

    alert('video ended');

});

}）;

在html5视频结束时执行功能

6 个答案: