HTML/Tutorials/Multimedia/video

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Multimedia(Weitergeleitet von Webm)
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
HTML

Mit HTML5 können Sie Filme ohne Plugins oder Add-Ons wiedergeben. Dabei referenziert das video-Element als Container-Element auf eine (oder mehrere) Videodateien.

Unterstützte Formate[Bearbeiten]

Stellen Sie sich ein Videoformat als ZIP-Datei vor, die den codierten Video-Stream, die Tonspur und evtl. noch Unterittel enthält.

Bis jetzt existieren immer noch verschiedene Video- und Audio-Kodierungen. Obwohl die meisten Kameras und Mobiltelefone Filme im MP4-Format (mit H264-Codec) aufnehmen, gab es Vorbehalte, da der dort verwendete H264-Video-Codec unter Umständen zu Lizenzzahlungen verpflichtete. Aus diesen Gründen wurden für den Einsatz im Netz die freien Formate Ogg und WebM entwickelt. Mittlerweile hat sich WebM durchgesetzt und wird von allen Browser außer den IE9-11 unterstützt. Youtube, das ja zum Google-Konzern gehört, verwendet für alle Videos das webm-Format.

  • HTML5

Details: caniuse.com

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

Ab iOS 14.1
WebM
  • Chrome
  • Firefox
Cross.gif
  • Opera
  • Safari

Ab iOS 12.1
Empfehlung: Verwenden Sie zusätzlich die Type-Eigenschaft, damit der Browser erkennen kann, um welches Format es sich handelt:

video-Element[Bearbeiten]

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

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

Details: caniuse.com

  • autoplay: Das Video beginnt sofort mit dem Abspielen, wenn die Seite geladen ist.
    Beachten Sie: Nichts ist nerviger als ungewollt beginnende Musik oder Fanfarenstöße. Überlassen Sie dem Benutzer die Entscheidung, ob er das Video abspielen möchte.
    In Firefox, Safari und Chrome wird das Attribut vom Browser auf Wunsch ignoriert
    (Dies lässt sich vom Nutzer in den Browser-Einstellungen festlegen.)
    .
  • 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 oder ein leerer String – Verhalten entsprechend der Browsereinstellungen
    • metadata – nur die Metadaten werden geladen
    • none – Datei wird nicht vorgeladen, da nicht erwartet wird, dass sie benutzt wird
    • es gibt keinen Standardwert, die Spezifikation empfiehlt metadata
  • width: Angabe der Breite des Players (wird sonst automatisch erkannt)
Demofilm ansehen …
<video src="Demofilm.mp4" 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>

In diesem Beispiel wird eine mp4-Datei in das video-Element eingebunden. Das controls-Attribut sorgt dafür, dass der browsereigene Player erscheint. Mit einem Klick auf play startet das 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.


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

Einbinden einer Quelle mit src[Bearbeiten]

Beispiel ansehen …
<video src="Demofilm.mp4" 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.

mehrere Versionen mit source[Bearbeiten]

Mit dem source-Element können Sie mehrere Videos in verschiedenen Formaten einbinden.

Einbindung mehrerer Formate ansehen …
<video controls> <source src="Demofilm.mp4" type="video/mp4"> <source src="Demofilm.ogg" type="video/ogg"> 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>

Da heute alle Browser .mp4 und .webm unterstützen, hat sich der Einsatzzweck verschoben:

Einbindung von Videos mit unterschiedlichen Dateigrößen
<video controls> 
   <source src="Demofilm.mp4" type="video/mp4" media="all and (min-width:60em)">        
   // ~ 4MB   - 1080 x 607px
   <source src="Demofilm-small.mp4" type="video/mp4" media="all and (min-width:20em)">  
   // ~ 400KB – 480 x 320px
</video>

Über eine Medienabfrage der Viewportbreite entscheidet der Browser selbstständig, ob er die HD-Version oder einen Film mit kleinerer Auflösung abspielt.

Da der Browser das erste source-Element, dessen media-Attribut zutrifft , lädt, werden bei Media Queries mit min-width die source-Optionen mit den größeren Auflösungen zuerst aufgeführt.

Vorschaubild mit poster[Bearbeiten]

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.ogg" type="video/ogg"> </video> </body> </html>

Die Eigenschaft 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.

Steuerung mit controls[Bearbeiten]

Mit der controls-Eigenschaft 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.

Steuerung mit controls ansehen …
<video controls> <source src="Demofilm.mp4" type="video/mp4"> <source src="Demofilm.ogg" type="video/ogg"> 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>

Steuerung durch JavaScript[Bearbeiten]

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.ogg" type="video/ogg">
    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>

Schöner ist es, den "Play"- und den "Pause"-Button zu kombinieren und den Text jeweils zu tauschen (toggeln):

Untertitel mit track[Bearbeiten]

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

  • IE 10
  • Firefox
  • Chrome
  • Opera
  • Safari
  • 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"

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.

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

Metadaten[Bearbeiten]

Wenn ein Untertitel als "metadata" gekennzeichnet wurde, dann müssen diese Daten per JavaScript ausgelesen werden, um sie in einem anderen HTML-Element anzuzeigen. Dies ist dazu gedacht, um beispielsweise eine Infobox mit weiterführendem Inhalt zu füllen, der synchron zum im Video dargestellten Inhalt passt.

Beschreibungen für Sehbehinderte[Bearbeiten]

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.


Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

Einzelbelege

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