<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 beim <img>-Element fügen wir einen Pfad zu dem Medium, das wir anzeigen möchten, in das src-Attribut ein; weitere Attribute können hinzugefügt werden, um Informationen wie Videobreite und -höhe anzugeben, ob das Video automatisch abgespielt und wiederholt werden soll oder ob die Standard-Video-Steuerelemente des Browsers angezeigt werden sollen, und so weiter.

Der Inhalt zwischen dem öffnenden und schließenden <video></video>-Tag wird in Browsern, die das Element nicht unterstützen, als Fallback angezeigt.

Wie alle anderen HTML-Elemente unterstützt dieses Element die globalen Attribute.

autoplay

Ein boolesches Attribut; wenn angegeben, beginnt das Video automatisch abzuspielen, sobald es kann, ohne anzuhalten, um das Laden der Daten zu beenden.

Hinweis: Moderne Browser blockieren Audio (oder Videos mit einer nicht stummgeschalteten Tonspur) vom automatischen Abspielen, da Websites, die automatisch Audio abspielen, eine unangenehme Erfahrung für Benutzer darstellen können. Siehe unseren Autoplay-Leitfaden für zusätzliche Informationen zur ordnungsgemäßen Verwendung von Autoplay.

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

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerelemente, um dem Benutzer die Steuerung der Videowiedergabe zu ermöglichen, einschließlich Lautstärkeanpassung, Suchen und Wiedergabe/Pause.

controlslist

Das controlslist-Attribut hilft, wenn angegeben, dem Browser dabei, welche Steuerelemente für das video-Element angezeigt werden sollen, wann immer der Browser sein eigenes Set von Steuerelementen anzeigt (das heißt, 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 das Steuerelement) 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 wieder verwendet werden, ohne verunreinigt zu sein. Die erlaubten Werte sind:

anonymous

Sendet eine Anfrage über verschiedene Ursprünge hinweg ohne Anmeldeinformationen. Das bedeutet, dass es den Origin:-HTTP-Header ohne Cookie, X.509-Zertifikat oder HTTP-Basis-Authentifizierung sendet. Wenn der Server keine Anmeldeinformationen an die Ursprungsseite übermittelt (indem er den Access-Control-Allow-Origin:-HTTP-Header nicht setzt), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Anfrage über verschiedene Ursprünge hinweg mit Anmeldeinformationen. Das bedeutet, dass es den Origin:-HTTP-Header mit einem Cookie, einem Zertifikat oder einer HTTP-Basis-Authentifizierung sendet. Wenn der Server der Ursprungsseite keine Anmeldeinformationen übermittelt (über den Access-Control-Allow-Credentials:-HTTP-Header), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne eine CORS-Anfrage abgerufen (d.h. ohne den Origin:-HTTP-Header zu senden), was deren nicht verunreinigte Verwendung in <canvas>-Elementen verhindert. Bei Ungültigkeit wird sie behandelt, als ob das aufgezählte 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 den Bild-im-Bild-Modus anfordert.

disableremoteplayback

Ein boolesches Attribut, das verwendet wird, um die Fähigkeit von Remote-Wiedergabegeräten zu deaktivieren, 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 Videoanzeigebereichs in CSS-Pixeln (nur absolute Werte; keine Prozentangaben).

loop

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

muted

Ein boolesches Attribut, das die standardmäßige Stummschaltung im Video angibt. Wenn gesetzt, wird der Ton zu Beginn stummgeschaltet. Der Standardwert ist false, was bedeutet, dass der Ton gespielt wird, wenn das Video abgespielt wird.

playsinline

Ein boolesches Attribut, das angibt, dass das Video "inline" abgespielt werden soll, 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 zu einem Bild, das während des Herunterladens des Videos angezeigt wird. Wenn dieses Attribut nicht angegeben ist, wird nichts angezeigt, bis der erste Frame verfügbar ist; dann wird der erste Frame als Posterrahmen angezeigt.

preload

Dieses aufzählbare Attribut soll dem Browser einen Hinweis geben, was der Autor für die beste Benutzererfahrung hält, welche Inhalte vor der Wiedergabe des Videos geladen werden sollten. 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 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 zu setzen.

Hinweis:

• Das autoplay-Attribut hat Vorrang vor preload. Wenn autoplay angegeben ist, muss der Browser offensichtlich das Video herunterladen, um die Wiedergabe zu starten.
• 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 im Video-Block verwenden, um das Video anzugeben, das eingebettet werden soll.

width

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

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>

Wenn Sie <source>-Elemente verwenden, versucht der Browser, jede Quelle der Reihe nach 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 substantiellen und ausführlichen Leitfaden zu Medien-Dateitypen und den Leitfaden zu den für Video unterstützten Codecs. Auch verfügbar ist ein Leitfaden zu Audio-Codecs, die mit ihnen verwendet werden können.

Weitere Nutzungshinweise:

• Wenn Sie das controls-Attribut nicht angeben, enthalten die Videos nicht die Standard-Steuerelemente des Browsers; Sie können Ihre eigenen benutzerdefinierten Steuerelemente mithilfe von JavaScript und der HTMLMediaElement API erstellen. Siehe Erstellen eines browserübergreifenden Videoplayers für weitere Details.
• Um eine präzise Steuerung über Ihre Video- (und Audio-) Inhalte zu ermöglichen, lösen HTMLMediaElements viele verschiedene Ereignisse aus. Zusätzlich zur Bereitstellung von Steuerungsmöglichkeiten ermöglichen Ihnen diese Ereignisse, den Fortschritt sowohl des Downloads als auch der Wiedergabe des Mediums sowie den Wiedergabestatus 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 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. Siehe Hinzufügen von Untertiteln 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 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 für die Verwendung von HTML <video> ist das HTML-Video und Audio Anfänger-Tutorial.

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

Es gibt keine besonderen Überlegungen für das Styling von <video>; eine übliche Strategie ist es, ihm einen display-Wert von block zu geben, um es einfacher positionieren und dimensionieren zu können, und dann bei Bedarf Stil- und Layoutinformationen bereitzustellen. Grundlagen zur Videoplayer-Gestaltung bietet einige nützliche Gestaltungstechniken.

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) angegeben.

Beispielsweise enthält der untenstehende HTML-Code die Datei "captions.vtt", die verwendet wird, um geschlossene 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 programmgesteuert mithilfe der WebVTT API hinzugefügt werden.

Sie können feststellen, wann Spuren zu einem <video> Element hinzugefügt und davon 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 dem hinzugefügten Spurtyp 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 zum Element 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 zum Element hinzugefügt werden.

Um beispielsweise festzustellen, wann Audiotracks 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, wann Audiotracks zum Element hinzugefügt und daraus entfernt werden, und ruft eine hypothetische Funktion in einem Spur-Editor auf, um den Track zur Liste der verfügbaren Spuren hinzuzufügen und zu entfernen.

Sie können auch addEventListener() verwenden, um auf die Ereignisse addtrack und removetrack zu hören.

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 zur Bereitstellung von WebM-Videos verwenden, können Sie dieses Problem beheben, indem Sie die Dateitypen-Erweiterungen des Videos zum video/webm MIME-Typ hinzufügen (die häufigste WebM-Dateierweiterung ist .webm). Bearbeiten Sie dazu die Datei mime.types in /etc/apache oder verwenden Sie die AddType-Konfigurationsanweisung in httpd.conf:

AddType video/webm .webm

Ihr Webhost kann eine einfache Schnittstelle für Änderungen in der MIME-Typ-Konfiguration neuer 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 zu HTML5-Video für weitere Informationen dazu, wie diese implementiert werden). Untertitel ermöglichen es Menschen mit Hörverlust, den Audioinhalt eines Videos während der Wiedergabe zu verstehen, während Transkripte Menschen, die zusätzliche Zeit benötigen, die Möglichkeit geben, den Audiocontent in einem für sie komfortablen Tempo und Format zu überprüfen.

Es sei darauf hingewiesen, dass Sie zwar Audio-Only-Medien untertiteln können, jedoch nur dann, wenn die Audio-Wiedergabe in einem <video>-Element erfolgt, da die Videoregion des Elements zur Darstellung der Untertitel verwendet wird. Dies ist eines der besonderen 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 das Quellvideo genau wiedergibt.

Neben gesprochenen Dialogen sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dies umfasst 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: Untertitel, Transkripte und Audiobeschreibungen
• MDN Verständnis der WCAG, Leitlinie 1.2 Erklärungen
• Verständnis des Erfolgs-Kriteriums 1.2.1 | W3C Verständnis der WCAG 2.0
• Verständnis des Erfolgs-Kriteriums 1.2.2 | W3C Verständnis der WCAG 2.0

Dieses Beispiel spielt ein Video ab, wenn es aktiviert wird, und bietet dem Benutzer die Standard-Videosteuerungen des Browsers zur Steuerung der Wiedergabe.

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 abzuspielen, 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 vorhergehenden auf und bietet drei verschiedene Quellen für das Medium an; dies ermöglicht es, das Video anzusehen, unabhängig davon, welche Video-Codec der Browser unterstützt.

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, jedoch nicht, wenn alle Quellen fehlschlagen.

Einige Medien-Dateitypen ermöglichen es, spezifischere Informationen mit dem codecs-Parameter als Teil des Typ-Strings der Datei anzugeben. 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

  • Medien-Container-Formate (Dateitypen)
  • Web-Videocodec-Leitfaden
  • Web-Audiocodec-Leitfaden

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

• <audio>

• HTML-Video und Audio

• Manipulation von Video mit Canvas

• Konfigurieren von Servern für Ogg-Medien