Detaillierte Erl?uterung der Schlüsselereignisse in HTML5 -Audio und -Video sowie Analyse von Browserunterschieden

html5s <video></video> und <audio></audio> Elemente liefern reichhaltige Ereignismechanismen. Einige Ereignisse wie das "Play" -Ereignis sind auf einen Blick klar, w?hrend andere, wie das "Fortschritt" -Ereigner, komplizierter sind. In diesem Artikel werden einige der wichtigsten Medienereignisse ausführlich untersucht und deren Ausl?ser, damit verbundene Attribute und Unterschiede zwischen verschiedenen Browsern analysiert.

Kernpunkte

• html5s <video></video> und <audio></audio> Elemente bieten eine Vielzahl von Ereignissen, einige sind einfach und leicht zu verstehen (z. B. "Play" -Ereignisse) und einige komplexer (wie "Fortschritt" -Ereignisse).
• Spielereignisse (z. B. "Play", "Pause", "Ended") reagieren auf Medienwiedergabe- oder Pauseoperationen und entsprechen den entsprechenden Medienfunktionen und Eigenschaften. Einige Browser haben jedoch Ausnahmen, wie in der Oper, Safari und IE10, wenn die Medienwiedergabe vorbei ist, ist die .paused -Flag m?glicherweise immer noch falsch.
• Laden von Ereignissen beziehen sich auf das Laden oder Laden von Mediendaten, einschlie?lich "LoadStart", "Progress", "LoadedMetadata", "CanPlay" und "CanPlayThrough" -Erditionen. Ihr Verhalten variiert jedoch je nach Browser und preload Attribut.
• Das "Fortschritt" -Ereignis wird w?hrend der Download -Daten kontinuierlich ausgel?st, und eine Reihe von Zeitbereichen wird verwendet, um den Download -Fortschritt anzuzeigen. Es gibt jedoch Unterschiede in den Browsern, wie z. B. Opera erzeugt zwei Bereiche, w?hrend mobile Safari nur den Aktivit?tsbereich beh?lt.
• Das Ereignis "TimeUpdate" wird w?hrend der Medienwiedergabe kontinuierlich ausgel?st und wird verwendet, um andere Elemente mit der Medienwiedergabe zu synchronisieren. Dieses Ereignis hat normalerweise keine Browserfehler oder Unterschiede.

Spielereignis

Event Response Media -Wiedergabe oder Pause einlegen. Diese Ereignisse sind relativ einfach.

Die Ereignisse "Play" und "Pause" werden abgefeuert, wenn Medien spielen oder innehalten. Das "Ended" -Ervent wird am Ende der Medienwiedergabe abgefeuert, unabh?ngig davon, ob es sich um das Ende der normalen Wiedergabe handelt oder der Benutzer manuell bis zum Ende springt.

Die ersten beiden Ereignisse entsprechen den Methoden play() und pause(). Die letzten beiden Ereignisse entsprechen den Attributen .paused und .ended. Die .paused Eigenschaft standardm??ig oder true, wenn die Medien pausieren; .ended

Es gibt jedoch eine bedeutende Ausnahme für Opera, Safari und IE10: Wenn die Medienwiedergabe vorbei ist, ist die

-Flag immer noch falsch (logischerweise sollte es wahr sein, weil Medien nicht mehr spielen). Dies bedeutet, dass der einfache Spiel-/Pause -Taste -Handler in diesem Fall fehlschl?gt: .paused

button.addEventListener('click', function(e) {
  if(media.paused) {
    media.play();
  } else {
    media.pause();
  }
}, false);

Dieses Problem kann gel?st werden, indem man die

-Methode in der Ereignisantwort "beendet" manuell aufruft: pause()

media.addEventListener('ended', function(e) {
  media.pause();
}, false);

Firefox und Chrome haben dieses Problem intern behoben, indem sie das "Pause" -Ereignis vor dem "Ended" -Ereignis ausgel?st haben.

Ladenereignis

Laden von Ereignissen beziehen sich auf das Laden von Mediendaten (oder fehlende). Die H?ufigkeit dieser Ereignisse h?ngt vom Ladestatus der Medien ab, d. H. Ob das preload -attribut verwendet wird und ob die Medien zwischengespeichert wurden.

In allen F?llen ist das erste ausgel?ste Ereignis das "LoadStart" -Ereignis, das darauf hinweist, dass der Browser begonnen hat, nach Daten zu suchen. Dies bedeutet jedoch nur, dass der Browser anf?ngt und nicht bedeutet, dass Daten tats?chlich geladen wurden oder dass die Medienressourcen sogar existieren.

Wenn der Wert des preload -attributs "keine" ist, ist das "LoadStart" -Ereignis das einzige Ereignis, das vor Beginn der Wiedergabe ausgel?st wird. Und wenn der Wert des preload -attributs "metadata" oder "auto" ist, werden bald zwei andere Ereignisse ausgel?st: "Fortschritt" und "LoadedMetadata". (Diese Ereignisse werden immer noch abgefeuert, wenn es keine Vorspannung gibt, aber warten Sie, bis die Wiedergabe beginnt.)

Das "Fortschrittsereignis" ist relativ kompliziert und wird im n?chsten Abschnitt getrennt er?rtert. Das "LoadedMetadata" -Ereignis ist einfach, was bedeutet, dass der Browser genug Metadaten geladen hat, um die .duration der Medien zu kennen (als schwimmende Punktzahl, nicht die Standardwert -NAN).

Das Ereignis "loadedMetadata" wird natürlich nur dann abgefeuert, wenn das Medium geladen werden kann - wenn die Last fehlschl?gt (z. weiter gespielt werden. src

Es wurden noch einmal einige wichtige Browserunterschiede auftreten. In mobiler Safari ist die Einstellung

absichtlich unimplementiert, sodass alle Werte der Eigenschaft genauso wie preload. Im Gegensatz dazu wird in IE10 Medienmetadaten standardm??ig immer geladen, so dass preload="none" das gleiche wie preload="none". preload="metadata"

"Fortschritt" Ereignis

Das "Fortschritt" -Ervent feuert weiterhin w?hrend (und nur) den Daten herunter. Wenn

auf "None" eingestellt ist, l?st es sich nicht vor, bevor die Wiedergabe in den ersten Sekunden auf "Metadaten" eingestellt ist, und stoppt dann, bis die Wiedergabe beginnt "Auto", es wird weiter feuern, bis die gesamte Mediendatei heruntergeladen wird. preload preload Bei allen Einstellungen preload wird der Browser nach Beginn der Wiedergabe weiterhin die gesamte Mediendatei herunterladen, bis keine verbleibenden Daten geladen werden müssen, und der Hintergrund -Download wird fortgesetzt, auch wenn das Video anschlie?end pausiert wird.

Die Daten selbst werden durch eine Reihe von Zeitbereichen dargestellt, und es ist wichtig zu verstehen, wie diese Zeitbereiche funktionieren, bevor das Ereignis "Fortschritt" verwendet wird. preload

(Der folgende Inhalt entspricht im Grunde genommen dem Originaltext, aber einige S?tze wurden angepasst und poliert, wobei das direkte Kopieren gro?er Abs?tze vermieden und die ursprüngliche Bedeutung aufrechterhalten wird)

Zeit -Update -Ereignis

Führen Sie schlie?lich kurz das "TimeUpdate" -Vereignis vor, das w?hrend der Medienwiedergabe weiterhin ausl?st. Sie k?nnen dieses Ereignis verwenden, um andere Inhalte mit der Medienwiedergabe zu synchronisieren, z. B. manuelle Untertitel, das Hervorheben von aktiven Zeilen in Transkripten und sogar die Synchronisierung mehrerer Medienquellen.

Die Ausl?serfrequenz des "TimeUpdate" -Ereignisses ist nicht angegeben und variiert tats?chlich stark zwischen Browsern. Die durchschnittliche Gesamtfrequenz betr?gt jedoch etwa 3-5 Mal pro Sekunde, was für die meisten Synchronisationszwecke genau genug ist.

Soweit ich das beurteilen kann, gibt es in diesem Ereignis keine Browserfehler oder Unterschiede.

Schlussfolgerung

Dieser Artikel behandelt nicht alle m?glichen Medienereignisse - zusammen mit anderen Wiedergabe- und Sprungereignissen, erweiterten Netzwerkstatusereignissen und sogar einer, die bei ?nderungen des Volumens ausl?st. Aber ich habe das, was ich für das Wichtigste halte, abgedeckt - genug, um die meisten einfachen Video- und Audio -Skriptbedürfnisse zu erfüllen, und genug, um eine grundlegende benutzerdefinierte Schnittstelle zu erstellen.

(Der FAQS -Teil ist im Grunde genommen dem ursprünglichen Text, aber einige S?tze wurden angepasst und poliert, wobei das direkte Kopieren gro?er Abs?tze und die Aufrechterhaltung der ursprünglichen Bedeutung vermieden wurden)

Das obige ist der detaillierte Inhalt vonEssentielle Audio- und Videoereignisse für HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!