检测 HTML5 视频何时结束答案

【问题标题】：Detect when an HTML5 video finishes检测 HTML5 视频何时结束
【发布时间】：2011-02-14 01:13:42
【问题描述】：

如何检测 HTML5 <video> 元素何时播放完毕？

【问题讨论】：

非常有用的文档以及来自 Apple 的测试页面：developer.apple.com/library/safari/#samplecode/… 关于 HTML5 视频事件您想知道的所有内容！

【解决方案1】：

你可以添加一个事件监听器，第一个参数是 'ended'

像这样：

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>

【讨论】：

这是唯一适用于整个互联网的视频。“on end”事件。太棒了！
为什么要检查e是否存在？
@AllanStepps 据我所知，这个答案最初包含的 if(!e) { e = window.event; } 语句是 IE 特定的代码，用于从早期版本的 attachEvent 附加的事件处理程序中获取最新事件IE。由于在这种情况下，处理程序被附加到addEventListener（并且那些早期版本的 IE 与处理 HTML5 视频的人无关），这是完全没有必要的，我已将其删除。
使用此方法时需要注意的一点，OS X (10.11) 的 El Capitan 版本上的 Safari 不会捕获“结束”事件。所以在这种情况下，我需要使用 'timeupdate' 事件，然后再次检查 this.current Time 何时等于 0。
还要记得设置loop为false，否则不会触发结束事件。

【解决方案2】：

在 Opera Dev 网站的“我想滚动我自己的控件”部分下查看这篇 Everything You Need to Know About HTML5 Video and Audio 帖子。

这是相关部分：

<video src="video.ogv">
     video not supported
</video>

那么你可以使用：

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

    video.onended = function(e) {
      /*Do things here!*/
    };
</script>

onended 是所有媒体元素上的 HTML5 标准事件，请参阅HTML5 media element (video/audio) events 文档。

【讨论】：

我试图以与您介绍的完全相同的方式捕获“结束”事件，但此事件没有触发。我在 Safari 5.0.4 (6533.20.27) 下
@AntonAL：如果您遇到问题，我会将其作为一个新问题发布。
@All：你也可以这样做。
@AlastairPitts 这在 Chrome 上无效。 Darkroro 的回答是我让它与 Chrome 一起工作的唯一方法。这仍然适用于 Firefox。
死链接。 w3schools.com/tags/ref_eventattributes.asp => 媒体活动

【解决方案3】：

JQUERY

$("#video1").bind("ended", function() {
   //TO DO: Your code goes here...
});

HTML

<video id="video1" width="420">
  <source src="path/filename.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

事件类型HTML Audio and Video DOM Reference

【讨论】：

-1。自 2011 年发布的 jQuery 1.7 以来，.on() 一直优于 .bind()。另外，请正确格式化您的代码。

【解决方案4】：

您可以简单地将onended="myFunction()" 添加到您的视频标签中。

<video onended="myFunction()">
  ...
  Your browser does not support the video tag.
</video>

<script type='text/javascript'>
  function myFunction(){
    console.log("The End.")
  }
</script>

【讨论】：

尝试了其他一些选项，但只有这对我有用。谢谢
简单而有效。不错！

【解决方案5】：

这是一种在视频结束时触发的简单方法。

<html>
<body>

    <video id="myVideo" controls="controls">
        <source src="video.mp4" type="video/mp4">
        etc ...
    </video>

</body>
<script type='text/javascript'>

    document.getElementById('myVideo').addEventListener('ended', function(e) {

        alert('The End');

    })

</script>
</html>

在“EventListener”行中，将“结束”一词替换为“暂停”或“播放”以捕获这些事件。

【讨论】：

这个 JS 代码有语法错误。参数列表后缺少 )

【解决方案6】：

这是一个完整的示例，希望对您有所帮助 =)。

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" controls="controls">
  <source src="your_video_file.mp4" type="video/mp4">
  <source src="your_video_file.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        if(!e) { e = window.event; }
        alert("Video Finished");
    }
</script>
</body> 
</html>

【讨论】：

【解决方案7】：

您可以添加侦听器所有视频事件，包括 ended, loadedmetadata, timeupdate，其中 ended 函数在视频结束时被调用

$("#myVideo").on("ended", function() {
   //TO DO: Your code goes here...
      alert("Video Finished");
});

$("#myVideo").on("loadedmetadata", function() {
      alert("Video loaded");
  this.currentTime = 50;//50 seconds
   //TO DO: Your code goes here...
});


$("#myVideo").on("timeupdate", function() {
  var cTime=this.currentTime;
  if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
      alert("Video played "+cTime+" minutes");
   //TO DO: Your code goes here...
  var perc=cTime * 100 / this.duration;
  if(perc % 10 == 0)//Alerts when every 10% watched
      alert("Video played "+ perc +"%");
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <video id="myVideo" controls="controls">
    <source src="your_video_file.mp4" type="video/mp4">
      <source src="your_video_file.mp4" type="video/ogg">
        Your browser does not support HTML5 video.
  </video>

</body>

</html>

【讨论】：