-
Attribute, Eigenschaften, Methoden und Ereignisse des HTML-Videoelements
-
26. August 2024
-
Das Element video ist eine der bemerkenswertesten Funktionen von HTML5, da sie es Entwicklern ermöglicht, Videos direkt in Webseiten einzubetten, ohne dass externe Plugins wie Flash erforderlich sind. Durch verschiedene Attribute, Eigenschaften, Methoden und Ereignisse kann das Element video bietet volle Kontrolle über die Wiedergabe von Multimedia-Inhalten. In diesem Artikel werden wir jede dieser Funktionen im Detail untersuchen.
Elementattribute video
Elementattribute video Sie definieren ihr Verhalten und Aussehen direkt aus dem HTML. Nachfolgend sind alle relevanten Attribute aufgeführt:
- src: Gibt die URL der Datei an video das muss reproduziert werden. Dieses Attribut ist optional, wenn Elemente verwendet werden 'source' im Inneren 'video' .
- controls: Zeigt standardmäßige Browser-Steuerelemente für die Wiedergabe an, z. B. die Wiedergabeschaltfläche, den Fortschrittsbalken, die Lautstärkeregelung usw.
- autoplay: Zeigt an, dass die video Die Wiedergabe sollte so schnell wie möglich automatisch beginnen, sobald der Akku ausreichend aufgeladen ist.
- loop: Macht das video wird in einer Endlosschleife abgespielt und beginnt am Ende von vorne.
- muted: Macht das video spielt ohne Ton.
- Poster : Definiert ein Bild, das während des angezeigt wird video oder bis der Benutzer mit der Wiedergabe beginnt.
- preload: Schlägt dem Browser vor, wie er mit dem Laden der Datei umgehen soll video. Sie können die Werte übernehmen:
auto (alle vorladen video), metadata (Laden Sie einfach die Metadaten vor) odernone(Laden Sie nichts vor.)
- width Und height : Gibt die Abmessungen des Anzeigebereichs an video in Pixel.
- playsinline: Zeigt an, dass die video sollte online statt im Vollbildmodus auf Mobilgeräten gespielt werden.
Elementeigenschaften video
Elementeigenschaften video ermöglichen es Ihnen, das Verhalten von zu manipulieren video durch JavaScript. Nachfolgend werden die wichtigsten Eigenschaften beschrieben:
- currentTime: Aktuelle Wiedergabeposition des abrufen oder festlegen video , in Sekunden. Nützlich, um zu einem bestimmten Punkt im zu springen video .
- duration: Gibt die Gesamtdauer des zurück video in Sekunden. Wenn die Dauer nicht verfügbar ist, wird NaN zurückgegeben .
- paused: Gibt an, ob die video befindet sich derzeit in der Pause.
- ended: Gibt an, ob die Wiedergabe des video es ist vorbei.
- volume: Ermöglicht Ihnen, die Lautstärke des zu ermitteln oder einzustellen video. Der Wert variiert zwischen 0,0 (Stille) und 1,0 (maximale Lautstärke).
- muted: Bestimmt, ob die video ist stummgeschaltet. Kann auf true oder false gesetzt werden.
- playbackRate: Steuert die Wiedergabegeschwindigkeit des video. Ein Wert von 1,0 stellt die normale Geschwindigkeit dar, während niedrigere Werte sie verringern und höhere Werte sie erhöhen.
- readyState: Gibt den Ladestatus des zurück video. Die möglichen Werte sind:
0 (HAVE_NOTHING), 1 (HAVE_METADATA), 2 (HAVE_CURRENT_DATA),
3 (HAVE_FUTURE_DATA)und 4 (HAVE_ENOUGH_DATA).
- seeking: Gibt an, ob die videoist gerade auf der Suche nach einem neuen Zuchtplatz.
- buffered: Gibt ein Objekt zurück TimeRanges was die Teile des angibt video die gepuffert wurden.
- videoWidth Und videoHeight: Gibt die Breite und Höhe des zurück video bzw. in Pixel.
Elementmethoden video
Elementmethoden video Ermöglichen Sie Entwicklern, die Wiedergabe des zu steuern video programmatisch. Die am häufigsten verwendeten Methoden werden hier beschrieben:
- play() : Startet die Wiedergabe des video. Wenn er video pausiert, setzt diese Methode die Wiedergabe fort.
- pause(): Wiedergabe anhalten video. Wenn er videoEs ist bereits pausiert, es hat keine Wirkung.
- load(): Laden Sie die auf video seit seiner Entstehung. Dies ist nützlich, wenn Sie eine neu laden müssen video Aus irgendeinem Grund.
- canPlayType(type): Gibt einen Wert zurück, der angibt, ob der Browser einen bestimmten Dateityp abspielen kann. video. Mögliche Werte sind:
„“ (unbekannt), "probably" (wahrscheinlich reproduzierbar) und "maybe" (vielleicht reproduzierbar).
- addTextTrack(kind, label, language): Fügt eine neue Textspur (z. B. Untertitel) zum hinzu video. Der Parameter kind könnte sein "subtitles", "captions", "descriptions", "chapters" entweder "metadata".
Elementereignisse video
Elementereignisse video Sie sind wichtig, um während der Wiedergabe auf Benutzerinteraktionen und Zustandsänderungen zu reagieren. Nachfolgend sind die häufigsten Ereignisse aufgeführt:
- play: Wird ausgelöst, wenn die video beginnt mit der Wiedergabe, entweder durch eine Benutzeraktion oder durch die Methode play() .
- pause: Wird ausgelöst, wenn die Wiedergabe erfolgt video stoppt. Dies kann passieren, wenn der Benutzer die Funktion pausiert video oder wenn die Methode aufgerufen wird pause().
- ended: Es tritt auf, wenn die video erreicht das Ende seiner Dauer und stoppt die Wiedergabe.
- timeupdate: Wird regelmäßig ausgelöst, während das Lied abgespielt wird. video und die aktuelle Wiedergabeposition ändert sich.
- volumechange: Tritt auf, wenn die Lautstärke des video oder die Stummschaltung ist aktiviert/deaktiviert.
- loadeddata: Wird ausgelöst, wenn der Akku ausreichend geladen ist. video sodass es zum Starten der Wiedergabe bereit ist, jedoch bevor es vollständig aufgeladen ist.
- loadedmetadata: Tritt auf, wenn die Metadaten des video (zum Beispiel Dauer, Abmessungen und Textspuren).
- canplay : Zeigt an, dass die video beginnt möglicherweise mit der Wiedergabe, ist aber noch nicht ausreichend geladen, um vollständig ohne Pausen abzuspielen.
- canplaythrough: Wird ausgelöst, wenn der Browser schätzt, dass die video Es kann vollständig ohne Unterbrechungen gespielt werden.
- seeking: Tritt auf, wenn ein Suchvorgang gestartet wird, d. h. wenn der Benutzer oder das Skript die Wiedergabeposition ändert.
- seeked: Wird ausgelöst, wenn ein Suchvorgang abgeschlossen ist.
Das Element video bietet große Flexibilität und Kontrolle bei der Wiedergabe von video im Netz. Durch das Verständnis und die Verwendung seiner Attribute, Eigenschaften, Methoden und Ereignisse können Sie umfassende Multimedia-Erlebnisse erstellen, die auf die Bedürfnisse Ihrer Benutzer zugeschnitten sind. Entdecken Sie alle Möglichkeiten, die es bietet, und holen Sie das Beste aus diesem leistungsstarken Tool heraus!
Kommentare:
Kein Kommentar