280

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

4

7 回答 7

344

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

像这样 ：

<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>
于 2010-05-21T09:32:15.480 回答
138

在 Opera 开发网站的“我想滚动我自己的控件”部分下查看这篇您需要了解的关于 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 媒体元素（视频/音频）事件文档。

于 2010-04-30T00:01:27.927 回答
38

查询

$("#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 参考

于 2013-01-13T06:52:19.033 回答
8

您可以简单地添加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>
于 2019-08-23T13:40:47.410 回答
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”行中，将“end”一词替换为“pause”或“play”以捕获这些事件。

于 2014-06-19T20:31:01.837 回答
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>
于 2014-03-14T08:28:00.287 回答
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>

于 2016-12-08T19:24:54.550 回答