2010-05-28 6 views
6

Ich versuche, auf das HTML 5 onended Ereignis für das video Tag ohne Erfolg zu reagieren. Im Code-Ausschnitt unten fügte ich das mouseleave-Ereignis hinzu, um sicherzustellen, dass der jQuery-Code korrekt ist und dass das Ereignis die alert()-Box aktiviert.HTML 5 Video OnEnded Event nicht ausgelöst

Das Video spielt gut, aber ich bekomme keine onended Veranstaltung (meine alert() feuert nicht).

Testen in Chrome, heute aktualisiert auf 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> 

Antwort

17

Vergewissern Sie sich auf die ended Ereignis statt onended, immer verlassen die on heraus sind verbindlich, wenn sie mit jQuery, zum Beispiel die Bindung nicht .on("onclick") tun könnte, Sie .on("click") tun würde.

Wenn es hilft, gibt es eine vollständige Liste der verfügbaren Ereignisse für das <video> Element hier: http://www.w3.org/2010/05/video/mediaevents.html

+1

Denken Sie auch daran, dass das Ereignis nicht auf ie9 Mobile für Windows Phone Mobile gefeuert wird. – Timo

+1

Zwei Jahre später und es ist immer noch eine Entwurfsspezifikation "Editor's Draft 26 Juni 2012" –

+1

Machen Sie das 3 Jahre später: Editor's Draft 30. Juli 2013 –

2

ich für diese auch für die Antwort gesucht. Hier ist, was für mich in für die jQuery Mobile Framework funktionierte:

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