Das<video>-ElementHTML bettet einen Mediaplayer ein, der die Videowiedergabe im Dokument unterstützt. Sie können<video> auch für Audioinhalte verwenden, aber das<audio>-Element könnte ein besseres Benutzererlebnis bieten.

Probieren Sie es aus

<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 geben wir imsrc-Attribut einen Pfad zu den Medien an, die wir anzeigen möchten. Wir können weitere Attribute einschließen, um Informationen wie Video-Breite und -Höhe, ob wir es automatisch abspielen und schleifen lassen wollen oder die Standard-Videosteuerungen des Browsers anzeigen möchten, und so weiter.

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

Attribute

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

autoplay

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

Hinweis:Moderne Browser blockieren Audio (oder Videos mit einer nicht stummgeschalteten Audiospur) von der automatischen Wiedergabe, da Websites, die automatisch Audio abspielen, für Nutzer eine unangenehme Erfahrung sein können. Siehe unserenAutoplay-Leitfaden für zusätzliche Informationen zur korrekten Verwendung von Autoplay.

Um die automatische Videowiedergabe zu deaktivieren, funktioniertautoplay="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, mit denen der Benutzer unter anderem die Videowiedergabe, Lautstärke, Suche und Pause/Resümee steuern kann.

controlslist

Dascontrolslist-Attribut hilft bei Angabe dem Browser, welche Steuerungen er für dasvideo-Element anzeigen soll, wenn der Browser seine eigenen Steuerungen zeigt (also wenn dascontrols-Attribut angegeben ist).

Zulässige Werte sindnodownload,nofullscreen undnoremoteplayback.

Verwenden Sie das Attributdisablepictureinpicture, wenn Sie den Picture-In-Picture-Modus (und die Steuerung) deaktivieren wollen.

crossorigin

Diesesaufgezählte Attribut gibt an, ob CORS verwendet werden soll, um das zugehörige Video abzurufen.CORS-fähige Ressourcen können im<canvas>-Element verwendet werden, ohneverunreinigt zu sein. Die zulässigen Werte sind:

anonymous

Sendet eine anonyme Anfrage ohne Anmeldedaten. Anders ausgedrückt, es sendet den HTTP-HeaderOrigin: ohne Cookie, X.509-Zertifikat oder Durchführung der HTTP-Basisauthentifizierung. Wenn der Server der Ursprungsseite keine Anmeldeinformationen gibt (indem er den HTTP-HeaderAccess-Control-Allow-Origin: nicht setzt), wird die Ressourceverunreinigt und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Anfrage mit Anmeldedaten. Anders ausgedrückt, es sendet den HTTP-HeaderOrigin: zusammen mit einem Cookie, einem Zertifikat oder durch Durchführung der HTTP-Basisauthentifizierung. Wenn der Server der Ursprungsseite keine Anmeldeinformationen gibt (durch den HTTP-HeaderAccess-Control-Allow-Credentials:), wird die Ressourceverunreinigt und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgefragt (d.h. ohne den HTTP-HeaderOrigin: zu senden), wodurch ihre nicht verunreinigte Verwendung in<canvas>-Elementen verhindert wird. Wenn ungültig, wird es so behandelt, als ob das aufgezählte Schlüsselwortanonymous verwendet wurde. Weitere Informationen finden Sie unterCORS-Einstellungen Attribute.

disablepictureinpicture

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

disableremoteplayback

Ein Boolean-Attribut, das verwendet wird, um die Möglichkeit der Remote-Wiedergabe auf Geräten zu deaktivieren, die über kabelgebundene (HDMI, DVI, usw.) und kabellose Techniken (Miracast, Chromecast, DLNA, AirPlay, usw.) angeschlossen sind.

In Safari können Siex-webkit-airplay="deny" als Fallback verwenden.

height

Die Höhe des Anzeigebereichs des Videos inCSS-Pixeln (nur absolute Werte;keine Prozentsätze).

loop

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

muted

Ein Boolean-Attribut, das die Standardeinstellung für die Stummschaltung des im Video enthaltenen Audios 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" abgespielt werden soll, das heißt innerhalb des Wiedergabebereichs des Elements. Beachten Sie, dass das Fehlen dieses Attributsnicht bedeutet, dass das Video immer im Vollbild 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 Posterbild angezeigt.

preload

Diesesaufgezählte Attribut soll dem Browser einen Hinweis darauf geben, was der Autor als die beste Benutzererfahrung in Bezug auf die zu ladenden Inhalte vor dem Abspielen des Videos ansieht. 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, auch wenn der Benutzer nicht erwartet wird, sie zu verwenden.
• leerer String: Ein Synonym für den Wertauto.

Der Standardwert ist für jeden Browser unterschiedlich. Die Spezifikation empfiehlt, diesen aufmetadata zu setzen.

Hinweis:

• Dasautoplay-Attribut hat Vorrang vorpreload. Wennautoplay angegeben ist, müsste der Browser offensichtlich beginnen, das Video für die Wiedergabe herunterzuladen.
• Die Spezifikation zwingt den Browser nicht dazu, 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 inCSS-Pixeln (nur absolute Werte;keine Prozentsätze).

Ereignisse

audioprocessVeraltet

Der Eingabepuffer einesScriptProcessorNode-Objekts ist zur Verarbeitung bereit.

canplay

Der Browser kann die Medien abspielen, schätzt jedoch, dass nicht genug Daten geladen wurden, um die Medien ohne Zwischenstopps bis zum Ende abzuspielen.

canplaythrough

Der Browser schätzt, dass er die Medien bis zum Ende abspielen kann, ohne für das Puffern von Inhalten stoppen zu müssen.

complete

Die Rendering einesOfflineAudioContext ist abgeschlossen.

durationchange

Dasduration-Attribut wurde aktualisiert.

emptied

Die Medien sind leer geworden; zum Beispiel wird dieses Ereignis gesendet, wenn die Medien bereits geladen sind (oder teilweise geladen) und die Methodeload() aufgerufen wird, um sie neu zu laden.

ended

Die Wiedergabe wurde gestoppt, weil das Ende der Medien erreicht wurde.

error

Ein Fehler trat auf, während die Mediendaten abgerufen wurden, oder der Typ der Ressource ist kein unterstütztes Medienformat.

loadeddata

Der erste Frame der Medien ist vollständig geladen.

loadedmetadata

Die Metadaten wurden geladen.

loadstart

Wird ausgelöst, wenn der Browser begonnen hat, die Ressource zu laden.

pause

Die Wiedergabe wurde angehalten.

play

Die Wiedergabe hat begonnen.

playing

Die Wiedergabe ist bereit zu beginnen, nachdem sie pausiert oder aufgrund von Datenmangel verzögert wurde.

progress

Wird periodisch ausgelöst, während der Browser eine Ressource lädt.

ratechange

Die Wiedergabegeschwindigkeit wurde geändert.

seeked

EineSeek-Operation wurde abgeschlossen.

seeking

EineSeek-Operation hat begonnen.

stalled

Der Benutzeragent versucht, Mediendaten abzurufen, aber die Daten kommen unerwartet nicht.

suspend

Das Laden von Mediendaten wurde ausgesetzt.

timeupdate

Die vomcurrentTime-Attribut angegebene Zeit wurde aktualisiert.

volumechange

Die Lautstärke wurde geändert.

waiting

Die Wiedergabe wurde gestoppt, weil ein vorübergehender Datenmangel vorliegt.

Anwendungshinweise

Browser unterstützen nicht alle die gleichen Videoformate; Sie können mehrere Quellen innerhalb geschachtelter<source>-Elemente bereitstellen, und der Browser verwendet dann die erste, 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 nacheinander zu laden. Wenn eine Quelle fehlschlägt (z.B. aufgrund einer ungültigen URL oder nicht unterstützten Formats), wird die nächste Quelle ausprobiert, und so weiter. Einerror-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ündlichenLeitfaden zu Medien-Dateitypen und denLeitfaden zu unterstützten Codecs für Video. Außerdem gibt es einen Leitfaden zuAudiocodecs, die mit ihnen verwendet werden können.

Andere Anwendungshinweise:

• Wenn Sie dascontrols-Attribut nicht angeben, enthält das Video nicht die Standardsteuerungen des Browsers; Sie können Ihre eigenen benutzerdefinierten Steuerungen mit JavaScript und derHTMLMediaElement-API erstellen. Weitere Details finden Sie unterErstellen eines plattformübergreifenden Videoplayers.
• Um präzise Kontrolle über Ihre Video- (und Audio-)Inhalte zu haben, lösenHTMLMediaElements viele verschiedeneEreignisse aus. Diese Ereignisse ermöglichen nicht nur Steuerbarkeit, sondern auch die Überwachung des Fortschritts von sowohl Download als auch Wiedergabe der Medien, sowie des Wiedergabezustands und der -position.
• Sie können dieobject-position-Eigenschaft verwenden, um die Position des Videos innerhalb des Rahmens des Elements anzupassen, und dieobject-fit-Eigenschaft, um zu steuern, wie die Größe des Videos angepasst wird, um in den Rahmen zu passen.
• Um Untertitel zusammen mit Ihrem Video anzuzeigen, können Sie JavaScript zusammen mit dem<track>-Element und demWebVTT-Format verwenden. Weitere Informationen finden Sie unterHinzufügen von Untertiteln und Beschriftungen zu HTML-Video.
• Sie können Audiodateien mit einem<video>-Element abspielen. Dies kann nützlich sein, wenn Sie beispielsweise Audio mit einemWebVTT-Transkript aufführen, da das<audio>-Element keine Untertitel mit WebVTT erlaubt.
• Um den Fallback-Inhalt bei 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 dasHTML-Video und -Audio Anfänger-Tutorial.

Styling mit CSS

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

Es gibt keine besonderen Überlegungen für das Styling von<video>; eine gängige Strategie ist es, ihm einendisplay-Wert vonblock zu geben, um es leichter positionierbar und größenveränderbar zu machen, und dann die erforderlichen Styling- und Layoutinformationen bereitzustellen.Grundlagen zur Videoplayer-Stilgestaltung bieten einige nützliche Styling-Techniken.

Hinzufügen von Untertiteln und anderen zeitgesteuerten Textspuren

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

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

Zeitgesteuerte Textspuren können auch programmatisch mit derWebVTT API hinzugefügt werden.

Erkennung von Spurzugaben und Entfernungen

Sie können erkennen, wann Spuren zu einem<video>-Element hinzugefügt oder daraus entfernt werden, indem Sie dieaddtrack undremovetrack Ereignisse überwachen. 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 Typ der hinzugefügten Spur entspricht:

HTMLMediaElement.audioTracks

EineAudioTrackList, die alle Audiotracks des Media-Elements enthält.Fügen Sie einen Listener füraddtrack zu diesem Objekt hinzu, um benachrichtigt zu werden, wenn neue Audiotracks zum Element hinzugefügt werden.

HTMLMediaElement.videoTracks

EineVideoTrackList, die alle Videotracks des Media-Elements enthält.Fügen Sie einenaddtrack-Listener zu diesem Objekt hinzu, um benachrichtigt zu werden, wenn Videotracks zum Element hinzugefügt werden.

HTMLMediaElement.textTracks

EineTextTrackList, die alle Textspuren des Media-Elements enthält (die für Untertitel, geschlossene Beschriftungen usw. verwendet werden).Fügen Sie einenaddtrack-Listener zu diesem Objekt hinzu, um benachrichtigt zu werden, wenn Textspuren zum Element hinzugefügt werden.

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

Sie können auchaddEventListener() verwenden, um auf dieaddtrack undremovetrack Ereignisse zu hören.

Server-Unterstützung für Video

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 (wenn JavaScript aktiviert ist).

Wenn Sie Apache Web Server verwenden, um WebM-Videos zu servieren, können Sie dieses Problem beheben, indem Sie die Erweiterungen des Video-Dateityps zumvideo/webm MIME-Typ hinzufügen (die häufigste WebM-Dateiendung ist.webm). Um dies zu tun, bearbeiten Sie die Dateimime.types in/etc/apache oder verwenden Sie die KonfigurationsdirektiveAddType inhttpd.conf:

AddType video/webm .webm

Ihr Webhoster kann eine einfach zu bedienende Schnittstelle für MIME-Typ-Konfigurationsänderungen für neue Technologien bereitstellen, bis ein globales Update natürlich erfolgt.

Barrierefreiheit

Videos sollten sowohl Untertitel als auch Transkripte bieten, die den Inhalt genau beschreiben (sehen SieHinzufügen von Untertiteln und Beschriftungen zu HTML-Video für weitere Informationen zur Implementierung). Untertitel ermöglichen es Menschen mit Hörverlust, den Audiogehalt eines Videos während der Wiedergabe zu verstehen, während Transkripte Menschen, die mehr Zeit benötigen, ermöglichen, Audiogehalt in einem Tempo und Format zu überprüfen, das für sie angenehm ist.

Es ist erwähnenswert, dass Sie, obwohl Sie Audiomedien beschriften können, dies nur beim Abspielen von Audio in einem<video>-Element tun können, da die Videoregion des Elements verwendet wird, um die Untertitel anzuzeigen. 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 erzeugten Inhalt zu überprüfen, um sicherzustellen, dass er die Originalvideoquelle genau wiedergibt.

Zusätzlich zu gesprochenen Dialogen sollten Untertitel und Transkripte auch Musik und Soundeffekte identifizieren, die wichtige Informationen kommunizieren. Dies schließt Emotion und Ton ein:

1400:03:14 --> 00:03:18[Dramatic rock music]1500:03:19 --> 00:03:21[whispering] What's that off in the distance?1600:03:22 --> 00:03:24It'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 mitderalign VTT-Cue-Einstellung positioniert werden.

• Web Video Text Tracks Format (WebVTT)
• WebAIM: Untertitel, Transkripte und Audiobeschreibungen
• MDN Verstehen der WCAG, Leitlinie 1.2 Erklärungen
• Verstehen des Erfolgskriteriums 1.2.1 | W3C Understanding WCAG 2.0
• Verstehen des Erfolgskriteriums 1.2.2 | W3C Understanding WCAG 2.0

Beispiele

Einzelne Quelle

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 zu spielen beginnt, wird das imposter-Attribut angegebene Bild als Platzhalter angezeigt. Wenn der Browser die Videowiedergabe nicht unterstützt, wird der Fallback-Text angezeigt.

Mehrere Quellen

Dieses Beispiel baut auf dem letzten auf und bietet drei verschiedene Quellen für die Medien; dies ermöglicht es, das Video unabhängig davon anzusehen, 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, wirdMP4 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 demcodecs-Parameter als Teil der Typzeichenfolge der Datei bereitzustellen. Zum Beispiel,video/webm; codecs="vp8, vorbis" gibt an, dass die Datei einWebM-Video ist, dasVP8 für sein Video undVorbis für Audio verwendet.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Leitfaden zu Medien-Typen und Formaten im Web

  • Mediencontainer-Formate (Dateitypen)
  • Web Video Codec-Leitfaden
  • Web Audio Codec-Leitfaden

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

• <audio>

• HTML-Video und -Audio

• Manipulation von Video mit Canvas

• Konfigurieren von Servern für Ogg-Medien