<video>: Das Video-Einbettungselement

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 einen Pfad zu den anzuzeigenden Medien im src-Attribut an; wir können andere Attribute einschließen, um Informationen wie Video-Breite und -Höhe, Autoplay und Schleifen oder das Anzeigen der Standard-Videosteuerungen des Browsers usw. zu spezifizieren.

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

Attribute

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

autoplay

Ein Boolesches Attribut; wenn angegeben, beginnt das Video automatisch mit der Wiedergabe, sobald es geladen ist, ohne auf das vollständige Laden der Daten zu warten.

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

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

Hinweis: Videos mit dem Attribut loading="lazy" werden nicht heruntergeladen und abgespielt, bis das Element sich in der Nähe des oder innerhalb des Sichtfensters befindet.

controls

Wenn dieses Attribut vorhanden ist, bietet der Browser Steuerungen an, um dem Benutzer die Kontrolle über die Videowiedergabe zu ermöglichen, einschließlich Lautstärke, Suchfunktion und Pause/Wiedergabe.

controlslist

Das controlslist-Attribut hilft dem Browser, auszuwählen, welche Steuerungen für das video-Element angezeigt werden sollen, wenn der Browser sein eigenes Satz von Steuerungen zeigt (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-in-Bild-Modus (und die Steuerung) deaktivieren möchten.

crossorigin

Dieses enumerierte Attribut gibt an, ob CORS verwendet werden soll, um das zugehörige Video abzurufen. CORS-fähige Ressourcen können im <canvas>-Element wiederverwendet werden, ohne verunreinigt zu sein. Die erlaubten Werte sind:

anonymous

Sendet eine Cross-Origin-Anfrage ohne Berechtigung. Mit anderen Worten, es sendet den Origin: HTTP-Header ohne einen Cookie, X.509-Zertifikat oder Durchführung der HTTP-Basisauthentifizierung. Wenn der Server der Ursprung-Website keine Berechtigungen erteilt (durch Nichtsetzen des Access-Control-Allow-Origin: HTTP-Headers), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

use-credentials

Sendet eine Cross-Origin-Anfrage mit Berechtigung. Mit anderen Worten, es sendet den Origin: HTTP-Header mit einem Cookie, einem Zertifikat oder Durchführung der HTTP-Basisauthentifizierung. Wenn der Server der Ursprung-Website keine Berechtigungen erteilt (durch den Access-Control-Allow-Credentials: HTTP-Header), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt.

Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage abgefragt (d.h. ohne Senden des Origin: HTTP-Headers), was ihre unverunreinigte Verwendung in <canvas>-Elementen verhindert. Wenn ungültig, wird es behandelt, als ob das enumerierte Schlüsselwort anonymous verwendet wurde. Siehe CORS-Einstellungs-Attribute für weitere Informationen.

disablepictureinpicture

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

disableremoteplayback

Ein Boolesches Attribut, das die Fähigkeit zur Fernwiedergabe auf Geräten deaktiviert, die über kabelgebundene (HDMI, DVI usw.) und drahtlose 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-Pixeln (nur absolute Werte; keine Prozentsätze).

loading

Gibt an, wie der Browser das Video (einschließlich eines Posterbildes) laden soll:

eager

Lädt das Video sofort, unabhängig davon, ob sich das Video derzeit im sichtbaren Bereich befindet oder nicht (dies ist der Standardwert).

lazy

Verschiebt das Laden des Videos, bis es einen berechneten Abstand vom Ansichtsfenster erreicht, wie vom Browser definiert.

Das „Lazy Loading“ vermeidet den Netzwerk- und Speicherkapazitätsbedarf, um das Video zu handhaben, bis relativ sicher ist, dass es benötigt wird. Dies verbessert die Leistung in den meisten typischen Nutzungsszenarien.

Während explizite width- und height-Attribute für alle Videos empfohlen werden, um Layoutverschiebungen zu vermeiden, sind sie besonders wichtig für „Lazy Loaded“-Videos. „Lazy Loaded“-Videos werden niemals geladen, wenn sie keinen sichtbaren Teil eines Elements schneiden, selbst wenn das Laden sie ändern würde, da ungeladene Videos eine width und height von 0 haben. Es führt zu einer noch störenderen Benutzererfahrung, wenn sich der Inhalt im sichtbaren Bereich während des Lesens neu formatiert.

„Lazy Loaded“-Videos, die sich im visuellen Ansichtsfenster befinden, sind möglicherweise noch nicht sichtbar, wenn das Window-Objekt load-Ereignis ausgelöst wird. Dies liegt daran, dass das Ereignis basierend auf „Eager Loaded“-Videos ausgelöst wird – „Lazy Loaded“-Videos werden nicht berücksichtigt, selbst wenn sie sich im visuellen Ansichtsfenster beim ersten Laden der Seite befinden.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme gegen das Verfolgen, da, wenn eine Benutzeragent „Lazy Loading“ unterstützt, wenn das Skripten deaktiviert ist, es immer noch möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Videos im Markup einer Seite platziert werden, sodass ein Server verfolgen kann, wie viele Videos angefordert werden und wann.

Hinweis: Das Attribut loading="lazy" beeinflusst auch die Attribute autoplay, poster und preload, wie in den jeweiligen Abschnitten der Seite beschrieben.

loop

Ein Boolesches Attribut; wenn angegeben, geht der Browser automatisch zum Anfang zurück, wenn das Ende des Videos erreicht ist.

muted

Ein Boolesches Attribut, das die Standardeinstellung für die Stummschaltung des im Video enthaltenen Audios angibt. Wenn gesetzt, wird der Ton initial stummgeschaltet. Der Standardwert ist false, was bedeutet, dass der Ton abgespielt wird, wenn das Video abgespielt wird.

playsinline

Ein Boolesches Attribut, das angibt, dass das Video „inline“ abgespielt werden soll, das heißt, innerhalb des Abspielbereichs 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.

Hinweis: Videos, bei denen das Attribut loading="lazy" gesetzt ist, laden die poster-Ressource nur herunter, wenn sich das Video in der Nähe des oder innerhalb des Ansichtsfensters befindet.

preload

Dieses enumerierte Attribut soll einen Hinweis für den Browser bieten, was der Autor für die beste Benutzererfahrung hält, in Bezug auf den Inhalt, der vor der Videowiedergabe geladen wird. Es kann einen der folgenden Werte haben:

• none: Gibt an, dass das Video nicht vorab geladen werden sollte.
• metadata: Gibt an, dass nur Metadaten des Videos (z.B. Länge) abgerufen werden.
• auto: Gibt an, dass die ganze Videodatei heruntergeladen werden kann, selbst wenn der Benutzer sie voraussichtlich nicht verwenden wird.
• leere Zeichenkette: Ein Synonym für den Wert auto.

Der Standardwert ist für jeden Browser unterschiedlich. Die Spezifikation empfiehlt, ihn auf metadata zu setzen.

Hinweis:

• Das autoplay-Attribut hat Vorrang vor preload. Wenn autoplay angegeben ist, müsste der Browser offensichtlich anfangen, das Video für die Wiedergabe herunterzuladen.
• Die Spezifikation zwingt den Browser nicht, dem Wert dieses Attributs zu folgen; es ist lediglich ein Hinweis.

Hinweis: Videos, bei denen das Attribut loading="lazy" gesetzt ist, wenden das preload-Verhalten erst an, wenn sich das Video in der Nähe des oder innerhalb des Ansichtsfensters befindet.

src

Die URL des einzubettenden Videos. Dies ist optional; stattdessen können Sie 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).

Ereignisse

audioprocess Veraltet

Der Eingabepuffer eines ScriptProcessorNode ist bereit zur Verarbeitung.

canplay

Der Browser kann die Medien abspielen, schätzt jedoch, dass nicht genügend Daten geladen wurden, um die Medien bis zum Ende der Datei abzuspielen, ohne für weiteres Puffern des Inhalts anhalten zu müssen.

canplaythrough

Der Browser schätzt, dass er das Medium bis zum Ende abspielen kann, ohne für das Puffern von Inhalten anzuhalten.

complete

Das Rendering eines OfflineAudioContext ist beendet.

durationchange

Das Attribut duration wurde aktualisiert.

emptied

Die Medien sind leer geworden; dieses Ereignis wird beispielsweise gesendet, wenn die Medien bereits geladen (oder teilweise geladen) waren und die load()-Methode aufgerufen wird, um sie erneut zu laden.

ended

Die Wiedergabe wurde gestoppt, weil das Ende des Mediums erreicht wurde.

error

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

loadeddata

Der erste Frame des Mediums ist fertig geladen.

loadedmetadata

Die Metadaten wurden geladen.

loadstart

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

pause

Die Wiedergabe wurde pausiert.

play

Die Wiedergabe hat begonnen.

playing

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

progress

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

ratechange

Die Wiedergabegeschwindigkeit wurde geändert.

seeked

Eine Such-Operation wurde abgeschlossen.

seeking

Eine Such-Operation hat begonnen.

stalled

Die Benutzeragent versucht, Mediendaten zu holen, aber Daten kommen unerwartet nicht weiter.

suspend

Das Laden der Mediendaten wurde unterbrochen.

timeupdate

Die durch das currentTime-Attribut angegebene Zeit wurde aktualisiert.

volumechange

Die Lautstärke wurde geändert.

waiting

Die Wiedergabe wurde gestoppt, weil temporär keine Daten verfügbar sind.

Verwendungshinweise

Browser unterstützen nicht alle dasselben Videoformate; Sie können mehrere Quellen innerhalb verschachtelter <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 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 <source>-Element einzeln ausgelöst.

Wir bieten einen umfassenden und gründlichen Leitfaden zu Medien-Dateiformaten und zum Leitfaden zu den unterstützten Codecs für Video. Auch verfügbar ist ein Leitfaden zu Audiocodecs, die mit ihnen verwendet werden können.

Weitere 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. Siehe Erstellung eines plattformübergreifenden Videoplayers für mehr Details.
• Um eine genaue Kontrolle über Ihre Video- (und Audio-) Inhalte zu ermöglichen, lösen HTMLMediaElements viele verschiedene Ereignisse aus. Neben der Bereitstellung von Steuerungsmöglichkeiten ermöglichen diese Ereignisse, den Fortschritt des Downloads und der Wiedergabe des Mediums sowie den Wiedergabezustand und die Position zu überwachen.
• Sie können die object-position-Eigenschaft verwenden, um die Positionierung des Videos im Rahmen des Elements anzupassen, und die object-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 etwas JavaScript zusammen mit dem <track>-Element und dem WebVTT-Format verwenden. Siehe Hinzufügen von Untertiteln zu HTML-Video für weitere Informationen.
• Sie können Audiodateien über ein <video>-Element abspielen. Dies kann nützlich sein, wenn Sie beispielsweise Audio mit einem WebVTT-Transkript durchführen müssen, da das <audio>-Element keine Untertitel mit WebVTT zulässt.
• Um den Fallback-Inhalt in Browsern zu testen, die das Element unterstützen, können Sie <video> durch ein nicht vorhandenes Element wie <notavideo> ersetzen.

Eine gute allgemeine Informationsquelle zur Verwendung von HTML-<video> ist das HTML Video und Audio Einsteigertutorial.

Styling mit CSS

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.

Für das Styling von <video> gibt es keine speziellen Überlegungen; eine übliche Strategie ist, ihm einen display-Wert von block zu geben, um das Positionieren, Größenanpassung usw. zu erleichtern, und dann Styling- und Layoutinformationen nach Bedarf bereitzustellen. Grundlagen der Videoplayer-Styling bieten einige nützliche Styling-Techniken.

Hinzufügen von Untertiteln und anderen zeitgesteuerten Textspuren

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 in 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 geschlossene 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 programmgesteuert mithilfe der WebVTT API hinzugefügt werden.

Erkennung der Spurenhinzufügung und -entfernung

Sie können erkennen, wann Spuren einem <video>-Element hinzugefügt und daraus 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 Tracklist-Objekt innerhalb des <video>-Elements gesendet, das zur Art der Spur im must be provided-Element gehört:

HTMLMediaElement.audioTracks

Eine AudioTrackList, die alle Audiotracks des Medienelements enthält. Fügt 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ügt diesem Objekt einen Listener für addtrack 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ügt diesem Objekt einen Listener für addtrack hinzu, um benachrichtigt zu werden, wenn Texttracks zum Element hinzugefügt werden.

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

Sie können auch addEventListener() verwenden, um die addtrack und removetrack Ereignisse zu überwachen.

Serverunterstützung für Videos

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 Feld mit einem X angezeigt (wenn JavaScript aktiviert ist).

Wenn Sie den Apache-Webserver verwenden, um WebM-Videos zu bedienen, können Sie dieses Problem beheben, indem Sie die Dateityp-Erweiterungen zu dem MIME-Typ video/webm 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 Schnittstelle zu MIME-Typ-Konfigurationsänderungen für neue Technologien, bis ein globales Update auf natürlichem Wege erfolgt.

Barrierefreiheit

Videos sollten sowohl Untertitel als auch Transkriptionen bieten, die ihren Inhalt genau beschreiben (siehe Hinzufügen von Untertiteln zu HTML-Video für weitere Informationen über die Implementierung dieser). Untertitel ermöglichen es Personen, die Hörverlust haben, den Audiogehalt eines Videos zu verstehen, während das Video abgespielt wird, während Transkriptionen denjenigen, die mehr Zeit benötigen, ermöglichen, Audioinhalte in einem Tempo und Format zu überprüfen, das für sie komfortabel ist.

Es ist erwähnenswert, dass während Sie Audioinhalte untertiteln können, dies nur möglich ist, wenn Audio in einem <video>-Element abgespielt wird, da der Videobereich des Elements verwendet wird, um die Untertitel darzustellen. Dies ist eines der speziellen Szenarien, in denen es nützlich ist, Audio in einem Videoelement abzuspielen.

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

Zusätzlich zu gesprochenem Dialog sollten Untertitel und Transkriptionen auch Musik und Soundeffekte identifizieren, die wichtige Informationen vermitteln. Dies schließt Emotion 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 positioniert werden, indem Sie die VTT-Cue-Einstellung align verwenden.

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

Beispiele

Einzelquelle

Dieses Beispiel spielt ein Video ab, wenn es aktiviert wird, und bietet dem Benutzer die Standard-Videosteuerungen des Browsers, 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 angegebene Bild an seiner Stelle angezeigt. Wenn der Browser keine Videowiedergabe 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 an; dies ermöglicht es, das Video unabhängig davon anzusehen, 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, aber nicht, wenn alle Quellen fehlschlagen.

Einige Mediendateiformate ermöglichen es, spezifischere Informationen mit dem codecs Parameter als Teil des Dateityp-Strings anzugeben. Zum Beispiel sagt video/webm; codecs="vp8, vorbis" aus, dass die Datei ein WebM-Video ist, das VP8 für seine Video- und Vorbis für seine Audiospur verwendet.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Leitfaden zu Medientypen und -formaten im Web

  • Mediencontainerformate (Dateitypen)
  • Leitfaden zu Web-Video-Codecs
  • Leitfaden zu Web-Audio-Codecs

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

• <audio>

• HTML-Video und -Audio

• Manipulation von Video mit Canvas

• Serverkonfigurationen für Ogg-Medien