<video>: Das Video-Einbettungselement

<video controls width="250">
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />

  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  or
  <a href="/shared-assets/videos/flower.mp4">MP4</a>
  video.
</video>

Das obige Beispiel zeigt, wie das <video>-Element verwendet wird. Ähnlich wie beim <img>-Element geben wir den Pfad zur anzuzeigenden Mediendatei im src-Attribut an; wir können andere Attribute hinzufügen, um Informationen wie Videobreite und -höhe zu spezifizieren, ob es automatisch abspielen und in Schleife wiedergeben soll oder ob die standardmäßigen Videosteuerungen des Browsers angezeigt werden sollen 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 angegeben, beginnt das Video sofort mit der Wiedergabe, sobald es ohne Unterbrechung zum Laden der Daten möglich ist.

Hinweis: Moderne Browser blockieren Audio (oder Videos mit nicht stummgeschaltetem Audiotrack) vor dem automatischen Abspielen, da Websites, die automatisch Audio abspielen, für Benutzer eine unangenehme Erfahrung sein können. Siehe unser Autoplay-Leitfaden für zusätzliche Informationen zur korrekten Verwendung von Autoplay.

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

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, mit denen der Benutzer die Videowiedergabe steuern kann, einschließlich Lautstärke, Suchen und Pause/Fortsetzen der Wiedergabe.

controlslist

Das controlslist Attribut hilft dem Browser, auszuwählen, welche Steuerungen für das video-Element angezeigt werden sollen, wenn der Browser sein eigenes Set von Steuerungen zeigt (das heißt, wenn das controls-Attribut spezifiziert ist).

Die erlaubten Werte sind nodownload, nofullscreen und noremoteplayback.

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

crossorigin

Dieses enumerierte Attribut gibt an, ob CORS verwendet werden soll, um das zugehörige Video abzurufen. CORS-fähige Ressourcen können im <canvas>-Element verwendet werden, ohne verunreinigt zu werden. Die erlaubten Werte sind:

anonymous

Sendet eine anonyme CORS-Anfrage ohne Anmeldeinformationen. Mit anderen Worten, es sendet den Origin: HTTP-Header ohne ein Cookie, X.509-Zertifikat oder die Durchführung von HTTP-Basisauthentifizierung. Falls der Server keine Anmeldeinformationen an die Ursprungsseite sendet (durch das Nichtsetzen des Access-Control-Allow-Origin: HTTP-Headers), wird die Ressource verunreinigt, und ihre Verwendung wird eingeschränkt.

use-credentials

Sendet eine CORS-Anfrage mit Anmeldeinformationen. Das heißt, es sendet den Origin: HTTP-Header mit einem Cookie, einem Zertifikat oder der Durchführung von HTTP-Basisauthentifizierung. Falls der Server keine Anmeldeinformationen an die Ursprungsseite gibt (durch den Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource verunreinigt und ihre Verwendung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgerufen (d.h. ohne den Origin: HTTP-Header zu senden), wodurch ihre nicht verunreinigte Verwendung in <canvas>-Elementen verhindert wird. Wenn ungültig, wird sie behandelt, als ob das enumerierte Schlüsselwort anonymous verwendet wurde. Siehe CORS-Einstellungen Attribute für zusätzliche Informationen.

disablepictureinpicture

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

disableremoteplayback

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

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

height

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

loop

Ein Boolesches Attribut; wenn angegeben, springt der Browser automatisch zum Beginn zurück, nachdem er das Ende des Videos erreicht hat.

muted

Ein Boolesches Attribut, das die Standardeinstellung für die Audiostummschaltung im Video angibt. Wenn gesetzt, wird das Audio zu Beginn stummgeschaltet. Der Standardwert ist false, was bedeutet, dass das Audio abgespielt wird, 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 Vollbildmodus 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 Posterbild angezeigt.

preload

Dieses enumerierte Attribut soll einen Hinweis darauf geben, was der Autor für die beste Benutzererfahrung beim Laden von Inhalten, bevor das Video abgespielt wird, hält. Es kann einen der folgenden Werte haben:

• none: Gibt an, dass das Video nicht vorab geladen werden soll.
• metadata: Gibt an, dass nur die Metadaten des Videos (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 nutzt.
• leerer String: Ein Synonym für den auto-Wert.

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

Hinweis:

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

src

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

width

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

Browser unterstützen nicht alle dieselben Videoformate; Sie können mehrere Quellen innerhalb geschachtelter <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 umfassenden und gründlichen Leitfaden zu Mediendateiformaten und den Leitfaden zu den unterstützten Codecs für Video. Ebenfalls verfügbar ist ein Leitfaden zu Audiocodecs, die mit ihnen verwendet werden können.

Weitere Nutzungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, wird das Video nicht die Standardsteuerungen des Browsers enthalten; Sie können eigene benutzerdefinierte Steuerungen mit JavaScript und der HTMLMediaElement API erstellen. Siehe Erstellen eines plattformübergreifenden Videoplayers für weitere Details.
• Um präzise Kontrolle über Ihre Video- (und Audio-)Inhalte zu ermöglichen, feuern HTMLMediaElements viele verschiedene Ereignisse ab. Neben der Bereitstellung von Kontrollierbarkeit können Sie durch diese Ereignisse den Fortschritt sowohl des Downloads als auch der Wiedergabe des Mediums überwachen, ebenso wie den Wiedergabe-/Abspielstatus und die Position.
• Sie können die object-position-Eigenschaft verwenden, um die Positionierung des Videos innerhalb des Rahmens des Elements zu justieren, und die object-fit-Eigenschaft, um zu steuern, wie die Größe des Videos angepasst wird, um innerhalb des Rahmens zu passen.
• Um Untertitel/Untertitel zusammen mit Ihrem Video anzuzeigen, können Sie etwas JavaScript zusammen mit dem <track>-Element und dem WebVTT-Format verwenden. Siehe Hinzufügen von Untertiteln und Untertiteln zu HTML-Video für weitere Informationen.
• Sie können Audiodateien mit einem <video>-Element abspielen. Dies kann nützlich sein, wenn Sie zum Beispiel Audio mit einem WebVTT Transkript wiedergeben müssen, da das <audio>-Element keine Bildunterschriften mit WebVTT erlaubt.
• Um den Fallback-Inhalt bei Browsern zu testen, die das Element unterstützen, können Sie <video> durch ein nicht existierendes Element wie <notavideo> ersetzen.

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

Das <video>-Element ist ein ersetztes Element – sein 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 beim Styling von <video>; eine häufige Strategie besteht darin, ihm einen display-Wert von block zu geben, um es einfacher zu positionieren, zu dimensionieren usw., und dann Styling und Layoutinformationen nach Bedarf bereitzustellen. Grundlagen zur Gestaltung von Videoplayern bieten einige nützliche Styling-Techniken.

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

Zum Beispiel lautet der HTML-Code unten, dass die Datei "captions.vtt" enthalten ist, welche verwendet wird, um geschlossene Untertitel im Video zu überlagern, falls vom Benutzer aktiviert.

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

Zeitgesteuerte Textspuren können auch programmgesteuert mit der WebVTT API hinzugefügt werden.

Sie können erkennen, wann Spuren zu einem <video>-Element hinzugefügt und von ihm entfernt werden, indem Sie die addtrack und removetrack Ereignisse verwenden. Diese Ereignisse werden jedoch nicht direkt an das <video>-Element selbst gesendet. Stattdessen werden sie an das Tracklist-Objekt innerhalb des <video>-Elements gesendet, das zu der Art von Spur gehört, die zu 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 Audiotracks 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 Videotracks zum Element hinzugefügt werden.

HTMLMediaElement.textTracks

Eine TextTrackList, die alle Textspuren des Medienelements enthält (welche für Untertitel, geschlossene Untertitel 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, um zu erkennen, wann Audiotracks zu einem <video>-Element hinzugefügt oder entfernt werden, können Sie so einen Code 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, wann Audiotracks hinzugefügt und entfernt werden, und ruft hypothetisch eine Funktion in einem Track-Editor auf, um den Track in der Liste der verfügbaren Tracks des Editors zu registrieren und zu entfernen.

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

Wenn der MIME-Typ für das Video auf dem Server nicht korrekt gesetzt ist, wird das Video möglicherweise nicht angezeigt oder zeigt ein graues Feld 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 Video-Dateityp-Erweiterungen dem video/webm MIME-Typ hinzufügen (die häufigste WebM-Dateierweiterung ist .webm). Um dies zu tun, bearbeiten Sie die Datei mime.types in /etc/apache oder verwenden Sie die AddType-Konfigurationsanweisung in httpd.conf:

AddType video/webm .webm

Ihr Webhoster bietet möglicherweise ein einfaches Interface für MIME-Typ-Konfigurationsänderungen für neue Technologien an, bis ein globales Update natürlich erfolgt.

Videos sollten sowohl Untertitel als auch Transkripte bereitstellen, die deren Inhalt genau beschreiben (siehe Hinzufügen von Untertiteln und Untertiteln zu HTML-Video für weitere Informationen zur Implementierung dieser). Untertitel ermöglichen es Menschen mit Hörbeeinträchtigungen, den Audioinhalt eines Videos zu verstehen, während das Video abgespielt wird. Transkripte ermöglichen es Personen, die zusätzliche Zeit benötigen, um Audioinhalte in einem Tempo und Format, das ihnen angenehm ist, überprüfen zu können.

Es sei darauf hingewiesen, dass während Sie Audio-only-Medien beschriften können, Sie dies nur tun können, wenn Audio in einem <video>-Element abgespielt wird, da der Videobereich des Elements verwendet wird, um die Untertitel darzustellen. Dies ist eines der speziellen Szenarien, in denen es nützlich ist, Audio in einem Videoelement abzuspielen.

Sollten automatische Untertitel-Dienste verwendet werden, ist es wichtig, den erstellten Inhalt zu überprüfen, um sicherzustellen, dass er die Videoinhalte korrekt wiedergibt.

Zusätzlich zu gesprochenem Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dazu gehören Emotionen und Ton:

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 Hauptthema des Videos nicht verdecken. Sie können mit der align VTT-Hinweis-Einstellung positioniert werden.

• Web Video Text Tracks Format (WebVTT)
• WebAIM: Untertitel, Transkripte und Audiobeschreibungen
• MDN Verständnis der WCAG, Erläuterungen zu Richtlinie 1.2
• Verstehen Erfolgskriterium 1.2.1 | W3C Verständnis WCAG 2.0
• Verstehen Erfolgskriterium 1.2.2 | W3C Verständnis WCAG 2.0

Dieses Beispiel spielt ein Video ab, wenn es aktiviert ist 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 startet, wird das im poster-Attribut angegebene Bild an seiner Stelle angezeigt. Wenn der Browser keine Videowiedergabe unterstützt, wird der Fallback-Text angezeigt.

Dieses Beispiel baut auf dem letzten auf und bietet drei verschiedene Quellen für das Medium; dadurch kann das Video unabhängig davon angesehen werden, 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, wenn alle Quellen fehlschlagen.

Einige Mediendateitypen ermöglichen es, spezifischere Informationen mit dem codecs-Parameter als Teil des Dateityp-Strings anzugeben. Zum Beispiel sagt video/webm; codecs="vp8, vorbis", dass die Datei ein WebM-Video ist, welches VP8 für sein Video und Vorbis für Audio verwendet.

• Leitfaden zu Medientypen und -formaten im Web

  • Mediencontainerformate (Dateitypen)
  • Web-Video-Codec-Leitfaden
  • Web-Audio-Codec-Leitfaden

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

• <audio>

• HTML Video und Audio

• Manipulation von Videos mit Canvas

• Konfigurieren von Servern für Ogg-Medien