jQuery HTML 5 Video OnEnded 事件未触发
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2925851/
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
HTML 5 Video OnEnded Event not Firing
提问by Eric J.
I'm trying to react to the HTML 5 onended
event for the video
tag without success. In the code snippet below I added the mouseleave event to be sure the jQuery code is correct and that event does activate the alert()
box.
我试图对标签的 HTML 5onended
事件做出反应,但video
没有成功。在下面的代码片段中,我添加了 mouseleave 事件以确保 jQuery 代码正确并且该事件确实激活了alert()
框。
The video plays just fine but I am not receiving the onended
event (my alert()
does not fire).
视频播放得很好,但我没有收到onended
事件(我alert()
没有触发)。
Testing in Chrome, updated today to version 5.0.375.55.
在 Chrome 中测试,今天更新到版本 5.0.375.55。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("#myVideoTag").bind('mouseleave onended', function(){
alert("All done, function!");
});
});
</script>
</head>
<body>
<video id="myVideoTag" width="640" height="360" poster="Fractal-zoom-1-04-Snowflake.jpg" controls>
<source src="Fractal-zoom-1-04-Snowflake.mp4" type="video/mp4"></source>
<source src="Fractal-zoom-1-04-Snowflake.ogg" type="video/ogg"></source>
</video>
<body>
<html>
回答by Nick Craver
Make sure you're binding to the ended
event instead of onended
, always leave the on
out when binding with jQuery, for example you couldn't do .on("onclick")
, you'd do .on("click")
.
确保您绑定的ended
事件,而不是onended
,要始终保持on
与jQuery结合时,例如,你不能这样做.on("onclick")
,你会怎么做.on("click")
。
If it helps, there's a full listing of available events for the <video>
element here: http://www.w3.org/2010/05/video/mediaevents.html
如果有帮助,这里有该<video>
元素可用事件的完整列表:http: //www.w3.org/2010/05/video/mediaevents.html
回答by codewarrior
I was searching for the answer for this too. Here's what worked for me in for the jQuery mobile framework:
我也在寻找这个问题的答案。以下是 jQuery 移动框架对我有用的内容:
$(document).ready(function(){
$("#idname").bind('ended', function(){
$.mobile.changePage($('#idofpageyouwantogoto'), 'fade');
});
});