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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 14:33:07  来源:igfitidea点击:

HTML 5 Video OnEnded Event not Firing

htmlhtml5-videojquery

提问by Eric J.

I'm trying to react to the HTML 5 onendedevent for the videotag 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 onendedevent (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 endedevent instead of onended, always leave the onout 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');
  });
});