检测HTML5视频何时结束

251

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

html html5-video

— 布伦特
source

Apple提供的带有测试页的非常有用的文档：developer.apple.com/library/safari/#samplecode / ...您想了解的有关HTML5视频事件的所有信息！

— viebel 2012年

310

您可以添加带有“ end”作为第一个参数的事件监听器

像这样：

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

— 洛泰勒斯
source

8

这是唯一在整个互联网上都可以播放的视频。太棒了！

— 艾萨克（Isaac）2012年

10

为什么检查e是否存在？

— 艾伦·斯特普斯

3

@AllanStepps据我所知，if(!e) { e = window.event; }此答案最初包含的语句是IE特定代码，用于从attachEvent早期IE版本附带的事件处理程序中获取最新事件。由于在这种情况下，附加了处理程序addEventListener（而那些早期版本的IE与处理HTML5视频的人无关），因此完全没有必要，因此我将其删除。

— Mark Amery

3

使用此方法时需要注意的一点是，OS X（10.11）的El Capitan版本上的Safari无法捕获“结束”事件。因此，在那种情况下，我需要使用“ timeupdate”事件，然后检查this.current时间何时再次等于0。

— 凸轮

2

还请记住将loop设置为false，否则不会触发end事件。

— 以色列士气2015年

134

看看这一切你需要知道的关于HTML5视频和音频的“我要推出自己的控制”部分后在歌剧院开发网站。

这是相关的部分：

<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媒体元素（视频/音频）事件文档。

— 阿拉斯泰尔·皮茨
source

2

我已尝试按照与您介绍的方式完全相同的方式捕获“结束”事件，但是此事件未触发。我使用Safari 5.0.4（6533.20.27）

— AntonAL 2011年

@AntonAL：如果您遇到问题，我会将其发布为新问题。

— Alastair Pitts

@All：您也可以这样做。<video class =“ video_player” id =“ video” poster =“ images / video-pc.jpg” tabindex =“ 0” height =“ 100％” onended =“ myHandler（）”>

— VendettaDroid

5

@AlastairPitts这在Chrome上无效。Darkroro的答案是我让它与Chrome兼容的唯一方法。这仍然适用于Firefox。

— 杰夫

无效链接。w3schools.com/tags/ref_eventattributes.asp =>媒体活动

— Aurelien

36

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音频和视频DOM参考

— d1jhoni1b
source

11

-1。自2011年发布jQuery 1.7以来，它.on()已成为首选.bind()。此外，请正确格式化代码。

— Mark Amery

4

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

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

— 奥斯卡·沃克拉斯基
source

4

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

<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”行中，将“ end”一词替换为“ pause”或“ play”以捕获这些事件。

— 用户名
source

您在此JS代码中存在语法错误。参数列表后缺少）

— frzsombor

1

您只需将其添加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>

— JC R
source

0

您可以将所有视频事件添加到侦听器，而不包括视频结束时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>

展开摘要

— 捷发科技
source