检测HTML5视频何时结束

你如何检测当HTML5 <视频>元素已经完成播放?

当前回答

你可以添加一个以“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>

2010-05-21 09:32:15

其他回答

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

2013-01-13 06:52:19

你可以简单地添加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-23 13:40:47

你可以添加一个以“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>

2010-05-21 09:32:15

看看Opera Dev网站上“我想滚动我自己的控件”一节的“关于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-30 00:01:27

这里有一个简单的方法，它会在视频结束时触发。

<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'替换为'pause'或'play'来捕捉这些事件。

2014-06-19 20:31:01

检测HTML5视频何时结束

推荐文章

最新文章

标签