HTMLWiki.de: video
< HTMLWiki.de >
HTML lernen • Beispiele • Tutorials • KI
Menü

[ START ] [ TUTORIAL ] [ HTML ] [ CSS ] [ KI ] [ SPIELWIESE ] [ SITEMAP ]

Das video-Element: Bewegtbild ohne Plugin

vom von

Mit <video> spielst du Videodateien direkt im Browser ab, mit eingebauten Bedienelementen, ohne Plugin, ohne Drittanbieter. Vor HTML5 brauchte man dafür den Flash Player, heute ist es eine Zeile HTML.

Syntax und Beispiel

HTML-Code

<video controls width="640" height="360" poster="vorschau.jpg">
    <source src="rundgang.webm" type="video/webm">
    <source src="rundgang.mp4" type="video/mp4">
    Dein Browser kann dieses Video leider nicht abspielen.
</video>

(Auf eine abspielbare Demo verzichten wir hier, das Wiki soll schlank bleiben und Videodateien sind alles andere als das. Der Code oben funktioniert eins zu eins, sobald du eigene Dateien einsetzt.)

So liest sich das

  • controls blendet die Browser-Bedienelemente ein: Play, Lautstärke, Fortschritt, Vollbild. Ohne dieses Attribut hat das Video keinerlei sichtbare Steuerung.
  • Die <source>-Einträge werden wie beim picture von oben nach unten probiert. MP4 (Codec H.264) versteht praktisch jeder Browser, WebM ist meist kleiner, beides zusammen ist die sichere Kombination.
  • poster zeigt ein Vorschaubild bevor abgespielt wird.
  • Der Text im Inneren erscheint nur bei Uralt-Browsern die das Element nicht kennen.
  • width und height reservieren den Platz, damit beim Ladn nichts springt.

Autoplay: die Regeln des Spiels

Automatisch losspielende Videos mit Ton blockieren moderne Browser rigoros, und das ist auch gut so. Wer einen dekorativen Hintergrundfilm will, kommt mit der Kombination autoplay muted playsinline loop durch: stumm geschaltet darf abgespielt werden. Für alles andere gilt: Der Nutzer drückt selbst auf Play.

Untertitel mit track

<video controls>
    <source src="rundgang.mp4" type="video/mp4">
    <track src="untertitel-de.vtt" kind="subtitles"
           srclang="de" label="Deutsch">
</video>

Das <track>-Element bindet Untertitel im WebVTT-Format ein, einer simplen Textdatei mit Zeitmarken. Untertitel helfen nicht nur gehörlosen Menschen, sondern jedem der im Zug ohne Kopfhörer sitzt. Wenn dein Video gesprochene Inhalte hat, gehören sie dazzu.

Typische Fehler

  • controls vergessen und ein unbedienbares Video ausliefern.
  • Riesige Dateien unkomprimiert einbinden. Videos vorher passend encodieren, sonst leidet jede Mobilverbindung.
  • Autoplay mit Ton erzwingen wollen, der Browser gewinnt sowieso.

Verwandt: audio · iframe (für externe Player) · canvas