Impressum
< Bilder Inhalt CSS >

Videos

Mit dem <video>-Tag kann man Video-Dateien in Websiten einbinden. Hier wird analog zu zum IMG-Tag mittels src auf die Video-Datei verwiesen.
Ein Video, welches nur das src-Attribut hat erscheint als Bild und kann mittels Rechtsklick im Kontextmenu gestartet werden. Um dies zu ändern bietet das video-Tag zusätzliche Attribute an:
Attribute Beschreibung
autoplay Startet das Video automatisch. Manche Browser lassen dies jedoch nur zu, wenn der Ton aus ist.
controls Zeigt die Steuerelemente an (play/pause etc.)
height Die Höhe des Videos in Pixeln.
loop Gibt an, dass das Video in einer Endlosschleife abgespielt wird.
muted Ton ist aus. Er kann über die Steuerelemente vom Betrachter angeschalten werden.
poster Eine URL für ein Bild, welches angezeigt wird, solange das Video läd bzw. bis es gestartet wird.
preload Gibt an, was automatisch geladen werden soll:
  • preload="auto" Das Video sofort laden
  • preload="metadata" Nur die Metadaten (Breite, Höhe, Laufzeit, ...) laden.
  • preload="none" Nichts laden, bis play gedrückt wird.
src Die URL zum Video (s.o.)
width Die Breite in Pixeln.

Beispiel:

<video src="./img/animation.mp4"></video>
<video src="./img/animation.mp4" width="200"></video>
Das Ergebnis (starten im Kontextmenu):

Beispiel:

<video src="./img/animation.mp4" controls autoplay loop></video>
Das Ergebnis: Es startet von selbst und spielt in einer Endlosschleife ab.

Videoformate

Es gibt viele unterschiedliche Videoformate. Die heutigen Browser unterstützen alle die folgenden drei Formate: Videos bestehen aus abgespeicherten Bildern und Tonspuren. Diese können (z.B. bei mp4 und .ogg) unterschiedlich kodiert und komprimiert sein. Die Details interessieren hier allerdings nicht. Wer mehr wissen will nehme eine Suchmaschine seiner Wahl und frage das Internet.

Rechtliches

Was für Bilder gilt, das gilt natürlich auch für Videos: