Essentielle Audio- und Videoereignisse für HTML5

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

<code class="language-javascript">button.addEventListener('click', function(e) {
  if(media.paused) {
    media.play();
  } else {
    media.pause();
  }
}, false);</code>

Dieses Problem kann gelöst werden, indem man die

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

<code class="language-javascript">media.addEventListener('ended', function(e) {
  media.pause();
}, false);</code>

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!