HTML/Tutorials/Multimedia/video

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
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

Stellen Sie sich ein Videoformat als ZIP-Datei vor, die den codierten Video-Stream, die Tonspur und evtl. noch Untertitel 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.

Browserunterstützung
caniuse.com
Browser  mp4  ogg webm
Chrome Tick.svg Tick.svg Tick.svg
Edge Tick.svg Tick.svg Tick.svg
Firefox Tick.svg Tick.svg Tick.svg
Opera Tick.svg Tick.svg Tick.svg
Safari Tick.svg Tick.svg
Ab iOS 14.1 		Tick.svg
  • 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
Empfehlung: Verwenden Sie zusätzlich die Type-Eigenschaft, damit der Browser erkennen kann, um welches Format es sich handelt.

video-Element

Browserunterstützung
caniuse.com

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:

  • 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]

Beschreibungen für multimediale Inhalte

Gerade bei den „neuen“, aber mittlerweile etablierten HTML5-Elementen wie audio, canvas, object und video wird der mögliche Fallback zwischen Start- und End-Tag häufig für eine kryptische Fehlermeldung à la „Ihr Browser kann kein …!“ missbraucht.

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.


Empfehlung: Verwenden Sie kurze, sinnvolle Beschreibungen des gezeigten Inhalts und, wenn möglich, einen Download-Link des nicht angezeigten Videos, Mediums.


Einbinden einer Quelle mit src

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

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 sollte der Browser selbstständig entscheiden, 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.

Leider wurd das media Attribute in vielen Browser nur beim `picture`-, aber nicht bei `video` Element untestützt.

Vorschaubild mit poster

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

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

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

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]


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.


Metadaten

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

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.

Siehe auch

Weblinks

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
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Multimedia/video&oldid=96973“