<video>: Das Video-Einbettungselement

Das obige Beispiel zeigt eine einfache Verwendung des <video>-Elements. Ähnlich wie beim <img>-Element geben wir einen Pfad zu den Medien an, die wir im src-Attribut anzeigen möchten; wir können weitere Attribute einschließen, um Informationen wie Video-Breite und -Höhe anzugeben, ob wir es automatisch abspielen und wiederholen möchten oder ob wir die standardmäßigen Videosteuerungen des Browsers anzeigen möchten usw.

Der Inhalt innerhalb der öffnenden und schließenden <video></video>-Tags wird als Fallback in Browsern angezeigt, die das Element nicht unterstützen.

Wie alle anderen HTML-Elemente unterstützt dieses Element die globalen Attribute.

autoplay

Ein boolesches Attribut; wenn es angegeben ist, beginnt das Video automatisch mit der Wiedergabe, sobald es ohne Unterbrechung der Datenladung abspielbereit ist.

Hinweis: Moderne Browser blockieren Audio (oder Videos mit einer ungemuteten Audiospur) von der automatischen Wiedergabe, da Websites, die automatisch Audio abspielen, für Benutzer eine unangenehme Erfahrung sein können. Siehe unseren Autoplay-Leitfaden für zusätzliche Informationen zur richtigen Verwendung von Autoplay.

Um die automatische Videowiedergabe zu deaktivieren, funktioniert autoplay="false" nicht; das Video wird automatisch abgespielt, wenn das Attribut im <video>-Tag vorhanden ist. Um Autoplay zu entfernen, muss das Attribut vollständig entfernt werden.

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, die es dem Benutzer ermöglichen, die Videowiedergabe zu steuern, einschließlich Lautstärke, Suchen und Anhalten/Wiederaufnehmen der Wiedergabe.

controlslist

Das controlslist-Attribut hilft, wenn angegeben, dem Browser bei der Auswahl der Steuerungen, die für das video-Element angezeigt werden, wann immer der Browser seine eigenen Steuerungssets anzeigt (d. h. wenn das controls-Attribut angegeben ist).

Die erlaubten Werte sind nodownload, nofullscreen und noremoteplayback.

Verwenden Sie das Attribut disablepictureinpicture, wenn Sie den Bild-in-Bild-Modus (und die Steuerung) deaktivieren möchten.

crossorigin

Dieses enumerierte Attribut gibt an, ob CORS zum Abrufen des zugehörigen Videos verwendet werden soll. CORS-fähige Ressourcen können im <canvas>-Element ohne Verfälschung wiederverwendet werden. Die erlaubten Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Anmeldeinformation. Mit anderen Worten, es sendet den Origin:-HTTP-Header ohne Cookie, X.509-Zertifikat oder Ausführung der HTTP-Basisautorisierung. Wenn der Server keine Anmeldeinformationen an die Ursprungsseite gibt (indem er den Access-Control-Allow-Origin:-HTTP-Header nicht setzt), ist die Ressource verfälscht und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit Anmeldeinformation. Mit anderen Worten, es sendet den Origin:-HTTP-Header mit einem Cookie, einem Zertifikat oder Ausführung der HTTP-Basisautorisierung. Wenn der Server keine Anmeldeinformationen an die Ursprungsseite gibt (über den Access-Control-Allow-Credentials:-HTTP-Header), ist die Ressource verfälscht und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgerufen (d. h. ohne Senden des Origin:-HTTP-Headers), sodass ihre nicht-verfälschte Nutzung in <canvas>-Elementen verhindert wird. Wenn ungültig, wird es behandelt, als ob das aufgezählte Schlüsselwort anonymous verwendet wurde. Siehe CORS-Einstellungen für weitere Informationen.

disablepictureinpicture

Verhindert, dass der Browser ein Bild-in-Bild-Kontextmenü vorschlägt oder den Bild-in-Bild-Modus automatisch in einigen Fällen anfordert.

disableremoteplayback

Ein boolesches Attribut, das die Fähigkeit der Fernwiedergabe in Geräten deaktiviert, die über kabelgebundene (HDMI, DVI, etc.) und drahtlose Technologien (Miracast, Chromecast, DLNA, AirPlay, usw.) angeschlossen sind.

In Safari können Sie x-webkit-airplay="deny" als Fallback verwenden.

height

Die Höhe des Videoanzeigebereichs in CSS-Pixeln (nur absolute Werte; keine Prozentsätze).

loop

Ein boolesches Attribut; wenn es angegeben ist, wird der Browser beim Erreichen des Endes des Videos automatisch zum Anfang zurückspringen.

muted

Ein boolesches Attribut, das die Standardeinstellung der Audio-Stummschaltung im Video angibt. Wenn gesetzt, wird das Audio anfänglich stummgeschaltet sein. Der Standardwert ist false, d. h. das Audio wird abgespielt, wenn das Video abgespielt wird.

playsinline

Ein boolesches Attribut, das angibt, dass das Video "inline" abgespielt werden soll, also innerhalb des Wiedergabebereichs des Elements. Beachten Sie, dass das Fehlen dieses Attributs nicht impliziert, dass das Video immer im Vollbild abgespielt wird.

poster

Eine URL für ein Bild, das angezeigt wird, während das Video heruntergeladen wird. Wenn dieses Attribut nicht angegeben ist, wird nichts angezeigt, bis der erste Frame verfügbar ist; dann wird der erste Frame als Poster-Frame angezeigt.

preload

Dieses enumerierte Attribut soll dem Browser einen Hinweis darauf geben, was der Autor für die beste Benutzererfahrung hält, in Bezug auf welche Inhalte geladen werden sollen, bevor das Video abgespielt wird. Es kann einen der folgenden Werte haben:

• none: Gibt an, dass das Video nicht vorgeladen werden soll.
• metadata: Gibt an, dass nur Videometadaten (z. B. Länge) abgerufen werden.
• auto: Gibt an, dass die gesamte Videodatei heruntergeladen werden kann, auch wenn nicht erwartet wird, dass der Benutzer sie verwendet.
• leerer String: Ein Synonym für den Wert auto.

Der Standardwert ist für jeden Browser unterschiedlich. Die Spezifikation empfiehlt, es auf metadata zu setzen.

Hinweis:

• Das autoplay-Attribut hat Vorrang vor preload. Wenn autoplay angegeben ist, muss der Browser logischerweise mit dem Herunterladen des Videos zur Wiedergabe beginnen.
• Die Spezifikation zwingt den Browser nicht, den Wert dieses Attributs zu befolgen; es ist lediglich ein Hinweis.

src

Die URL des einzubettenden Videos. Dies ist optional; Sie können stattdessen das <source>-Element innerhalb des Video-Blocks verwenden, um das einzubettende Video anzugeben.

width

Die Breite des Videoanzeigebereichs in CSS-Pixeln (nur absolute Werte; keine Prozentsätze).

Browser unterstützen nicht alle dieselben Videoformate; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente angeben, und der Browser verwendet dann die erste, die er versteht.

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4" download="myVideo.mp4">link to the video</a> instead.
  </p>
</video>

Wir bieten einen substanziellen und umfassenden Leitfaden zu Medien-Dateitypen und den Leitfaden zu den unterstützten Codecs für Videos. Zudem ist ein Leitfaden für Audio-Codecs, die mit ihnen verwendet werden können verfügbar.

Andere Nutzungshinweise:

• Wenn Sie nicht das Attribut controls angeben, enthält das Video nicht die standardmäßigen Steuerungen des Browsers; Sie können Ihre eigenen benutzerdefinierten Steuerungen mithilfe von JavaScript und der HTMLMediaElement-API erstellen. Siehe Erstellen eines geräteübergreifenden Videoplayers für weitere Details.
• Um genaue Kontrolle über Ihre Video- (und Audio-)Inhalte zu ermöglichen, lösen HTMLMediaElements viele verschiedene Ereignisse aus. Neben der Bereitstellung von Steuerungsmöglichkeiten lassen diese Ereignisse auch zu, den Fortschritt sowohl des Downloads als auch der Wiedergabe der Medien sowie den Wiedergabestatus und die -position zu überwachen.
• Sie können die object-position-Eigenschaft verwenden, um die Positionierung des Videos innerhalb des Rahmens des Elements anzupassen, und die object-fit-Eigenschaft, um zu steuern, wie die Größe des Videos an die Rahmenbreite angepasst wird.
• Um Untertitel / Captions zusammen mit Ihrem Video anzuzeigen, können Sie etwas JavaScript zusammen mit dem <track>-Element und dem WebVTT-Format verwenden. Siehe Hinzufügen von Captions und Untertiteln zu HTML-Videos für weitere Informationen.
• Sie können Audiodateien mit einem <video>-Element wiedergeben. Dies kann nützlich sein, wenn Sie zum Beispiel Audio mit einem WebVTT-Transkript durchführen müssen, da das <audio>-Element keine Captions mit WebVTT zulässt.
• Um den Fallback-Inhalt in Browsern zu testen, die das Element unterstützen, können Sie <video> durch ein nicht existentes Element wie <notavideo> ersetzen.

Eine gute allgemeine Informationsquelle zur Verwendung von HTML <video> ist der HTML-Video-und-Audio Anfänger-Tutorial.

Das <video>-Element ist ein ersetztes Element — der display-Wert ist standardmäßig inline — aber seine Standardbreite und -höhe im Ansichtsfenster wird durch das eingebettete Video definiert.

Es gibt keine besonderen Überlegungen für das Styling von <video>; eine übliche Strategie ist, ihm einen display-Wert von block zu geben, um es einfacher zu positionieren, zu dimensionieren usw., und dann Stil- und Layoutinformationen bereitzustellen, wie erforderlich. Grundlagen der Videoplayer-Stilisierung bietet einige nützliche Styling-Techniken.

Zeitgesteuerte Textspuren für Untertitel, geschlossene Captions, Kapitelüberschriften usw. können deklarativ durch die Verschachtelung des <track>-Elements hinzugefügt werden. Die Spuren werden im Web Video Text Tracks File Format (WebVTT) (.vtt-Dateien) angegeben.

Zum Beispiel enthält der untenstehende HTML-Code die Datei "captions.vtt", die verwendet wird, um geschlossene Captions auf dem Video zu überlagern, wenn Captions vom Benutzer aktiviert werden.

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" />
</video>

Zeitgesteuerte Textspuren können auch programmatisch unter Verwendung der WebVTT-API hinzugefügt werden.

Sie können erkennen, wann Spuren einem <video>-Element hinzugefügt oder davon entfernt werden, indem Sie die Ereignisse addtrack und removetrack verwenden. Diese Ereignisse sind jedoch nicht direkt an das <video>-Element selbst gesendet. Stattdessen werden sie an das Spurlistenobjekt innerhalb des <video>-Elements gesendet, das dem Typ von Spur entspricht, die dem Element hinzugefügt wurde:

HTMLMediaElement.audioTracks

Eine AudioTrackList, die alle Audiospuren des Medienelements enthält. Fügen Sie diesem Objekt einen Listener für addtrack hinzu, um benachrichtigt zu werden, wenn neue Audiospuren zum Element hinzugefügt werden.

HTMLMediaElement.videoTracks

Eine VideoTrackList, die alle Videospuren des Medienelements enthält. Fügen Sie diesem Objekt einen addtrack-Listener hinzu, um benachrichtigt zu werden, wenn Videospuren zum Element hinzugefügt werden.

HTMLMediaElement.textTracks

Eine TextTrackList, die alle Textspuren des Medienelements enthält (die für Untertitel, geschlossene Captions usw. verwendet werden). Fügen Sie diesem Objekt einen addtrack-Listener hinzu, um benachrichtigt zu werden, wenn Textspuren zum Element hinzugefügt werden.

Zum Beispiel können Sie, um zu erkennen, wann Audiospuren zu einem <video>-Element hinzugefügt oder daraus entfernt werden, Code wie diesen verwenden:

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Dieser Code überwacht, dass Audiospuren dem Element hinzugefügt oder davon entfernt werden, und ruft eine hypothetische Funktion in einem Spur-Editor auf, um die Spur in der Liste der verfügbaren Spuren des Editors zu registrieren und zu entfernen.

Sie können auch addEventListener() verwenden, um auf die Ereignisse addtrack und removetrack zu hören.

Wenn der MIME-Typ für das Video auf dem Server nicht korrekt eingestellt ist, wird das Video möglicherweise nicht angezeigt oder zeigt ein graues Kästchen mit einem X (wenn JavaScript aktiviert ist).

Wenn Sie den Apache-Webserver verwenden, um WebM-Videos bereitzustellen, können Sie dieses Problem beheben, indem Sie die Videodateityperweiterungen dem video/webm-MIME-Typ hinzufügen (die häufigste WebM-Dateierweiterung ist .webm). Dazu bearbeiten Sie die Datei mime.types in /etc/apache oder verwenden die AddType-Konfigurationsdirektive in httpd.conf:

AddType video/webm .webm

Ihr Webhost kann eine einfache Schnittstelle zur Änderung der MIME-Typ-Konfiguration für neue Technologien anbieten, bis ein globales Update natürlich erfolgt.

Videos sollten sowohl Captions als auch Transkripte enthalten, die ihren Inhalt genau beschreiben (siehe Hinzufügen von Captions und Untertiteln zu HTML-Videos für mehr Informationen darüber, wie Sie diese implementieren). Captions ermöglichen es Personen mit Hörverlust, den Audioinhalt eines Videos zu verstehen, während das Video abgespielt wird, während Transkripte Personen, die zusätzliche Zeit benötigen, ermöglichen, Audioinhalte in einem Tempo und Format zu überprüfen, das für sie angenehm ist.

Es ist erwähnenswert, dass Sie zwar auch Audio-Medien untertiteln können, dies jedoch nur möglich ist, wenn Sie Audio in einem <video>-Element abspielen, da die Videoregion des Elements verwendet wird, um die Untertitel anzuzeigen. Dies ist eines der besonderen Szenarien, in denen es nützlich ist, Audio in einem Videoelement abzuspielen.

Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, den erstellten Inhalt zu überprüfen, um sicherzustellen, dass er die Quelle des Videos genau repräsentiert.

Neben dem gesprochenen Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen übermitteln. Dazu gehören Emotionen und Tonalität:

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

Untertitel sollten das Hauptmotiv des Videos nicht verdecken. Sie können mit der align-VTT-Cue-Einstellung positioniert werden.

• Web Video Text Tracks Format (WebVTT)
• WebAIM: Captions, Transcripts, and Audio Descriptions
• MDN Understanding WCAG, Leitlinie 1.2 Erklärungen
• Verstehen des Erfolgskriteriums 1.2.1 | W3C Verstehen von WCAG 2.0
• Verstehen des Erfolgskriteriums 1.2.2 | W3C Verstehen von WCAG 2.0

Dieses Beispiel spielt ein Video ab, wenn es aktiviert wird, und bietet dem Benutzer die standardmäßigen Videosteuerungen des Browsers zur Steuerung der Wiedergabe.

HTML

<!-- Basic video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
  and watch it with your favorite video player!
</video>

Ergebnis

Bis das Video mit der Wiedergabe beginnt, wird das im poster-Attribut angegebene Bild an seiner Stelle angezeigt. Wenn der Browser die Videowiedergabe nicht unterstützt, wird der Fallback-Text angezeigt.

Dieses Beispiel baut auf dem vorherigen auf und bietet drei verschiedene Quellen für die Medien an; dadurch kann das Video angesehen werden, unabhängig davon, welche Videocodecs vom Browser unterstützt werden.

HTML

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a
    href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    download="ed_1024_512kb.mp4">
    download the MP4
  </a>
  and watch it with your favorite video player!
</video>

Ergebnis

Zuerst wird AVI versucht. Wenn das nicht abgespielt werden kann, wird MP4 versucht. Eine Fallback-Nachricht wird angezeigt, wenn das Videoelement nicht unterstützt wird, jedoch nicht, falls alle Quellen fehlschlagen.

Einige Mediendateitypen ermöglichen spezifischere Informationen durch den codecs-Parameter als Teil der Dateitypzeichenfolge. Ein relativ einfaches Beispiel ist video/webm; codecs="vp8, vorbis", was besagt, dass die Datei ein WebM-Video mit VP8 für das Video und Vorbis für Audio ist.

• Leitfaden zu Medientypen und Formaten im Web

  • Mediencontainerformate (Dateitypen)
  • Leitfaden zu Web-Video-Codecs
  • Leitfaden zu Web-Audio-Codecs

• Positionierung und Größenanpassung des Bildes innerhalb des Rahmens: object-position und object-fit

• <audio>

• HTML-Video und -Audio

• Manipulieren von Videos mit Canvas

• Serverkonfiguration für Ogg-Medien