logo标签列表

检测HTML5视频何时结束

htmlhtml5-video
301

如何检测 HTML5 的 <video> 元素播放结束？

非常有用的文档和测试页面来自苹果：http://developer.apple.com/library/safari/#samplecode/HTML5VideoEventFlow/Listings/events_js.html#//apple_ref/doc/uid/DTS40010085-events_js-DontLinkElementID_5 所有你想知道的关于HTML5视频事件！ - viebel
7个回答
375

你可以使用'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>
9
这是整个互联网上唯一可用的“播放结束”事件视频。太棒了！ - Isaac
10
为什么要检查 e 是否存在？ - Allan Stepps
4
据我所了解，这个回答最初包含的if(!e) { e = window.event; }语句是针对早期版本的IE中使用attachEvent附加的事件处理程序获取最新事件的IE特定代码。由于在这种情况下，处理程序是通过addEventListener附加的（而且那些早期版本的IE与处理HTML5视频无关），它完全是不必要的，因此我已将其删除。 - Mark Amery
5
使用这种方法时需要注意，在 OS X El Capitan（10.11）版本上的 Safari 浏览器不会捕获“ended”事件。 因此在这种情况下，需要使用“timeupdate”事件，然后检查当前时间是否再次等于0。 - Cam
7
记得将循环设置为false，否则结束事件不会被触发。 - Israel Morales
显示剩余3条评论
145
3
我尝试按照你所展示的方式准确捕获“ended”事件，但这个事件没有触发。我使用的是Safari 5.0.4 (6533.20.27)。 - AntonAL
如果你遇到了问题，我建议你将这个问题作为一个新的提问发布。 - Alastair Pitts
@所有人：你也可以像这样做。 <video class="video_player" id="video" poster="images/video-pc.jpg" tabindex="0" height="100%" onended="myHandler()"> - VendettaDroid
5
这在Chrome上无效。Darkroro的答案是我在Chrome上使其工作的唯一方法。但这仍然适用于Firefox。 - Jeff
死链接。http://www.w3schools.com/tags/ref_eventattributes.asp => 媒体事件 - Aurelien
这是对我有效的方法。添加事件监听器'ended'没有起作用。 - Rorok_89
39

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

12
自2011年发布jQuery 1.7以来，.on()已经比.bind()更受青睐。另外，请正确格式化您的代码。 - Mark Amery
10
您可以简单地将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>
尝试了几个其他选项，但只有这个对我有效。谢谢 - Silver
简单而有效。不错！ - Liam Pillay
7
这是一个简单的方法，当视频结束时触发。
<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'行中使用'暂停'或'播放'代替'ended'一词，以捕获这些事件。
这段JS代码存在语法错误。 参数列表后缺少)。 - frzsombor
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>
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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接