jQuery 在 html5 视频末尾执行函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14517639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Executing function at end of html5 video
提问by willdanceforfun
I have a html video, and I am wanting to run a function when a video ends. I have tried the following but I get nothing:
我有一个 html 视频，我想在视频结束时运行一个函数。我尝试了以下但我什么也没得到：
$(document).ready(function(){
$('video').live('ended',function(){
alert('video ended');
});
});
Any ideas why this isn't triggering at the end of a video? Or have I not provided enough information to answer anything here?
任何想法为什么这不会在视频结束时触发？或者我没有提供足够的信息来回答这里的任何问题？
Note: I'm using live() function and not on() because of the need for jQuery 1.7 with this project.
注意：我使用 live() 函数而不是 on() 因为这个项目需要 jQuery 1.7。
回答by fboes
For your paste & copy pleasure the jQuery solution:
为了您的粘贴和复制乐趣，jQuery 解决方案：
<video width="320" height="240">
<source src="movie.mp4" type="video/mp4">
</video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>/*<![CDATA[*/
$(document).ready(function(){
$('video').on('ended',function(){
console.log('Video has ended!');
});
});
/*]]>*/</script>Replace the 'video'-part with the correct selector for your video.
将'video'-part替换为视频的正确选择器。
EDIT: Here is the solution without jQuery:
编辑：这是没有 jQuery 的解决方案：
<video width="320" height="240">
<source src="movie.mp4" type="video/mp4">
</video>
<script>/*<![CDATA[*/
document.querySelector('video').addEventListener('ended',function(){
console.log('Video has ended!');
}, false);
/*]]>*/</script>Replace the 'video'-part with the correct selector for your video.
将'video'-part替换为视频的正确选择器。
回答by Ilya Libin
<html>
<head>
<title></title>
<script>
function videoEnded() {
alert('video ended');
}
</script>
</head>
<body>
<video src="video/endscene.mp4" id="video" controls onended="videoEnded()">
video not supported
</video>
</body>
</html>
回答by Dipak
use onendedevent
使用结束事件
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
alert('video ended');
}
Read more on Everything you need to know about HTML5 video and audio
回答by Yonatan R
the only way i managed it to work is the following code:
我设法让它工作的唯一方法是以下代码：
$('video')[0].on('ended',function(){
console.log('Video has ended!');
});
回答by Jason Cidras
Here is something you can try:
您可以尝试以下方法：
$(document).on('ended', 'video', function (e) {
alert('video ended');
});
You said that the video is dynamically inserted afterthe DOM is loaded. In this script, you search on DOM for the videoelement and binds it with the endedfunction.
你说的是在加载DOM后动态插入视频。在此脚本中，您在 DOM 上搜索video元素并将其与ended函数绑定。
Here is the documentation for .on().
Here is the SO question for dynamic items.
I hope this helps!
我希望这有帮助！
回答by Tahir Afridi
You can use on in the place of live. Because on method is supported by jquery new versions and live is deprecated in new versions.
您可以在现场使用。因为 jquery 新版本支持 on 方法，而 live 在新版本中已弃用。
You can replace your code to this and your problem will be solved.
您可以将代码替换为此，您的问题将得到解决。
$(document).ready(function(){
$('video').on('ended',function(){
alert('video ended');
});
});
});
