Multimedia/video
Inhaltsverzeichnis
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.
Browser | mp4 | ogg | webm |
---|---|---|---|
Chrome | |||
Edge | |||
Firefox | |||
Opera | |||
Safari | Ab iOS 14.1 |
- 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
video-Element
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)
<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.
<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.
Einbinden einer Quelle mit src
<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.
mehrere Versionen mit source
Mit dem source-Element können Sie mehrere Videos in verschiedenen Formaten einbinden.
Da heute alle Browser .mp4 und .webm unterstützen, hat sich der Einsatzzweck verschoben:
<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
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 durch JavaScript
Des Weiteren ist es aber immer noch möglich, die Elemente über JavaScript zu kontrollieren.
<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):
- codePen: video with custom play/pause button von Gunnar Bittersmann
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]
<!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 beikind="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:
<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
- HTML/Tutorials/Multimedia/Playlists
- Referenz: video
- Referenz: source
- Referenz: track
Weblinks
- Videos mit ffmpeg ins HTML5-Format konvertieren: http://www.elstel.org/html5video/FlashVersusHtml5Video.html.de#ffmpeg
- WHATWG: video
Einzelbelege