2010-05-28 14 views
6

Estoy tratando de reaccionar al HTML 5 onended evento para la etiqueta video sin éxito. En el fragmento de código a continuación agregué el evento mouseleave para asegurarme de que el código jQuery sea correcto y de que ese evento active el cuadro alert().HTML 5 Video OnEnded Evento no Firing

El video funciona bien pero no recibo el evento onended (mi alert() no se dispara).

Prueba en Chrome, actualizada hoy a la versión 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> 

Respuesta

17

asegurarse de que está uniéndose a la ended evento en lugar de onended, deje siempre el on a cabo cuando se enlaza con jQuery, por ejemplo, no se podía hacer .on("onclick"), que haría .on("click").

Si ayuda, hay una lista completa de eventos disponibles para el elemento <video> aquí: http://www.w3.org/2010/05/video/mediaevents.html

+1

Recuerde también que el evento no se activará en ie9 mobile para Windows Phone Mobile. – Timo

+1

Dos años después y sigue siendo un borrador de especificaciones 'Borrador del Editor 26 de junio de 2012' –

+1

Haga eso tres años después: Borrador del Editor 30 de julio de 2013 –

2

que estaba buscando la respuesta para esto también. Esto es lo que funcionó para mí en el marco móvil de jQuery:

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