<video>: Das Video-Einbettungselement

Das obige Beispiel zeigt die einfache Verwendung des <video>-Elements. Ähnlich wie beim <img>-Element fügen wir einen Pfad zu dem Medium hinzu, das wir im src-Attribut anzeigen möchten. Wir können weitere Attribute einfügen, um Informationen wie die Videobreite und -höhe anzugeben, ob es automatisch abgespielt und wiederholt werden soll oder um die standardmäßigen Videosteuerungen des Browsers anzuzeigen usw.

Der Inhalt zwischen den ö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 auch dieses Element die globalen Attribute.

autoplay

Ein boolesches Attribut; wenn angegeben, beginnt das Video automatisch mit der Wiedergabe, sobald es ohne Unterbrechung zum vollständigen Laden der Daten abgespielt werden kann.

Hinweis: Moderne Browser blockieren Audio (oder Videos mit einer nicht stummgeschalteten Tonspur) vom Autoplay, da Websites, die automatisch Audio abspielen, eine unangenehme Erfahrung für Nutzer sein können. Siehe unseren Autoplay-Leitfaden für zusätzliche Informationen darüber, wie Sie Autoplay korrekt verwenden.

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

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, um dem Benutzer die Kontrolle über die Videowiedergabe zu ermöglichen, einschließlich Lautstärkeeinstellung, Suchlauf und Pausieren/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 Steuerungsset zeigt (das heißt, wenn das controls-Attribut angegeben ist).

Erlaubte Werte sind nodownload, nofullscreen und noremoteplayback.

Verwenden Sie das disablepictureinpicture Attribut, wenn Sie den Bild-im-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 wiederverwendet werden, ohne verunreinigt zu werden. Erlaubte Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Berechtigung. Mit anderen Worten, es sendet den Origin: HTTP-Header ohne ein Cookie, X.509-Zertifikat oder Durchführung der HTTP-Basisauthentifizierung. Wenn der Server der Originalsite keine Berechtigungen gewährt (indem er den HTTP-Header Access-Control-Allow-Origin: nicht setzt), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit Berechtigung. Mit anderen Worten, es sendet den Origin: HTTP-Header mit einem Cookie, einem Zertifikat oder Durchführung der HTTP-Basisauthentifizierung. Wenn der Server der Originalsite keine Berechtigungen gewährt (durch den HTTP-Header Access-Control-Allow-Credentials:), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne eine CORS-Anfrage abgerufen (d. h. ohne Senden des Origin: HTTP-Headers), was ihre nicht verunreinigte Nutzung in <canvas>-Elementen verhindert. Wenn ungültig, wird es so behandelt, als wäre das enumerierte Schlüsselwort anonymous verwendet. Siehe CORS-Einstellungsattribute für zusätzliche Informationen.

disablepictureinpicture

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

disableremoteplayback

Ein boolesches Attribut, das verwendet wird, um die Fähigkeit zur Fernwiedergabe auf Geräten zu deaktivieren, die mit vernetzten (HDMI, DVI, etc.) und kabellosen Technologien (Miracast, Chromecast, DLNA, AirPlay, etc.) verbunden 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 Prozentwerte).

loop

Ein boolesches Attribut; wenn angegeben, wird der Browser automatisch zum Start zurückspringen, wenn das Ende des Videos erreicht wird.

muted

Ein boolesches Attribut, das die standardmäßige Audio-Stummschaltungseinstellung im Video angibt. Wenn gesetzt, bleibt der Ton zunächst stumm. Der Standardwert ist false, d.h. der Ton wird abgespielt, wenn das Video abgespielt wird.

playsinline

Ein boolesches Attribut, das angibt, dass das Video "inline" abgespielt werden soll, das heißt, innerhalb des Wiedergabebereichs des Elements. Beachten Sie, dass das Fehlen dieses Attributs nicht bedeutet, 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 ist dazu gedacht, dem Browser einen Hinweis darauf zu geben, was der Autor für die beste Benutzererfahrung in Bezug auf den Inhalt hält, der geladen wird, bevor das Video abgespielt wird. Es kann einen der folgenden Werte haben:

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

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 das Video offensichtlich zum Abspielen herunterladen.
• Die Spezifikation zwingt den Browser nicht, den Wert dieses Attributs zu befolgen; es ist ein reiner 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 Videoanzeigebereichs in CSS-Pixeln (nur absolute Werte; keine Prozentwerte).

Nicht alle Browser unterstützen die gleichen Videoformate; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente angeben, und der Browser wird dann die erste verwenden, 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 für Video unterstützten Codecs. Ebenfalls verfügbar ist ein Leitfaden zu Audiocodecs, die mit ihnen verwendet werden können.

Weitere Nutzungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, enthält das Video nicht die Standardeinstellungen des Browsers. Sie können eigene Steuerungen mit JavaScript und der HTMLMediaElement-API erstellen. Siehe Erstellung eines plattformübergreifenden Video-Players für weitere Details.
• Um eine präzise Kontrolle über Ihre Videos (und Audioinhalte) zu ermöglichen, lösen HTMLMediaElements viele verschiedene Ereignisse aus. Neben der Bereitstellung von Kontrollierbarkeit ermöglichen diese Ereignisse die Überwachung des Fortschritts von sowohl dem Herunterladen als auch der Wiedergabe des Mediums, sowie des Wiedergabestatus und der Position.
• 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 angepasst wird, um in den Rahmen zu passen.
• Um Untertitel zu Ihrem Video anzuzeigen, können Sie einige JavaScript zusammen mit dem <track>-Element und dem WebVTT-Format verwenden. Siehe Hinzufügen von Untertiteln zu HTML-Videos für weitere Informationen.
• Sie können Audiodateien mit einem <video>-Element abspielen. Dies kann nützlich sein, wenn Sie beispielsweise Audio mit einem WebVTT-Transkript wiedergeben müssen, da das <audio>-Element keine Untertitel 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 das Video- und Audiomaterial Einsteiger-Tutorial.

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 zum Styling von <video>; eine gängige Strategie ist es, ihm einen display-Wert von block zu geben, um es einfacher zu positionieren, zu skalieren usw., und dann Styling- und Layoutinformationen wie gewünscht bereitzustellen. Grundlagen des Video-Player-Stylings bietet einige nützliche Styling-Techniken.

Zeitgesteuerte Textspuren für Untertitel, geschlossene Untertitel, Kapitelüberschriften usw. können deklarativ hinzugefügt werden, indem das <track>-Element verschachtelt wird. Die Spuren werden im Web Video Text Tracks File Format (WebVTT) (.vtt-Dateien) spezifiziert.

Zum Beispiel enthält der folgende HTML-Code die Datei "captions.vtt", die verwendet wird, um geschlossene Untertitel auf dem Video einzublenden, wenn Untertitel vom Benutzer aktiviert werden.

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

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

Sie können erkennen, wenn Spuren zu einem <video>-Element hinzugefügt oder 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 Track-List-Objekt innerhalb des <video>-Elements gesendet, das dem Typ der hinzugefügten Spur entspricht:

HTMLMediaElement.audioTracks

Eine AudioTrackList, die alle Audio-Tracks 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 Video-Tracks des Medienelements enthält. Fügen Sie diesem Objekt einen addtrack-Listener hinzu, um benachrichtigt zu werden, wenn Video-Tracks zum Element hinzugefügt werden.

HTMLMediaElement.textTracks

Eine TextTrackList, die alle Textspuren des Medienelements enthält (die 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 können Sie Code wie diesen verwenden, um zu erkennen, wann Audiospuren zu oder von einem <video>-Element hinzugefügt oder entfernt werden:

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

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

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

Dieser Code überwacht das Hinzufügen und Entfernen von Audiotracks zum Element und ruft eine hypothetische 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 die addtrack- und removetrack-Ereignisse zu überwachen.

Wenn der MIME-Typ des Videos auf dem Server nicht korrekt eingestellt ist, wird das Video möglicherweise nicht angezeigt oder es wird ein graues Feld mit einem X angezeigt (wenn JavaScript aktiviert ist).

Wenn Sie den Apache-Webserver verwenden, um WebM-Videos bereitzustellen, können Sie dieses Problem beheben, indem Sie die Dateitypen-Erweiterungen der Videodatei dem MIME-Typ video/webm 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-Konfigurationsdirektive in httpd.conf:

AddType video/webm .webm

Ihr Webhost kann eine einfache Benutzeroberfläche zur Konfiguration von MIME-Typ-Änderungen für neue Technologien bereitstellen, bis ein globales Update von selbst erfolgt.

Videos sollten sowohl Untertitel als auch Transkripte bereitstellen, die ihren Inhalt genau beschreiben (siehe Hinzufügen von Untertiteln zu HTML-Videos für weitere Informationen zur Implementierung). Untertitel ermöglichen es Menschen, die von Hörverlust betroffen sind, den Audioinhalt eines Videos zu verstehen, während das Video abgespielt wird. Transkripte erlauben es Personen, die zusätzliche Zeit benötigen, audioinhalte in einem Tempo und Format zu überprüfen, das für sie angenehm ist.

Es ist erwähnenswert, dass während Sie Audio-Only-Medien untertiteln können, dies nur möglich ist, wenn die Audiodateien in einem <video>-Element abgespielt werden, da der Videobereich 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.

Falls automatische Untertitelungsdienste verwendet werden, ist es wichtig, die erstellten Inhalte zu überprüfen, um sicherzustellen, dass sie den ursprünglichen Videoinhalt genau repräsentieren.

Zusätzlich zum gesprochenen Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dies umfasst 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: Untertitel, Transkripte und Audiobeschreibungen
• MDN Benötigung von WCAG, Leitlinie 1.2 Erklärungen
• Erklärung des Erfolgskriteriums 1.2.1 | W3C Benötigung von WCAG 2.0
• Erklärung des Erfolgskriteriums 1.2.2 | W3C Benötigung von WCAG 2.0

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

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 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 das Medium; dies ermöglicht es, das Video unabhängig davon anzusehen, 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, aber nicht, wenn alle Quellen fehlschlagen.

Einige Medien-Dateitypen ermöglichen es Ihnen, spezifischere Informationen mit dem codecs-Parameter als Teil des Dateityps anzugeben. Ein relativ einfaches Beispiel ist video/webm; codecs="vp8, vorbis", welches angibt, dass es sich um ein WebM-Video handelt, das VP8 für Video und Vorbis für Audio verwendet.

• Leitfaden zu Medientypen und -formaten im Web

  • Mediencontainerformate (Dateitypen)
  • Leitfaden für Web-Videocodecs
  • Leitfaden für Web-Audiocodecs

• Positionieren und Größenanpassung des Bildes im Rahmen: object-position und object-fit

• <audio>

• Verwendung von HTML-Audio und -Video

• Manipulieren von Videos mit Canvas

• Konfigurieren von Servern für Ogg-Medien