在html5视频末尾执行功能答案

【问题标题】：Executing function at end of html5 video在html5视频末尾执行功能
【发布时间】：2013-01-09 04:06:07
【问题描述】：

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

$(document).ready(function(){

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

        alert('video ended');

    });

});

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

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

【问题讨论】：

.on 在 jquery 1.7 版中添加。 .live 在 1.7 中被弃用
@ryadavilli 是的，但据我所知 live() 在 1.7 中仍然有效，不是吗？
是的，它应该被弃用，直到 1.9 才被删除。我的评论是建议您仍然可以使用 .on。因为它是在 1.7 中添加的。
谢谢！在这里有一个愚蠢的时刻。

标签： jquery html html5-video

【解决方案1】：

为了您的粘贴和复制乐趣，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 替换为您的视频的正确选择器。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

使用onended事件

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

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

【讨论】：

看起来不错。我没有提到的是视频在页面加载后加载到 dom 中，因此我使用 live('end')。由于这个原因，我不确定我是否可以使用您的功能。

【解决方案4】：

您可以尝试以下方法：

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

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

这是.on() 的文档。
这是dynamic items 的 SO 问题。

我希望这会有所帮助！

【讨论】：

【解决方案5】：

我让它工作的唯一方法是下面的代码：

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

【讨论】：

【解决方案6】：

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

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

$(document).ready(function(){

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

    alert('video ended');

});

});

【讨论】：