`<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 fügen wir einen Pfad zu dem Medium ein, das wir im src-Attribut anzeigen möchten. Wir können andere Attribute einfügen, um Informationen wie Videobreite und -höhe anzugeben, ob wir möchten, dass es automatisch abgespielt und wiederholt wird oder ob die Standard-Videosteuerungen des Browsers angezeigt werden sollen, und so weiter.

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 dieses Element die globalen Attribute.

autoplay

Ein Boolean-Attribut; wenn angegeben, beginnt das Video automatisch, so schnell es kann, ohne anzuhalten, um das Laden der Daten abzuschließen, mit der Wiedergabe.

Hinweis: Moderne Browser blockieren Audio (oder Videos mit einem nicht stumm geschalteten Audiotrack) vom automatischen Abspielen, da Websites, die automatisch Audio abspielen, eine unangenehme Erfahrung für Benutzer darstellen können. Weitere Informationen zur ordnungsgemäßen Verwendung von Autoplay finden Sie in unserem Autoplay-Leitfaden.

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

controls

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

controlslist

Das controlslist-Attribut hilft bei der Angabe, welche Steuerelemente dem Benutzer für das video-Element angezeigt werden sollen, wenn der Browser den eigenen Satz von Steuerelementen anzeigt (d.h. wenn das controls-Attribut angegeben ist).

Erlaubte 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 aufzählbare Attribut gibt an, ob CORS verwendet werden soll, um das zugehörige Video abzurufen. CORS-fähige Ressourcen können im <canvas>-Element ohne Verunreinigung wiederverwendet werden. Die erlaubten Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Anmeldeinformationen. Mit anderen Worten, es sendet den Origin: HTTP-Header ohne Cookie, X.509-Zertifikat oder Durchführung einer HTTP-Basic-Authentifizierung. Wenn der Server keine Anmeldeinformationen für die Ursprungsseite bereitstellt (indem der Access-Control-Allow-Origin: HTTP-Header nicht gesetzt wird), wird die Ressource als verunreinigt betrachtet und ihre Verwendung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit Anmeldeinformationen. Mit anderen Worten, es sendet den Origin: HTTP-Header mit einem Cookie, einem Zertifikat oder führt eine HTTP-Basic-Authentifizierung durch. Wenn der Server der Ursprungsseite keine Anmeldeinformationen bereitstellt (durch den Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource als verunreinigt betrachtet 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 unverunreinigte Verwendung in <canvas>-Elementen verhindert. Ist sie ungültig, wird sie behandelt, als wäre das aufgezählte Schlüsselwort anonymous verwendet worden. Weitere Informationen finden Sie in den CORS-Einstellungsattributen.

disablepictureinpicture

Verhindert, dass der Browser ein Picture-in-Picture-Kontextmenü vorschlägt oder in manchen Fällen automatisch Picture-in-Picture anfordert.

disableremoteplayback

Ein Boolean-Attribut, das die Möglichkeit der Fernwiedergabe in Geräten deaktiviert, die über kabelgebundene (HDMI, DVI usw.) und kabellose 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-Pixel] (https://drafts.csswg.org/css-values/#px) (nur absolute Werte; keine Prozentsätze).

loop

Ein Boolean-Attribut; wenn angegeben, wird der Browser automatisch zum Anfang zurückgespult, wenn das Ende des Videos erreicht ist.

muted

Ein Boolean-Attribut, das die Standardlautstärke des im Video enthaltenen Sounds angibt. Wenn gesetzt, wird der Ton zunächst stummgeschaltet. Der Standardwert ist false, was bedeutet, dass der Ton abgespielt wird, wenn das Video abgespielt wird.

playsinline

Ein Boolean-Attribut, das angibt, dass das Video "inline" abgespielt wird, 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 Posterframe angezeigt.

preload

Dieses aufzählbare Attribut soll dem Browser einen Hinweis darauf geben, was der Autor für die beste Benutzererfahrung hält, in Bezug darauf, welche Inhalte vor dem Abspielen des Videos geladen werden sollten. 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 sollen.
• auto: Gibt an, dass die gesamte Videodatei heruntergeladen werden kann, auch wenn nicht erwartet wird, dass sie vom Benutzer verwendet wird.
• leerer String: Ein Synonym für den auto-Wert.

Der Standardwert ist in jedem Browser unterschiedlich. Die Spezifikation empfiehlt, ihn auf metadata zu setzen.

Hinweis:

• Das autoplay-Attribut hat Vorrang vor preload. Wenn autoplay angegeben ist, muss der Browser offensichtlich mit dem Herunterladen des Videos für die 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 Videoblocks verwenden, um das einzubettende Video anzugeben.

width

Die Breite des Anzeigebereichs des Videos, in [CSS-Pixel] (https://drafts.csswg.org/css-values/#px) (nur absolute Werte; keine Prozentsätze).

Browser unterstützen nicht alle dieselben Videoformate; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente bereitstellen, 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>

Beim Verwenden von <source>-Elementen 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 am <video>-Element ausgelöst, nachdem alle Quellen fehlgeschlagen sind; error-Ereignisse werden nicht bei jedem einzelnen <source>-Element ausgelöst.

Wir bieten einen substanziellen und umfassenden Leitfaden zu Mediendateitypen und den Leitfaden zu den Codecs, die für Video unterstützt werden. Zusätzlich steht ein Leitfaden zu den Audiocodecs zur Verfügung, die damit verwendet werden können.

Weitere Nutzungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, enthält das Video nicht die Standardkontrollen des Browsers; Sie können Ihre eigenen benutzerdefinierten Steuerelemente mithilfe von JavaScript und der HTMLMediaElement-API erstellen. Weitere Details finden Sie unter Erstellen eines plattformübergreifenden Videoplayers.
• Um eine 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 Ihnen diese Ereignisse, den Fortschritt sowohl des Downloads als auch der Wiedergabe des Mediums sowie den Wiedergabe-Status 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 den Rahmen angepasst wird.
• Um Untertitel/Untertitel zusammen mit Ihrem Video anzuzeigen, können Sie JavaScript zusammen mit dem <track>-Element und dem WebVTT-Format verwenden. Weitere Informationen finden Sie unter Hinzufügen von Untertiteln und Untertiteln zum HTML-Video.
• Sie können Audiodateien mit einem <video>-Element abspielen. Dies kann nützlich sein, wenn Sie beispielsweise Audio mit einem WebVTT-Transkript ausführen müssen, da das <audio>-Element keine Beschriftungen 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 Einsteiger-Tutorial.

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

Es gibt keine besonderen Überlegungen zur Stilgestaltung von <video>; eine übliche Strategie besteht darin, ihm einen display-Wert von block zu geben, um es einfacher zu positionieren, zu dimensionieren usw., und dann die erforderlichen Stil- und Layoutinformationen bereitzustellen. Grundlagen der Videoplayer-Stilgestaltung bieten einige nützliche Stiltechniken.

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

Zum Beispiel enthält das untenstehende HTML die Datei "captions.vtt", die verwendet wird, um Untertitel auf dem Video zu überlagern, 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, wann Tracks zu einem <video>-Element hinzugefügt oder von diesem 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-Listen-Objekt innerhalb des <video>-Elements gesendet, das dem Typ des hinzugefügten Tracks 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 Audio-Tracks 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 Text-Tracks des Medienelements enthält (die für Untertitel, geschlossene Bildunterschriften usw. verwendet werden). Fügen Sie diesem Objekt einen addtrack-Listener hinzu, um benachrichtigt zu werden, wenn Text-Tracks zum Element hinzugefügt werden.

Um beispielsweise zu erkennen, wann Audio-Tracks zu einem <video>-Element hinzugefügt oder von diesem entfernt werden, können Sie einen 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 beobachtet, wann Audio-Tracks zum Element hinzugefügt oder von diesem entfernt werden, 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 für das Video auf dem Server nicht korrekt gesetzt ist, wird das Video möglicherweise nicht angezeigt oder es wird ein graues Kästchen mit einem X angezeigt (wenn JavaScript aktiviert ist).

Wenn Sie Apache Webserver verwenden, um WebM-Videos bereitzustellen, 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). Um dies zu tun, bearbeiten Sie die mime.types-Datei in /etc/apache oder verwenden Sie die AddType-Konfigurationsrichtlinie in httpd.conf:

AddType video/webm .webm

Ihr Webhost kann eine einfache Schnittstelle für MIME-Typ-Konfigurationsänderungen für neue Technologien bereitstellen, 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 Untertiteln zum HTML-Video für weitere Informationen zur Implementierung dieser). Untertitel ermöglichen es Menschen mit Hörverlust, den Audioinhalt eines Videos während der Wiedergabe zu verstehen, während Transkripte es Menschen ermöglichen, die zusätzliche Zeit benötigen, den Audioinhalt in einem Tempo und Format zu überprüfen, das für sie angenehm ist.

Es ist erwähnenswert, dass Sie zwar Audio-Only-Medien untertiteln können, dies jedoch nur tun können, wenn Sie Audio in einem <video>-Element abspielen, da die Videoregion des Elements zur Anzeige der Untertitel verwendet wird. Dies ist eines der speziellen Szenarien, in denen 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 genau darstellt.

Neben gesprochenem Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dies schließt Emotionen 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 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, Guideline 1.2 explanations
• Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0

Dieses Beispiel spielt ein Video ab, wenn es aktiviert wird, und bietet dem Benutzer die Standard-Videosteuerungen des Browsers an, 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 bereitgestellte Bild an seiner Stelle angezeigt. Wenn der Browser die Videowiedergabe nicht unterstützt, zeigt er den Fallback-Text an.

Dieses Beispiel baut auf dem letzten auf und bietet drei verschiedene Quellen für das Medium an; so kann das Video unabhängig davon angesehen werden, 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 ausprobiert. 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 Medien-Dateitypen erlauben es, spezifischere Informationen mit dem codecs-Anzeigeparameter in der Typzeichenfolge der Datei bereitzustellen. Zum Beispiel gibt video/webm; codecs="vp8, vorbis" an, dass die Datei ein WebM-Video ist, das für Video VP8 und für Audio Vorbis verwendet.

• Leitfaden zu Medientypen und -formaten im Web

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

• Positionieren und Anpassen der Größe des Bildes innerhalb seines Rahmens: object-position und object-fit

• <audio>

• HTML-Video und -Audio

• Manipulieren von Videos mit Canvas

• Konfigurieren von Servern für Ogg-Medien