CODEWITHSUNDEEP
htmlhtml5-videojquery
Eric J.
Eric J.

Reputation: 150208

HTML 5 Video OnEnded Event not Firing

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.

The video plays just fine but I am not receiving the onended event (my alert() does not fire).

Testing in Chrome, updated today to version 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>

Upvotes: 6

Views: 36160

Answers (2)

Nick Craver
Nick Craver

Reputation: 630607

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").

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

Upvotes: 17

codewarrior
codewarrior

Reputation: 19

I was searching for the answer for this too. Here's what worked for me in for the jQuery mobile framework:

$(document).ready(function(){
  $("#idname").bind('ended', function(){
  $.mobile.changePage($('#idofpageyouwantogoto'), 'fade');
  });
});

Upvotes: 2

Related Questions