Video canplay Ereignis löst tausende Male pro Sekunde

Question

Ich habe folgenden jQuery-Code in meiner Seite onload Funktion:

$("#vid-pages").find("video").on('canplay', function() { 
    $(this)[0].currentTime = $(this)[0].duration/2; 
    console.log($(this)[0].currentTime); 
}); 

Es gibt nur zwei Videos in diesem Container, und keiner irgendwo sonst auf der Seite. Wenn ich die Konsole überprüfe, wird sie ständig mit der Zeit überflutet, die in diesem Codeblock zurückgegeben wird. Was ist die Lösung, um diesen Trigger nur einmal statt ständig zu machen?

Answer 1

Wenn die aktuelle Uhrzeit geändert wird, muss der Browser mehr Daten entweder vom Cache oder vom Netzwerk laden. Dies kann das Ereignis canplay auslösen. Und da im Event-Handler eine Zeit eingestellt ist, erhalten Sie eine endlose Schleife (Sie können den Effekt von canplay ausgelöst here sehen, indem Sie ein Video wählen, spielen und dann zur Mitte nach rechts springen). Es kann vom Browser abhängen.

This page auf MDN sagt folgend den Stand canplaythrough (wenn auch nicht ganz das gleiche ist es vernünftig, dies auch in der Medien-Event-Seite mit Firefox, wie gezeigt gilt für canplay zu glauben):

Hinweis: Die manuelle Einstellung der currentTime wird schließlich ein canephrotower-Ereignis in Firefox auslösen. Andere Browser können dieses Ereignis möglicherweise nicht auslösen.

Um zu vermeiden, entweder abmelden von der Veranstaltung, oder verwenden Sie eine Flagge, die das Ereignis Ausfahrt zweites Mal zwingt ausgelöst wird.

var initialPlay = false; 

$("#vid-pages").find("video").on('canplay', function() { 
    if (initialPlay) return; 
    initialPlay = true; 

    $(this)[0].currentTime = $(this)[0].duration/2; 
    console.log($(this)[0].currentTime); 
}); 

Zum Abbestellen müssen Sie eine nicht anonyme Funktion verwenden.