HTML -Tutorial

HTML-HOME HTML-Einführung HTML-Editoren HTML-Basis HTML-Elemente HTML-Attribute HTML-Überschriften HTML-Absätze HTML-Stile HTML-Formatierung HTML-Zitate HTML-Kommentare HTML-Farben HTML-CSS HTML-Links HTML-Bilder HTML-Favicon HTML-Tabellen HTML-Listen HTML-Block und Inline HTML-Klassen HTML-ID HTML-Iframes HTML-JavaScript HTML-Dateipfade HTML-Kopf HTML-Layout HTML-responsiv HTML Computercode HTML-Semantik HTML-Styleguide HTML-Entitäten HTML-Symbole HTML-Emojis HTML-Zeichensatz HTML-URL-Codierung HTML vs. XHTML

HTML -Formulare

HTML-Formulare HTML-Formularattribute HTML-Formularelemente HTML-Eingabetypen HTML-Eingabeattribute HTML-Eingabeformularattribute

HTML -Grafiken

HTML-Leinwand HTML-SVG

HTML- Medien

HTML-Medien HTML-Video HTML-Audio HTML-Plugins HTML-YouTube

HTML -APIs

HTML-Geolokalisierung HTML-Drag/Drop HTML-Webspeicher HTML-Webworker HTML-SSE

HTML- Beispiele

HTML-Beispiele HTML-Quiz HTML-Übungen HTML-Zertifikat HTML-Zusammenfassung HTML-Barrierefreiheit

HTML -Referenzen

HTML-Tag-Liste HTML-Attribute Globale HTML-Attribute HTML-Browser-Unterstützung HTML-Ereignisse HTML-Farben HTML-Leinwand HTML-Audio/Video HTML-Doctypes HTML-Zeichensätze HTML-URL-Codierung HTML-Sprachcodes HTTP-Nachrichten HTTP-Methoden PX-zu-EM-Konverter Tastatürkürzel

HTML- Video


Das HTML <video>-Element wird verwendet, um ein Video auf einer Webseite anzuzeigen.


Beispiel

Mit freundlicher Genehmigung von Big Buck Bunny :


Das HTML-<video>-Element

Um ein Video in HTML anzuzeigen, verwenden Sie das <video>Element:

Beispiel

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Wie es funktioniert

Das controlsAttribut fügt Videosteuerelemente wie Wiedergabe, Pause und Lautstärke hinzu.

Es ist eine gute Idee, immer widthund heightAttribute einzuschließen. Wenn Höhe und Breite nicht festgelegt sind, flackert die Seite möglicherweise, während das Video geladen wird.

Das <source>Element ermöglicht es Ihnen, alternative Videodateien anzugeben, aus denen der Browser auswählen kann. Der Browser verwendet das erste erkannte Format.

Der Text zwischen den Tags <video>und wird nur in Browsern angezeigt, die das Element </video>nicht unterstützen .<video>


HTML <Video> Automatische Wiedergabe

Um ein Video automatisch zu starten, verwenden Sie das autoplayAttribut:

Beispiel

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Hinweis: Chromium-Browser erlauben in den meisten Fällen keine automatische Wiedergabe. Stummgeschaltetes Autoplay ist jedoch immer erlaubt.

Fügen Sie muteddanach hinzu autoplay, damit Ihr Video automatisch abgespielt wird (aber stummgeschaltet):

Beispiel

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das <video>Element vollständig unterstützt.

Element
<video> 4.0 9.0 3.5 4.0 10.5


HTML-Videoformate

Es gibt drei unterstützte Videoformate: MP4, WebM und Ogg. Die Browserunterstützung für die verschiedenen Formate ist:

Browser MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

HTML-Video - Medientypen

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML-Video – Methoden, Eigenschaften und Ereignisse

Das HTML-DOM definiert Methoden, Eigenschaften und Ereignisse für das <video>Element.

Auf diese Weise können Sie Videos laden, abspielen und anhalten sowie Dauer und Lautstärke einstellen.

Es gibt auch DOM-Ereignisse, die Sie benachrichtigen können, wenn die Wiedergabe eines Videos beginnt, angehalten wird usw.

Beispiel: Verwendung von JavaScript




Video mit freundlicher Genehmigung von Big Buck Bunny .

Eine vollständige DOM-Referenz finden Sie in unserer HTML-Audio/Video-DOM-Referenz .


HTML-Video-Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and <audio>
<track> Defines text tracks in media players