当HTML5视频结束时检测到

190

如何检测HTML5 <video>元素播放完毕？当HTML5视频结束时检测到

2010-04-29 UltimateBrent

非常有用的文档与苹果的测试页面，您可以添加监听所有视频事件nicluding ended, loadedmetadata, timeupdate其中ended函数被调用。 com/library/safari /＃samplecode/HTML5VideoEventFlow/Listings/events_js.html＃// apple_ref/doc/uid/DTS40010085-events_js-DontLinkElementID_5您只希望了解HTML5视频事件！ – viebel 2012-09-23 15:04:51

219

可以作为第一个参数

像这样以 '结束' 添加事件侦听器

来源

2010-05-21 09:32:15 Darkroro

这是唯一的视频。“在结束”事件，在整个互联网工作。好样的！ – Isaac 2012-06-08 15:36:28

+10

你为什么要检查e是否存在？ – 2013-08-07 00:12:09

在Android Chrome上运行，与'onended'相反 – Richard 2014-09-02 17:13:29

125

看一看这个Everything You Need to Know About HTML5 Video and Audio在Opera Dev站点下的“我想滚动我自己的控件”部分的文章。

这是有关章节：

<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文档。

<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-04-30 00:01:27

那个浏览器是特定的吗？ – UltimateBrent 2010-04-30 21:06:03

我已经更新了我的答案和更多信息。 – 2010-05-01 03:00:53

谢谢！这应该做到这一点！ – UltimateBrent 2010-05-03 18:22:25

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>

事件类型：

来源

2013-01-13 06:52:19 d1jhoni1b

-1。自从2011年发布jQuery 1.7以来，'.on（）'比'.bind（）'更受青睐。另外，请正确格式化代码。 – 2015-07-15 19:58:41

这里是一个完整的例子，我希望它有帮助=）。

<!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-14 08:28:00

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

<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'一行中用'pause'或'play'代替单词'ended'来捕获这些事件。 http://developer.apple：

来源

2014-06-19 20:31:01 user3758025

您在此JS代码中有语法错误。缺失）在参数列表之后 – frzsombor 2015-11-27 13:28:52

当视频结束

$("#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-08 19:24:54 jafarbtech

当HTML5视频结束时检测到

回答

相关问题