<video>: Das Video-Embed-Element

<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 das <img>-Element beinhalten wir einen Pfad zu dem Medium, das wir im src-Attribut anzeigen möchten; wir können andere Attribute einschließen, um Informationen anzugeben, wie z.B. Videobreite und -höhe, ob wir wollen, dass es automatisch abgespielt und wiederholt wird, oder die Standardvideosteuerungen 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 es angegeben ist, beginnt das Video automatisch mit der Wiedergabe, sobald es ohne Anhalten mit dem Laden der Daten beginnen kann.

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

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

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, die dem Benutzer die Steuerung der Videowiedergabe ermöglichen, einschließlich Lautstärke, Suchen und Pause/Resume-Wiedergabe.

controlslist

Das controlslist-Attribut, wenn angegeben, hilft dem Browser bei der Auswahl der anzuzeigenden Steuerungen für das video-Element, wann immer der Browser seine eigene Steuerungssatz anzeigt (d.h. wenn das controls-Attribut angegeben ist).

Die erlaubten 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 verwandte Video abzurufen. CORS-fähige Ressourcen können im <canvas>-Element wiederverwendet werden, ohne verfälscht zu werden. Die zulässigen Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Anmeldeinformationen. Mit anderen Worten, es sendet den Origin: HTTP-Header ohne ein Cookie, X.509-Zertifikat oder Durchführung von HTTP-Basic-Authentifizierung. Wenn der Server der Ursprungsseite keine Anmeldeinformationen gibt (indem er den HTTP-Header Access-Control-Allow-Origin: nicht setzt), wird die Ressource verfälscht 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 Durchführung von HTTP-Basic-Authentifizierung. Wenn der Server der Ursprungsseite keine Anmeldeinformationen gibt (durch den HTTP-Header Access-Control-Allow-Credentials:), wird die Ressource verfälscht und ihre Verwendung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne eine CORS-Anfrage abgerufen (d.h. ohne den HTTP-Header Origin: zu senden), was ihre nicht verfälschte Verwendung in <canvas>-Elementen verhindert. Wenn ungültig, wird es 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 Boolean-Attribut, das verwendet wird, um die Fähigkeit der Fernwiedergabe auf Geräten zu deaktivieren, die mit kabelgebundenen (HDMI, DVI, etc.) und drahtlosen 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 Anzeigebereichs des Videos in CSS-Pixeln (nur absolute Werte; keine Prozentsätze).

loop

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

muted

Ein Boolean-Attribut, das die Standard-Einstellung für die Stummschaltung im Video angibt. Wenn gesetzt, wird das Audio zunächst stummgeschaltet. Der Standardwert istfalse, was bedeutet, dass das Audio abgespielt wird, wenn das Video abgespielt wird.

playsinline

Ein Boolean-Attribut, das angibt, dass das Video "inline", also innerhalb des Wiedergabebereichs des Elements, abgespielt wird. 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 Poster-Frame angezeigt.

preload

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

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

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

Hinweis:

• Das autoplay-Attribut hat Vorrang vor preload. Wenn autoplay angegeben ist, muss der Browser das Video zum Abspielen laden.
• 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-Pixeln (nur absolute Werte; keine Prozentsätze).

Browser unterstützen nicht alle das gleiche Videoformat; 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>

Bei Verwendung 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 usw. 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 umfassenden und gründlichen Leitfaden zu Mediendateitypen und den Leitfaden zu den unterstützten Codecs für Videos. Ebenfalls verfügbar ist ein Leitfaden zu Audiocodecs, die mit ihnen verwendet werden können.

Andere Verwendungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, enthält das Video nicht die Standardsteuerungen des Browsers; Sie können Ihre eigenen benutzerdefinierten Steuerungen mit JavaScript und der HTMLMediaElement-API erstellen. Weitere Einzelheiten finden Sie unter Erstellen eines plattformübergreifenden Videoplayers.
• Um genaue Kontrolle über Ihre Video- (und Audio-)Inhalte zu ermöglichen, lösen HTMLMediaElements viele verschiedene Ereignisse aus. Zusätzlich zur Steuerbarkeit ermöglichen Ihnen diese Ereignisse, den Fortschritt des Downloads und der Wiedergabe der Medien sowie den Wiedergabestatus und die Position zu überwachen.
• Sie können das object-position-Eigenschaft verwenden, um die Positionierung des Videos innerhalb des Rahmen des Elements anzupassen, und das object-fit-Eigenschaft, um zu steuern, wie die Größe des Videos innerhalb des Rahmens angepasst wird.
• Um Untertitel/Untertitel zusammen mit Ihrem Video anzuzeigen, können Sie etwas JavaScript zusammen mit dem <track>-Element und dem WebVTT-Format verwenden. Weitere Informationen finden Sie unter Hinzufügen von Untertiteln und Untertitel zu 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 Untertitel mit WebVTT ermöglicht.
• Um die Fallback-Inhalte 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 Einführungs-Tutorial.

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

Es gibt keine besonderen Überlegungen zum Styling 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 bei Bedarf Styling- und Layout-Informationen bereitzustellen. Grundlagen des Videoplayer-Stylings bietet einige nützliche Styling-Techniken.

Zeitgesteuerte Textspuren für Untertitel, geschlossene Untertitel, Kapitelüberschriften und so weiter können deklarativ hinzugefügt werden, indem das <track>-Element verschachtelt wird. Die Tracks sind im 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 Untertitel auf das Video zu überlagern, wenn Untertitel vom Benutzer aktiviert sind.

<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 und 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-Listenobjekt innerhalb des <video>-Elements gesendet, das dem hinzugefügten Tracktyp im entsprechenden HTMLMediaElement entspricht:

HTMLMediaElement.audioTracks

Eine AudioTrackList, die alle Audiospuren des Mediaelements 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 Mediaelements 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 Mediaelements 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.

Um beispielsweise zu erkennen, wann Audiospuren zu einem <video>-Element hinzugefügt oder daraus 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 überwacht das Hinzufügen und Entfernen von Audiospuren zum Element und ruft eine hypothetische Funktion auf einem Track-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 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 zeigt ein graues Kästchen mit einem X an (falls JavaScript aktiviert ist).

Wenn Sie den Apache-Webserver verwenden, um WebM-Videos bereitzustellen, können Sie dieses Problem beheben, indem Sie die Erweiterungen des Video-Dateityps zum video/webm-MIME-Typ hinzufügen (die häufigste WebM-Dateiendung 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 Webhoster bietet möglicherweise eine benutzerfreundliche Schnittstelle für MIME-Type-Konfigurationsänderungen für neue Technologien, bis ein globales Update natürlich erfolgt.

Videos sollten sowohl Untertitel als auch Transkripte enthalten, die ihre Inhalte genau beschreiben (siehe Hinzufügen von Untertiteln und Untertitel zu HTML-Video für weitere Informationen zur Implementierung). Untertitel ermöglichen es Menschen mit Hörverlust, die audiovisuelle Inhalte eines Videos während der Wiedergabe zu verstehen, während Transkripte Menschen helfen, die zusätzliche Zeit benötigen, um die Audioinhalte in einem für sie angenehmen Tempo und Format überprüfen zu können.

Es ist erwähnenswert, dass Sie, während Sie nur Audiomedien untertiteln können, dies nur tun können, indem Sie Audio in einem <video>-Element abspielen, da die Videoregion des Elements verwendet wird, um die Untertitel darzustellen. Dies ist eine der speziellen Szenarien, in denen es nützlich ist, Audio in einem Videoelement abzuspielen.

Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, die generierten Inhalte zu überprüfen, um sicherzustellen, dass sie das Quellvideo genau wiedergeben.

Neben dem gesprochenen Dialog sollen auch Untertitel und Transkripte 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 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 stellt dem Benutzer die Standardsteuerungen des Browsers zur Steuerung der Wiedergabe zur Verfügung.

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 es, das Video anzusehen, 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 Video-Element nicht unterstützt wird, aber nicht, wenn alle Quellen fehlschlagen.

Einige Mediendateitypen ermöglichen es Ihnen, genauere Informationen mit dem codecs-Parameter als Teil des Dateityp-Strings bereitzustellen. Zum Beispiel sagt video/webm; codecs="vp8, vorbis", dass es sich um ein WebM-Video handelt, das VP8 für sein Video und Vorbis für Audio verwendet.

• Leitfaden zu Medientypen und Formaten im Web

  • Mediencontainerformate (Dateitypen)
  • Leitfaden für Web-Video-Codecs
  • Leitfaden für Web-Audio-Codecs

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

• <audio>

• HTML Video und Audio

• Manipulation von Videos mit Canvas

• Konfigurieren von Servern für Ogg-Medien