<video>: Das Video-Einbettungselement

<video controls width="250">
  <source src="/https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm" />

  <source src="/https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="/https://developer.mozilla.org/shared-assets/videos/flower.webm">WEBM</a>
  or
  <a href="/https://developer.mozilla.org/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, das wir anzeigen möchten, im src-Attribut ein. Wir können andere Attribute hinzufügen, um Informationen wie Videobreite und -höhe anzugeben, ob wir es automatisch abspielen und wiederholen lassen möchten oder ob wir die Standard-Videosteuerung des Browsers anzeigen möchten.

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 boolean-Attribut; wenn angegeben, beginnt das Video automatisch mit der Wiedergabe, sobald es ohne Unterbrechung der Datenladung möglich ist.

Hinweis: Moderne Browser blockieren automatisch das Abspielen von Audio (oder Videos mit einer nicht stummgeschalteten Tonspur), da Websites, die automatisch Audio abspielen, für Benutzer eine unangenehme Erfahrung sein können. Sehen Sie unseren Autoplay-Leitfaden für zusätzliche Informationen zur korrekten 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

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

controlslist

Das controlslist-Attribut hilft dem Browser, auszuwählen, welche Steuerungen für das video-Element angezeigt werden sollen, wann immer der Browser seine eigene Steuerungssatz anzeigt (also, 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 aufgezählte Attribut gibt an, ob CORS verwendet werden soll, um das zugehörige Video abzurufen. CORS-aktivierte Ressourcen können im <canvas>-Element wiederverwendet werden, ohne verfälscht zu sein. Die erlaubten Werte sind:

anonymous

Sendet eine CORS-Anfrage ohne Anmeldeinformationen. Das bedeutet, dass der Origin:-HTTP-Header ohne Cookie, X.509-Zertifikat oder HTTP-Basisauthentifizierung gesendet wird. Wenn der Server keine Anmeldeinformationen an die Ursprungsseite liefert (indem er den Access-Control-Allow-Origin:-HTTP-Header nicht setzt), wird die Ressource verfälscht und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine CORS-Anfrage mit Anmeldeinformationen. Das bedeutet, dass der Origin:-HTTP-Header mit einem Cookie, einem Zertifikat oder bei der Durchführung einer HTTP-Basisauthentifizierung gesendet wird. Wenn der Server keine Anmeldeinformationen an die Ursprungsseite liefert (durch den Access-Control-Allow-Credentials:-HTTP-Header), wird die Ressource verfälscht und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgerufen (d. h. ohne den Origin:-HTTP-Header zu senden), was ihre unverfälschte Nutzung in <canvas>-Elementen verhindert. Wenn ungültig, wird sie so behandelt, als ob das aufgezählte Schlüsselwort anonymous verwendet wurde. Siehe CORS-Einstellungsattribute für weitere 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 die Fähigkeit zur Remote-Wiedergabe auf Geräten deaktiviert, die mit kabelgebundenen (HDMI, DVI usw.) und drahtlosen Technologien (Miracast, Chromecast, DLNA, AirPlay usw.) 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 Prozentangaben).

loop

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

muted

Ein Boolean-Attribut, das die Standardeinstellung für die Audiostummschaltung im Video angibt. Wenn aktiviert, wird der Ton zu Beginn 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 werden soll, also 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 ist, wird nichts angezeigt, bis der erste Frame verfügbar ist, dann wird der erste Frame als Postervorschau angezeigt.

preload

Dieses aufgezählte Attribut soll dem Browser einen Hinweis darauf geben, was der Autor für die beste Benutzererfahrung hält, in Bezug darauf, welcher Inhalt vor dem Abspielen des Videos geladen wird. Es kann einen der folgenden Werte haben:

• none: Gibt an, dass das Video nicht vorgeladen 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 nicht erwartet wird, sie zu verwenden.
• 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 nur ein Hinweis.

src

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

width

Die Breite des Videoanzeigebereichs in CSS-Pixeln (nur absolute Werte; keine Prozentangaben).

Browser unterstützen nicht alle das gleiche Videoformate; Sie können mehrere Quellen innerhalb verschachtelter <source>-Elemente bereitstellen, und der Browser verwendet dann das erste, das er versteht.

<video controls>
  <source src="m/https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/yVideo.webm" type="video/webm" />
  <source src="m/https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/yVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="m/https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/yVideo.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 auf dem <video>-Element ausgelöst, nachdem alle Quellen fehlgeschlagen sind; error-Ereignisse werden nicht auf den einzelnen <source>-Elementen ausgelöst.

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

Weitere Nutzungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, enthält das Video nicht die Standard-Steuerelemente des Browsers; Sie können Ihre eigenen benutzerdefinierten Steuerelemente mit JavaScript und der HTMLMediaElement API erstellen. Sehen Sie Erstellung eines plattformübergreifenden Videoplayers für weitere Details.
• 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 lassen Sie diese Ereignisse den Fortschritt des Downloads und der Wiedergabe des Mediums sowie den Wiedergabestatus und die Position überwachen.
• Sie können die object-position-Eigenschaft verwenden, um die Positionierung des Videos innerhalb des Elementrahmens anzupassen, und die object-fit-Eigenschaft, um zu steuern, wie die Größe des Videos angepasst wird, um innerhalb des Rahmens zu passen.
• Um Untertitel zusammen mit Ihrem Video anzuzeigen, können Sie etwas JavaScript zusammen mit dem <track>-Element und dem WebVTT Format verwenden. Sehen Sie Untertitel und Beschriftungen zu HTML-Video hinzufügen 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 ausführen 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>-Elementen ist das [HTML-Video- und Audio]-Beginner-Tutorial(/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_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 speziellen Überlegungen zum Styling von <video>; eine übliche Strategie besteht darin, ihm einen display-Wert von block zu geben, um es einfacher zu positionieren, zu skalieren usw., und dann Design- und Layoutinformationen nach Bedarf bereitzustellen. Grundlagen des Videoplayer-Stylings bietet einige nützliche Styling-Techniken.

Zeitgesteuerte Textspuren für Untertitel, Kapitelschlagzeilen 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) angegeben.

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

<video controls src="v/https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/ideo.webm">
  <track default kind="captions" src="c/https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/aptions.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 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 Spurlisten-Objekt innerhalb des <video>-Elements gesendet, das der 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 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 hinzugefügt werden.

HTMLMediaElement.textTracks

Eine TextTrackList, die alle Texttracks 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 Texttracks hinzugefügt werden.

Zum Beispiel können Sie, um zu erkennen, wann Audiotracks zu einem <video>-Element hinzugefügt oder von diesem entfernt werden, 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 Audiotracks aus dem Element und ruft eine hypothetische Funktion in einem Spureditor 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 eingestellt ist, wird das Video möglicherweise nicht angezeigt oder zeigt ein graues Kästchen mit einem X an (wenn JavaScript aktiviert ist).

Wenn Sie Apache Web Server verwenden, um WebM-Videos bereitzustellen, können Sie dieses Problem beheben, indem Sie die Dateityp-Erweiterung des Videos 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 eine einfache Benutzeroberfläche zum Konfigurieren von MIME-Typ-Änderungen für neue Technologien, bis ein globales Update von selbst stattfindet.

Videos sollten sowohl Untertitel als auch Transkripte bereitstellen, die deren Inhalt genau beschreiben (siehe Untertitel und Beschriftungen zu HTML-Video hinzufügen für weitere Informationen zur Implementierung dieser). Untertitel erlauben es Menschen mit Hörverlust, den Audiomaterial des Videos zu verstehen, während das Video abgespielt wird, während Transkripte Menschen, die zusätzliche Zeit benötigen, die Möglichkeit geben, den Audiomaterial in einem Tempo und Format zu überprüfen, das ihnen angenehm ist.

Es sei darauf hingewiesen, dass Sie zwar Audio-only-Medien synchronisieren können, dies jedoch nur beim Abspielen von Audio in einem <video>-Element möglich ist, da die Videoregion des Elements verwendet wird, um die Untertitel anzuzeigen. Dies ist eines der speziellen Szenarien, in denen es nützlich ist, Audio in einem Video-Element abzuspielen.

Wenn automatische Untertitelungsdienste verwendet werden, ist es wichtig, den generierten Inhalt zu überprüfen, um sicherzustellen, dass er die Quelle genau widerspiegelt.

Zusätzlich zum gesprochenen Dialog sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen vermitteln. Dies umfasst Emotion und Tonfall:

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: Captions, Transcripts, and Audio Descriptions
• MDN Verständnis der WCAG, Richtlinie 1.2 Erklärungen
• Verständnis des Erfolgskriteriums 1.2.1 | W3C Verständnis WCAG 2.0
• Verständnis des Erfolgskriteriums 1.2.2 | W3C Verständnis WCAG 2.0

Dieses Beispiel spielt ein Video ab, wenn es aktiviert wird, und stellt dem Benutzer die Standard-Steuerungen des Browsers zur Verfügung, 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 abgespielt wird, wird das Bild angezeigt, das im poster-Attribut bereitgestellt wird. 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, dass das Video unabhängig davon angesehen werden kann, 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 Medien-Dateitypen ermöglichen es Ihnen, 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 Video und Vorbis für Audio verwendet.

• Leitfaden zu Medientypen und Formaten im Web

  • Medien-Container-Formate (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 mit Canvas

• Konfiguration von Servern für Ogg-Medien