HTML 5 Video OnEnded Event not Firing

Question

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>

score 17 · Accepted Answer · edited Jan 09 '16 at 00:41

17

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

edited Jan 09 '16 at 00:41

mikemaccana

110,530
99
389
494

answered Jun 02 '10 at 03:31

Nick Craver

623,446
136
1,297
1,155

1

Also remember that the event won't get fired on ie9 mobile for Windows Phone Mobile. – Timo Ernst May 03 '12 at 12:26
1

Two years later and it's still a draft spec `Editor's Draft 26 June 2012` – Eric J. Jul 05 '12 at 01:18
1

Make that 3 years later: Editor's Draft 30 July 2013 – João Pereira Jul 30 '13 at 10:55
1

Four. Editor's Draft 22 June 2014 – SeinopSys Jun 22 '14 at 22:01
1

2016 reporting. No longer a draft :P – Jonathan Allen Grant Dec 01 '16 at 00:07

score 2 · Answer 2 · answered Sep 17 '11 at 18:57

2

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');
  });
});

answered Sep 17 '11 at 18:57

codewarrior

19
3

HTML 5 Video OnEnded Event not Firing

2 Answers2

Linked