HTML/Multimedia und Grafiken/video

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit dem Element video können Sie Filme ohne Plugins oder Add-Ons wiedergeben.

  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • HTML5

Inhaltsverzeichnis

[Bearbeiten] Einbindung

Beispiel ansehen …
  <video src="Demofilm.mp4" autoplay controls>
    Ihr Browser kann dieses Video nicht wiedergeben.<br>
    Dieser Film zeigt eine Demonstration des video-Elements. 
    Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.
  </video>
Der Text innerhalb des Elements wird nur angezeigt, falls der Browser das Video nicht darstellen kann.
Es ist empfehlenswert, diesen Text durch eine alternative Erklärung und einen Download-Link des nicht angezeigten Videos zu ergänzen.

Das video-Element benötigt die URL der Videoressource entweder als Wert des src-Attributs oder als Kindelement source und darf zusätzlich folgende optionale Attribute enthalten:

  • autoplay: Das Video beginnt sofort mit dem Abspielen, wenn die Seite geladen ist
    Beachten Sie: Das autoplay-Attribut funktioniert nicht im Firefox. Verwenden sie hier controls, damit Benutzer das Video anschalten können.[1]
  • buffered: gibt die Zeitdauer, die im Browser-Cache bereits zwischengespeichert wurde, zurück.
  • controls aktiviert eine Leiste mit Steuerungsfunktionen für den Benutzer
  • height: Angabe der Höhe des Players (wird sonst automatisch erkannt)
  • loop: Video nach Ende von vorne abspielen
  • muted stellt den Ton des Videos auf stumm
  • preload: bestimmt, wie die Datei beim Laden der Seite in den Browser geladen werden soll. mögliche Werte:
    • auto - gesamte Datei wird geladen, Standardwert
    • metadata - nur die Metadaten werden geladen
    • none: - Datei wird nicht vorgeladen, da nicht erwartet wird, dass sie benutzt wird
  • width: Angabe der Breite des Players (wird sonst automatisch erkannt)


[Bearbeiten] unterstützte Formate

Bis jetzt existieren immer noch verschiedene Video-Kodierungen. Während die meisten Kameras und Mobiltelefone Filme im mp4-Format aufnehmen, wurden für den Einsatz im Netz die freien Formate webm und ogg entwickelt.

Browser mp4 webm ogg
IE 9+ Tick.gif Cross.gif Cross.gif
Firefox Tick.gif Tick.gif Tick.gif
Chrome Tick.gif Tick.gif Tick.gif
Safari Tick.gif Cross.gif Cross.gif
Opera Tick.gif Tick.gif Tick.gif
  • MP4 = MPEG4-Dateien mit H264 video codec + AAC audio codec
  • WebM = WebM-Dateien mit VP8 oder VP9 video codec + Vorbis audio codec
  • Ogg = Ogg-Dateien Theora video codec + Vorbis audio codec

Der Beispielfim mit verschiedenen Formaten wurde von techslides zur Verfügung gestellt.[2]

Empfehlung: Verwenden Sie zusätzlich das Type-Attribut, damit der Browser erkennen kann, um welches Format es sich handelt:
Beispiel
<video poster="Demofilm.png" controls>
  <source src="Demofilm.webm" type="video/webm" />
  <source src="Demofilm.ogg"  type="video/ogg" />
</video>

[Bearbeiten] Einbinden einer Quelle mit src

Beispiel ansehen …
  <video src="Demofilm.mp4" autoplay controls>
    Ihr Browser kann dieses Video nicht wiedergeben.<br>
    Dieser Film zeigt eine Demonstration des video-Elements. 
    Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.
  </video>
Dieses Beispiel verdeutlicht die Verwendung des Video-Elements. Dabei wird das src-Attribut verwendet, um ein Video einzubinden.
Beachten Sie: Dies hat jedoch den Nachteil, dass der Browser das Format des angegebenen Videos auch unterstützen muss. Eine andere Möglichkeit, die es Browsern ermöglicht, zwischen verschiedenen Formaten eines Videos auszuwählen, findet sich im nächsten Beispiel.

[Bearbeiten] Einbindung mehrerer Versionen mit source

Beispiel ansehen …
<video autoplay controls> <source src="Demofilm.mp4" type="video/mp4"> <source src="Demofilm.ogv" type="video/ogv"> Ihr Browser kann dieses Video nicht wiedergeben.<br> Dieser Film zeigt eine Demonstration des video-Elements. Sie können ihn unter <a href="#">Link-Addresse</a> abrufen. </video>

Hier wird ein zusätzliches Element mit dem Namen source verwendet, um ein Videos in verschiedenen Formaten einbinden zu können.

[Bearbeiten] Vorschaubild anzeigen

Beispiel
<!DOCTYPE html> <html> <head> <title>Video mit Vorschau anzeigen</title> </head> <body> <video controls poster="vorschaubild.png"> <source src="film.mp4" type="video/mp4"> <source src="film.ogv" type="video/ogv"> </video> </body> </html>

Das Attribut poster enthält den Pfad zu einer Grafik, die angezeigt wird, falls die Videodatei nicht verfügbar ist oder bevor das Video geladen beziehungsweise abgespielt wird.

[Bearbeiten] Steuerung

[Bearbeiten] controls

Mit dem controls-Attribut lädt der Browser eine eigene Steuerungsoberfläche, mit dem die Benutzer Videos anhalten oder erneut abspielen können. Das Einbinden eines externen Players oder eines eigens dafür geschriebenen JavaScripts ist so nicht mehr notwendig.

Beispiel ansehen …
<video autoplay controls> <source src="Demofilm.mp4" type="video/mp4"> <source src="Demofilm.ogv" type="video/ogv"> Ihr Browser kann dieses Video nicht wiedergeben.<br> Dieser Film zeigt eine Demonstration des video-Elements. Sie können ihn unter <a href="#">Link-Addresse</a> abrufen. </video>

[Bearbeiten] Steuerung durch JavaScript

Des Weiteren ist es aber immer noch möglich, die Elemente über JavaScript zu kontrollieren.

Beispiel ansehen …
<video id="player" >
  <source src="Demofilm.mp4" type="video/mp4">
  <source src="Demofilm.ogv" type="video/ogv">
    Ihr Browser kann dieses Video nicht wiedergeben.<br>
    Dieser Film zeigt eine Demonstration des video-Elements. 
    Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.
</video>
 
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="duration">Länge anzeigen</button>
<p id="ausgabe"></p>
 
<script>
  var song = document.getElementById('player');
  document.getElementById('play').addEventListener('click', function() { song.play(); }, false);
  document.getElementById('pause').addEventListener('click', function() { song.pause(); }, false);
  document.getElementById('duration').addEventListener('click', function() { 
  document.getElementById('ausgabe').innerHTML = 'Die Dauer des Videos beträgt: '+ song.duration; +' Sekunden.'}, false);
</script>

[Bearbeiten] Untertitel

[Bearbeiten] track

Mit dem Element track können Sie Textdateien in Videos einbinden und anzeigen.[3] Dies dient einerseits der Anzeige von Untertiteln (subtitles), andererseits aber auch der Ausgabe von Bildunterschriften für Sehbehinderte (captions). [4]

  • IE 10
  • Firefox
  • Chrome
  • Opera
  • Safari 6
  • HTML5
Beispiel
<!DOCTYPE html>
<html>
  <head>
    <title>Audio-Player mit HTML5</title>
  </head>
  <body>
    <video width="320" height="240" controls>
       <source src="leben_des_brian.mp4" type="video/mp4">
       <source src="leben_des_brian.ogg" type="video/ogg">
       <track src="subtitles_de.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
       <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
       Ihr Browser kann dieses Video nicht wiedergeben.<br>
       Dieser Film zeigt eine Demonstration des video-Elements. 
       Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.
    </video>
  </body>
</html>

Folgende Attribute sind möglich:

  • default: gibt den Standardwert an
  • kind="...": legt die Art der Texteinblendungen fest:
    • "captions": Bildunterschriften
    • "chapters": Kapitel
    • "descriptions": Beschreibungen
    • "metadata": Metadaten (werden nicht angezeigt)
    • "subtitles": Untertitel
  • "label": beschreibt Text-Track
  • "src": Pflichtangabe, referenziert URL der Textquelle im .vtt-Format
  • "srclang": spezifiziert Sprache, Pflichtangabe bei kind="subtitles"


[Bearbeiten] Umschalten der Untertitel

  • IE 10
  • Firefox
  • Chrome
  • Opera
  • Safari
  • HTML5

Im Internet Explorer erscheint bei mehreren angebotenen Untertiteln bei einem Klick auf die Schaltfläche CC (für "Closed Captioning") ein Auswahlmenü für die verschiedenen Versionen. In anderen Browsern ist dies Teil des Players.

[Bearbeiten] Beschreibungen für Sehbehinderte

Neben der Einblendung von Untertiteln könnte man alternativ auch eine Beschreibung der gezeigten Bilder für Sehbehinderte anbieten:

Beispiel
    <video width="320" height="240" controls>
       <source src="leben_des_brian.mp4" type="video/mp4">
       <source src="leben_des_brian.ogg" type="video/ogg">
       <track src="subtitles_de.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
       <track src="beschreibung_de.vtt" kind="descriptions" >
    </video>

„Normale“ Browser würden nur die Untertitel anzeigen, Screenreader geben auch die Beschreibungen aus.

Beachten Sie: Der Internet Explorer erkennt WebVTT-Dateien nur, wenn Sie den MIME Type deklariert haben. Hierzu müssen Sie in der .htaccess-Datei auf eine passendes Verzeichnis verweisen, das AddType text/vtt .vtt enthält.

[Bearbeiten] Weblinks

  1. stackoverflow: Autoplay of HTML5 video doesn't work
  2. techslides: Sample WebM, Ogg, and MP4 Video Files for HTML5
  3. drweb.de: tracks - Untertitel für Videos ausgeben
  4. MDN: Adding captions and subtitles to HTML5 video

[Bearbeiten] Siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML