<video>: Das Videoeinbettungselement

<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 man das <video>-Element verwendet. Ähnlich wie beim <img>-Element fügen wir einen Pfad zu dem Medium, das wir anzeigen möchten, im src-Attribut ein; wir können weitere Attribute hinzufügen, um Informationen wie Videobreite und -höhe anzugeben, ob es automatisch abspielen und wiederholen soll oder ob die Standardeinstellungen des Browsers für Videosteuerungen angezeigt werden sollen, und so weiter.

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 automatisch mit der Wiedergabe, sobald es kann, ohne anzuhalten, um das Herunterladen der Daten abzuschließen.

Hinweis: Moderne Browser blockieren Audio (oder Videos mit einem nicht stummgeschalteten Audiotrack) 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 weitere Informationen zur ordnungsgemäßen Verwendung von Autoplay.

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

controls

Ist dieses Attribut vorhanden, bietet der Browser Steuerungen an, die es dem Benutzer ermöglichen, die Videowiedergabe zu steuern, einschließlich Lautstärke, Suchlauf und Pause/Wiedergabe.

controlslist

Das controlslist-Attribut hilft bei Angabe, welche Steuerungen für das video-Element angezeigt werden sollen, wann auch immer der Browser seine eigenen Steuerungen anzeigt (das heißt, wenn das controls-Attribut angegeben wird).

Die erlaubten Werte sind nodownload, nofullscreen und noremoteplayback.

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

crossorigin

Dieses enumerierte Attribut gibt an, ob CORS verwendet wird, um das zugehörige Video abzurufen. Ressourcen mit CORS-Unterstützung können im <canvas>-Element ohne Beschädigung wiederverwendet werden. Die zulässigen Werte sind:

anonymous

Sendet eine Anfrage über Ursprungsgrenzen hinweg ohne Anmeldeinformationen. Anders ausgedrückt sendet es den Origin:-HTTP-Header ohne Cookie, X.509-Zertifikat oder Durchführung einer HTTP-Basis-Authentifizierung. Gibt der Server keine Anmeldeinformationen an die Ursprungsseite (indem er den Access-Control-Allow-Origin:-HTTP-Header nicht setzt), wird die Ressource beschädigt, und ihre Verwendung eingeschränkt.

use-credentials

Sendet eine Anfrage über Ursprungsgrenzen hinweg mit Anmeldeinformationen. Anders ausgedrückt sendet es den Origin:-HTTP-Header mit einem Cookie, einem Zertifikat oder Durchführung einer HTTP-Basis-Authentifizierung. Gibt der Server keine Anmeldeinformationen an die Ursprungsseite (durch den Access-Control-Allow-Credentials:-HTTP-Header), wird die Ressource beschädigt und ihre Verwendung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgerufen (d.h. ohne den Origin:-HTTP-Header zu senden), was ihre unbeschädigte Nutzung in <canvas>-Elementen verhindert. Wenn ungültig, wird es behandelt, als ob das enumerierte Schlüsselwort anonymous verwendet worden wäre. Weitere Informationen finden Sie unter CORS-Einstellungen für Attribute.

disablepictureinpicture

Verhindert, dass der Browser ein Picture-in-Picture-Kontextmenü vorschlägt oder manchmal automatisch das Picture-in-Picture anfragt.

disableremoteplayback

Ein boolesches Attribut, das verwendet wird, um die Fähigkeit zur Remote-Wiedergabe auf Geräten zu deaktivieren, die über kabelgebundene (HDMI, DVI usw.) 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 Anzeigebereichs des Videos, in CSS-Pixeln (nur absolute Werte; keine Prozentsätze).

loop

Ein boolesches Attribut; wenn angegeben, springt der Browser automatisch zurück zum Anfang, wenn das Ende des Videos erreicht ist.

muted

Ein boolesches Attribut, das die Standardeinstellung für das Stummschalten des im Video enthaltenen Audios angibt. Wenn gesetzt, wird das Audio zu Beginn stumm geschaltet. Der Standardwert ist false, das heißt, das Audio wird abgespielt, wenn das Video abgespielt wird.

playsinline

Ein boolesches Attribut, das angibt, dass das Video „inline“ abgespielt wird, das heißt, innerhalb des Wiedergabebereichs des Elements. Beachten Sie, dass das Fehlen dieses Attributs nicht bedeutet, 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 wird, wird nichts angezeigt, bis das erste Frame verfügbar ist; dann wird das erste Frame als Posterbild angezeigt.

preload

Dieses enumerierte Attribut soll dem Browser einen Hinweis darauf geben, was der Autor für das beste Benutzererlebnis hinsichtlich des Inhalts hält, der vor dem Abspielen des Videos geladen wird. Es kann einen der folgenden Werte haben:

• none: Gibt an, dass das Video nicht vorab geladen 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 der Benutzer sie voraussichtlich nicht verwendet.
• leere Zeichenkette: Ein Synonym für den Wert auto.

Der Standardwert ist für jeden Browser unterschiedlich. Die Spezifikation rät, 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 die gleichen Videoformate; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente bereitstellen, und der Browser verwendet dann den ersten, den 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>

Wenn Sie <source>-Elemente verwenden, versucht der Browser, jede Quelle nacheinander zu laden. Wenn eine Quelle fehlschlägt (z.B. aufgrund einer ungültigen URL oder eines nicht unterstützten Formats), wird die nächste Quelle versucht, und so weiter. Ein error-Ereignis wird auf dem <video>-Element ausgelöst, nachdem alle Quellen fehlgeschlagen sind; error-Ereignisse werden nicht auf jedem einzelnen <source>-Element ausgelöst.

Wir bieten einen umfangreichen und gründlichen Leitfaden zu Medien-Dateitypen und den Leitfaden zu den unterstützten Codecs für Video. Ebenfalls verfügbar ist ein Leitfaden zu Audio-Codecs, die mit ihnen verwendet werden können.

Weitere Verwendungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, wird das Video nicht die Standardsteuerelemente des Browsers enthalten; Sie können Ihre eigenen benutzerdefinierten Steuerelemente 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, lösen HTMLMediaElements viele verschiedene Ereignisse aus. Zusätzlich zur Bereitstellung von Kontrollierbarkeit, ermöglichen diese Ereignisse die Überwachung des Fortschritts sowohl des Downloads 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 Elementrahmens einzustellen, und die object-fit-Eigenschaft, um zu steuern, wie die Größe des Videos angepasst wird, um in den Rahmen zu passen.
• Um Untertitel bei Ihrem Video anzuzeigen, können Sie JavaScript zusammen mit dem <track>-Element und dem WebVTT-Format verwenden. Siehe Hinzufügen von Untertiteln und Bildunterschriften zu HTML5-Video 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 erlaubt.
• Um den Fallback-Inhalt in 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 HTML-Video- und Audio-Tutorial für Anfänger.

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

Es gibt keine besonderen Überlegungen beim Styling von <video>; eine gängige Strategie ist es, ihm einen display-Wert von block zu geben, um es leichter zu positionieren und zu dimensionieren, etc., und dann bei Bedarf Styling- und Layoutinformationen bereitzustellen. Grundlagen zur Videoplayer-Bereitstellung bieten 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 sind in Web Video Text Tracks File Format (WebVTT) (.vtt-Dateien) angegeben.

Zum Beispiel enthält das untenstehende HTML die Datei "captions.vtt", die verwendet wird, um geschlossene Untertitel auf das Video zu legen, wenn Untertitel vom Benutzer aktiviert werden.

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

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

Sie können erkennen, wann Spuren zu einem <video>-Element hinzugefügt oder daraus 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 Spurlistenobjekt innerhalb des <video>-Elements gesendet, das im HTMLMediaElement die Art der hinzugefügten Spur entspricht:

HTMLMediaElement.audioTracks

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

Zum Beispiel können Sie Code wie diesen verwenden, um zu erkennen, wann Audiotracks zu einem <video>-Element hinzugefügt oder daraus 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 aus dem Element und ruft eine hypothetische Funktion auf einem Track-Editor auf, um den Track in die Liste der verfügbaren Tracks des Editors aufzunehmen und daraus zu entfernen.

Sie können auch addEventListener() verwenden, um die addtrack und removetrack Ereignisse 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 einen grauen Kasten mit einem X (wenn JavaScript aktiviert ist).

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

AddType video/webm .webm

Ihr Webhoster bietet möglicherweise eine einfache Benutzeroberfläche zur Änderung der MIME-Typ-Konfiguration für neue Technologien, bis ein globales Update natürlich erfolgt.

Videos sollten sowohl Untertitel als auch Transkripte bereitstellen, die ihren Inhalt genau beschreiben (siehe Hinzufügen von Untertiteln und Bildunterschriften zu HTML5-Video für weitere Informationen zur Implementierung dieser). Untertitel ermöglichen es Personen mit Hörverlust, den Audioinhalt eines Videos während der Wiedergabe zu verstehen, während Transkripte es Personen ermöglichen, die zusätzliche Zeit benötigen, den Audiocontent in einem für sie angenehmen Tempo und Format zu überprüfen.

Es ist erwähnenswert, dass, obwohl Sie nur Audio-Medien untertiteln können, dies nur möglich ist, wenn Sie Audio in einem <video>-Element abspielen, da der Videobereich des Elements verwendet wird, um die Untertitel darzustellen. Dies ist ein spezielles Szenario, in dem es nützlich ist, Audio in einem Videoelement abzuspielen.

Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, den generierten Inhalt zu überprüfen, um sicherzustellen, dass er die Quellvideo-Inhalte genau wiedergibt.

Zusätzlich zu gesprochenem Dialog sollten auch Musik und Soundeffekte, die wichtige Informationen kommunizieren, in den Untertiteln und Transkripten identifiziert werden. Dies schließt Emotion und Ton ein:

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 behindern. Sie können mit dem align VTT-Cue-Setting positioniert werden.

• Web Video Text Tracks Format (WebVTT)
• WebAIM: Captions, Transcripts, and Audio Descriptions
• MDN Verständnis der WCAG-Erklärungen, Richtlinie 1.2
• Verständnis der Erfolgskriterien 1.2.1 | W3C Verständnis der WCAG 2.0
• Verständnis der Erfolgskriterien 1.2.2 | W3C Verständnis der WCAG 2.0

Dieses Beispiel spielt ein Video ab, wenn es aktiviert wird und gibt 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 zu spielen 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 letzten auf und bietet drei verschiedene Quellen für das Medium an; dies ermöglicht das Ansehen des Videos unabhängig davon, welche Video-Codecs 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 probiert. Eine Fallback-Nachricht wird angezeigt, wenn das Videoelement nicht unterstützt wird, jedoch nicht, wenn alle Quellen fehlschlagen.

Einige Mediadateitypen erlauben es, spezifischere Informationen mit dem codecs-Parameter als Teil des Dateityp-Strings bereitzustellen. Zum Beispiel sagt video/webm; codecs="vp8, vorbis", dass die Datei ein WebM-Video ist, das 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 des Rahmens: object-position und object-fit

• <audio>

• HTML Video und Audio

• Manipulation von Videos mithilfe von Canvas

• Konfiguration von Servern für Ogg-Medien