Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Video

Nutzer mögen Videos. Sie können lustig und gleichzeitig informativ sein. Auf Mobilgeräten lassen sich Informationen in Form von Videos meist einfacher konsumieren. Aber Videos verbrauchen Bandbreite und funktionieren je nach Plattform unterschiedlich gut. Nutzer mögen es nicht, wenn ein Video ewig lädt oder beim Drücken der Wiedergabetaste nichts passiert. Hier erfahren Sie, wie Sie Ihrer Website Videoinhalte ganz einfach hinzufügen und den Nutzern die bestmögliche Nutzererfahrung bieten können - egal auf welchem Gerät.

Video hinzufügen

Hier erfahren Sie, wie Sie Videoinhalte ganz einfach zu Ihrer Website hinzufügen und den Nutzern die bestmögliche Nutzererfahrung bieten können - egal auf welchem Gerät.

TL;DR

  • Verwenden Sie das Videoelement zum Laden, Decodieren und Abspielen von Videos auf Ihrer Website.
  • Erstellen Sie die Videoinhalte in verschiedenen Formaten, um eine Reihe mobiler Plattformen abzudecken.
  • Achten Sie auf die richtige Größe der Videos, damit diese nicht ihre Container sprengen.
  • Achten Sie auf Zugänglichkeit. Fügen Sie das Track-Element hinzu und ordnen Sie es dem Videoelement unter.

Videoelement hinzufügen

  • Verwenden Sie das Videoelement zum Laden, Decodieren und Abspielen von Videos auf Ihrer Website:
<video src="chrome.webm" type="video/webm">
    <p>Ihr Browser unterstützt das Videoelement nicht.</p>
</video>

Mehrere Dateiformate angeben

Nicht alle Browser unterstützen dieselben Videoformate. Mithilfe des <source>-Elements können Sie mehrere Formate als Ausweichmöglichkeit angeben, falls der Browser des Nutzers eines der Formate nicht unterstützt. Beispiel:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

Beim Parsen der <source>-Tags durch den Browser wird anhand des optionalen Attributs type ermittelt, welche Datei heruntergeladen und wiedergegeben werden soll. Wenn der Browser WebM unterstützt, spielt er die Datei chrome.webm ab, andernfalls wird überprüft, ob MPEG-4-Videos abgespielt werden können. Weitere Informationen dazu, wie Video- und Audioinhalte im Web funktionieren, finden Sie unter A Digital Media Primer for Geeks (Leitfaden zu digitalen Medien für Computerfreaks).

Dieser Ansatz bietet mehrere Vorteile im Vergleich zu verschiedenen HTML-Standards oder serverseitigen Skripts, besonders im Hinblick auf Mobilgeräte:

  • Entwickler können Formate in der bevorzugten Reihenfolge anordnen.
  • Durch die native clientseitige Umschaltung wird die Latenz verringert. Es wird nur eine Anforderung zum Abrufen des Inhalts gesendet.
  • Die Wahl eines Formats durch den Browser ist einfacher, schneller und unter Umständen zuverlässiger als die Verwendung einer serverseitigen Supportdatenbank mit User-Agent-Erkennung.
  • Durch die Angabe des Typs jeder Dateiquelle wird die Netzwerkleistung verbessert. Der Browser kann eine Videoquelle auswählen, ohne einen Teil des Videos herunterladen zu müssen, um das Format zu ermitteln.

Diese Punkte spielen vor allem in mobilen Kontexten eine wichtige Rolle, wo Bandbreite und Latenz höchste Priorität haben und die Geduld der Nutzer meist schnell am Ende ist. Der Verzicht auf ein Type-Attribut kann sich im Falle mehrerer Quellen mit nicht unterstützten Typen auf die Leistung auswirken.

Vergleichen Sie anhand der Entwicklertools für Ihren mobilen Browser die Netzwerkaktivität mit und ohne Type-Attribute. Darüber hinaus sollten Sie die Antwortheader in den Entwicklertools für Ihren Browser überprüfen, um sicherzustellen, dass Ihr Server den richtigen MIME-Typ zurückgibt. Andernfalls lässt sich nicht überprüfen, um welche Art von Videoquelle es sich handelt.

Start- und Endzeit festlegen

Sparen Sie Bandbreite und machen Sie Ihre Website reaktionsschneller, indem Sie dem Videoelement mithilfe der Media Fragments-API eine Start- und Endzeit hinzufügen.

Zum Hinzufügen eines Medienfragments fügen Sie der Medien-URL einfach #t=[start_time][,end_time] hinzu. Wenn das Video zum Beispiel von Sekunde 5 - 10 abgespielt werden soll, geben Sie Folgendes an:

<source src="video/chrome.webm#t=5,10" type="video/webm">

Mithilfe der Media Fragments-API können Sie auch mehrere Ansichten desselben Videos bereitstellen - ähnlich wie Cue-Punkte bei einer DVD - ohne mehrere Dateien codieren und bereitstellen zu müssen.

Suchen Sie mithilfe der Entwicklertools für Ihren Browser in den Antwortheadern nach Accept-Ranges: bytes:

Screenshot der Chrome-Entwicklertools: Accept-Ranges: bytes

Posterbild hinzufügen

Fügen Sie dem Videoelement ein Poster-Attribut hinzu, damit Ihre Nutzer bereits beim Laden des Elements wissen, worum es in dem Video geht, ohne es herunterladen oder die Wiedergabe starten zu müssen.

<video poster="poster.jpg" ...>
  ...
</video>

Ein Poster kann auch eine Ausweichmöglichkeit sein, falls das Attribut src des Videos beschädigt ist oder keines der bereitgestellten Videoformate unterstützt wird. Der einzige Nachteil bei Posterbildern ist die zusätzliche Dateianforderung, die etwas Bandbreite verbraucht und Rendering erfordert. Weitere Informationen finden Sie unter Bildoptimierung.

Hier sehen Sie eine Gegenüberstellung von Videos mit und ohne Posterbild. Wir haben das Posterbild grau dargestellt, um deutlich zu machen, dass es sich nicht um das Video handelt:

Android Chrome-Screenshot, Hochformat: ohne Poster Android Chrome-Screenshot, Hochformat: mit Poster

Alternativen für veraltete Plattformen anbieten

Nicht alle Videoformate werden auf allen Plattformen unterstützt. Informieren Sie sich, welche Formate auf den gängigen Plattformen unterstützt werden, und stellen Sie sicher, dass sich Ihr Video dort abspielen lässt.

Unterstützte Formate ermitteln

Mit canPlayType() können Sie herausfinden, welche Videoformate unterstützt werden. Bei dieser Methode wird auf der Grundlage eines Zeichenfolgenarguments bestehend aus mime-type und optionalen Codecs einer der folgenden Werte zurückgegeben:

Zurückgegebener Wert Beschreibung
(leere Zeichenfolge) Der Container bzw. Codec wird nicht unterstützt.
maybe Container und Codec(s) werden möglicherweise unterstützt, der Browser muss jedoch einen Teil des Videos herunterladen, um dies zu überprüfen.
probably Das Format wird anscheinend unterstützt.

Im Folgenden finden Sie einige Beispiele für canPlayType()-Argumente und zurückgegebene Werte in Chrome:

Typ Antwort
video/xyz (leere Zeichenfolge)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (leere Zeichenfolge)
video/xyz; codecs="nonsense, noise" (leere Zeichenfolge)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" probably
video/webm maybe
video/webm; codecs="vp8, vorbis" probably

Videos in mehreren Formaten erstellen

Es gibt viele Tools, mit denen Sie dasselbe Video in unterschiedlichen Formaten speichern können:

Verwendetes Format ermitteln

Sie möchten wissen, für welches Videoformat sich der Browser letztlich entschieden hat?

In JavaScript können Sie anhand der Eigenschaft currentSrc des Videos feststellen, welche Quelle verwendet wurde.

Wie das in der Praxis aussieht, erfahren Sie in dieser Demo: Chrome und Firefox haben sich für chrome.webm entschieden, weil diese Datei in der Liste der potenziell von diesen Browsern unterstützten Quellen ganz oben steht, während Safari chrome.mp4 ausgewählt hat.

Videogröße richtig wählen

Für die Zufriedenheit der Nutzer spielt die Größe eine wichtige Rolle.

TL;DR

  • Achten Sie darauf, dass Framegröße und Qualität Ihrer Videos nicht die Möglichkeiten der Plattform übersteigen.
  • Machen Sie Ihre Videos nicht länger als unbedingt nötig.
  • Lange Videos können beim Download und bei der Suche zu Problemen führen. Einige Browser müssen unter Umständen warten, bis das Video heruntergeladen wurde, bevor sie es abspielen können.

Videogröße ermitteln

Die tatsächlich codierte Framegröße des Videos kann von den Abmessungen des Videoelements abweichen, ebenso wie ein Bild möglicherweise nicht in seiner tatsächlichen Größe angezeigt wird.

Die codierte Größe eines Videos lässt sich anhand der Eigenschaften videoWidth und videoHeight des Videoelements ermitteln. width und height geben die Größe des Videoelements zurück, die möglicherweise anhand von CSS oder Inline-Breiten- und -Höhenattributen festgelegt wurde.

Sicherstellen, dass Videos nicht die Größe der Container sprengen

Wenn Videoelemente für den Darstellungsbereich zu groß sind, sprengen sie möglicherweise die Größe der Container. Die Folge: Nutzer können sich weder den Inhalt ansehen noch die Steuerelemente nutzen.

Screenshot von Chrome für Android, Hochformat: Größe des Videoelements ohne CSS übersteigt Darstellungsbereich Screenshot von Chrome für Android, Querformat: Größe des Videoelements ohne CSS übersteigt Darstellungsbereich

Die Videogröße lässt sich mit JavaScript oder CSS steuern. JavaScript-Bibliotheken und Plug-ins wie FitVids ermöglichen die Beibehaltung der richtigen Größe und des richtigen Formats, selbst für Flash-Videos von YouTube und anderen Quellen.

Mithilfe von CSS-Medienabfragen lässt sich die Größe von Elementen je nach Größe des Darstellungsbereichs angeben. Mit max-width: 100% liegen Sie nie falsch.

Für Medieninhalte in iframes, zum Beispiel YouTube-Videos, sollten Sie einen responsiven Ansatz wie den von John Surdakowski) versuchen.

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

<div class="video-container">
  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
          frameborder="0" width="560" height="315">
  </iframe>
</div>

Vergleichen Sie das Beispiel mit und ohne Responsive Webdesign.

Videoplayer anpassen

Videos werden je nach Plattform unterschiedlich dargestellt. Bei Lösungen für Mobilgeräte muss die Geräteausrichtung berücksichtigt werden. Verwenden Sie die Fullscreen-API, um die Vollbildansicht von Videoinhalten zu steuern.

Videos werden je nach Plattform unterschiedlich dargestellt. Bei Lösungen für Mobilgeräte muss die Geräteausrichtung berücksichtigt werden. Verwenden Sie die Fullscreen-API, um die Vollbildansicht von Videoinhalten zu steuern.

Wie die Geräteausrichtung geräteübergreifend funktioniert

Bei Desktopmonitoren oder Laptops ist die Geräteausrichtung kein Thema. Anders sieht das jedoch bei Webseiten für Mobilgeräte und Tablets aus.

Safari auf dem iPhone schaltet gut zwischen Hoch- und Querformat um:

Screenshot einer Videowiedergabe in Safari auf dem iPhone, Hochformat Screenshot einer Videowiedergabe in Safari auf dem iPhone, Querformat

Auf einem iPad und in Chrome unter Android kann die Geräteausrichtung hingegen problematisch sein. Zum Beispiel sieht eine Videowiedergabe ohne jegliche Anpassung auf einem iPad im Querformat so aus:

Screenshot einer Videowiedergabe in Safari auf einem iPad mit Retina-Display, Querformat

Durch Verwendung von width: 100% oder max-width: 100% in CSS lassen sich viele Layoutprobleme in Verbindung mit der Geräteausrichtung lösen. Darüber hinaus sollten Sie eventuell auch Vollbildalternativen in Betracht ziehen.

Inline- oder Vollbildanzeige

Videos werden je nach Plattform unterschiedlich dargestellt. In Safari auf einem iPhone wird ein Videoelement inline auf einer Webseite angezeigt, die Wiedergabe erfolgt jedoch im Vollbildmodus:

Screenshot eines Videoelements auf dem iPhone, Hochformat

Unter Android können Nutzer den Vollbildmodus durch Klicken auf das entsprechende Symbol auswählen. Die Inline-Anzeige ist jedoch bei der Videowiedergabe Standard:

Screenshot einer Videowiedergabe in Chrome unter Android, Hochformat

In Safari auf einem iPad erfolgt die Videowiedergabe inline:

Screenshot einer Videowiedergabe in Safari auf einem iPad mit Retina-Display, Querformat

Vollbildansicht von Inhalten steuern

Bei Plattformen, die die Videowiedergabe im Vollbildmodus nicht erzwingen, wird die Fullscreen-API weitestgehend unterstützt. Verwenden Sie diese API, um die Vollbildansicht von Inhalten oder der Seite zu steuern.

Zur Vollbildansicht eines Elements, z. B. video:

elem.requestFullScreen();

Zur Vollbildansicht des gesamten Dokuments:

document.body.requestFullScreen();

Änderungen am Vollbildmodus können Sie auch hören:

video.addEventListener("fullscreenchange", handler);

Oder überprüfen Sie, ob sich das Element derzeit im Vollbildmodus befindet:

console.log("In full screen mode: ", video.displayingFullscreen);

Die Art und Weise, wie Elemente im Vollbildmodus angezeigt werden, können Sie auch mithilfe der CSS-Pseudoklasse :fullscreen ändern.

Auf Geräten, die die Fullscreen-API unterstützen, sollten Sie die Verwendung von Miniaturansicht-Bildern als Platzhalter für Videos in Betracht ziehen:

In dieser Demo erfahren Sie, wie das Ganze in der Praxis aussieht.

Warum Zugänglichkeit wichtig ist

Zugänglichkeit ist keine Funktion. Nutzer, die nicht hören oder sehen können, sind nicht in der Lage, sich ein Video ohne Untertitel oder Beschreibungen anzusehen. Der Zeitaufwand für das Hinzufügen solcher Untertitel oder Beschreibungen steht in keinem Verhältnis zu der schlechten Erfahrung, die Sie Ihren Nutzern bieten, wenn Sie darauf verzichten. Für alle Nutzer sollte zumindest ein Grundmaß an Nutzerfreundlichkeit gegeben sein.

Untertitel für eine bessere Zugänglichkeit hinzufügen

Um Medien auf Mobilgeräten besser zugänglich zu machen, fügen Sie Untertitel oder Beschreibungen mithilfe des Track-Elements hinzu.

Bei Verwendung des Track-Elements sehen die Untertitel wie folgt aus:

Screenshot mit Untertiteln, die unter Verwendung des Track-Elements in Chrome für Android angezeigt werden

Track-Element hinzufügen

Es ist ganz einfach, Ihr Video mit Untertiteln zu versehen - Sie müssen lediglich ein Track-Element hinzufügen, das dem Videoelement untergeordnet ist:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions"
         kind="captions" srclang="en" default>
  <p>This browser does not support the video element.</p>
</video>

Das Attribut src des Track-Elements enthält den Speicherort der Track-Datei.

Untertitel in Track-Datei definieren

Eine Track-Datei besteht aus zeitlich festgelegten Cues im WebVTT-Format:

WEBVTT

00:00.000 --> 00:04.000
Mann sitzt mit seinem Laptop auf einem Ast.

00:05.000 --> 00:08.000
Der Ast bricht und der Mann fällt herunter.

...

Kurzübersicht

Hier finden Sie eine kurze Übersicht über die Eigenschaften des Videoelements.

Attribute des Videoelements

Eine vollständige Liste der Attribute des Videoelements samt Definitionen finden Sie in den Spezifikationen zum Videoelement.

Attribut Verfügbarkeit Beschreibung
src Alle Browser Adresse (URL) des Videos
poster Alle Browser Adresse (URL) einer Bilddatei, die der Browser anzeigen kann, sobald das Videoelement erscheint. Der Videoinhalt muss nicht heruntergeladen werden.
preload Das Preload-Attribut wird von allen mobilen Browsern ignoriert. Weist den Browser darauf hin, dass das Vorabladen von Metadaten oder Teilen des Videos vor der Wiedergabe erstrebenswert ist. Mögliche Optionen sind `none`, `metadata` oder `auto`. Weitere Details finden Sie im Abschnitt `Vorab laden`.
autoplay Wird auf dem iPhone und in Chrome für Android nicht unterstützt, jedoch in sämtlichen Desktop-Browsern, auf dem iPad sowie in Firefox und Opera für Android. Download und Wiedergabe werden schnellstmöglich gestartet (siehe Abschnitt `Automatische Wiedergabe`).
loop Alle Browser Das Video wird in einer Endlosschleife abgespielt.
controls Alle Browser Die Standard-Steuerelemente werden angezeigt, etwa zur Wiedergabe oder zum Pausieren des Videos.

Automatische Wiedergabe

Bei Verwendung von autoplay wird das Video in Desktop-Browsern schnellstmöglich heruntergeladen und abgespielt. Unter iOS und in Chrome für Android funktioniert autoplay nicht. Die Nutzer müssen zum Abspielen des Videos auf den Bildschirm tippen.

Auch auf Plattformen, auf denen das Autoplay-Attribut verwendet werden kann, sollten Sie überlegen, ob eine Aktivierung sinnvoll ist:

  • Datennutzung kann teuer sein.
  • Wenn Medien ohne vorherige Zustimmung heruntergeladen und abgespielt werden, kann dies unerwartet Bandbreite und CPU-Leistung verschlingen und dabei das Rendern von Seiten verzögern.
  • Nutzer befinden sich möglicherweise in einer Situation, in der das Abspielen von Video- oder Audioinhalten aufdringlich erscheint.

Die automatische Wiedergabe kann in der Android WebView über die WebSettings-API konfiguriert werden. Standardmäßig ist true festgelegt, die Option kann jedoch von einer WebView-App deaktiviert werden.

Vorab laden

Das Attribut preload gibt dem Browser Auskunft darüber, wie viele Informationen oder Inhalte vorab geladen werden sollten.

Wert Beschreibung
none Der Nutzer sieht sich das Video möglicherweise überhaupt nicht an, sodass nichts vorab geladen werden sollte.
metadata Metadaten wie Dauer, Größe und Texttracks sollten vorab geladen werden, wobei das Video selbst möglichst außen vor gelassen werden sollte.
auto Der sofortige Download des gesamten Videos ist wünschenswert.

Das Attribut preload wirkt sich je nach Plattform unterschiedlich aus. Auf Desktopgeräten puffert Chrome zum Beispiel 25 Sekunden des Videos, unter iOS oder Android erfolgt hingegen kein Puffern. Das bedeutet, dass die Wiedergabe auf Mobilgeräten im Vergleich zu Desktopgeräten möglicherweise verzögert beginnt. Alle Details hierzu finden Sie auf der Testseite von Steve Souders.

JavaScript

Der HTML5 Rocks-Videoartikel fasst die JavaScript-Eigenschaften, -Methoden und -Ereignisse, die für die Steuerung der Videowiedergabe verwendet werden können, auf übersichtliche und verständliche Weise zusammen. Diese Informationen, die wir, sofern relevant, durch für Mobilgeräte spezifische Details ergänzt haben, finden Sie im Folgenden.

Eigenschaften

Eigenschaft Beschreibung
currentTime Wiedergabeposition in Sekunden abrufen oder festlegen
volume Aktuelle Lautstärke für das Video abrufen oder festlegen
muted Stummschaltung abrufen oder festlegen
playbackRate Wiedergaberate abrufen oder festlegen, wobei 1 die Standardgeschwindigkeit ist, mit der das Video vorwärts abgespielt wird
buffered Informationen dazu, inwieweit das Video gepuffert wurde und abgespielt werden kann (siehe Demo)
currentSrc Die Adresse des Videos, das zurzeit abgespielt wird
videoWidth Breite des Videos in Pixel, die von der Breite des Videoelements abweichen kann
videoHeight Höhe des Videos in Pixel, die von der Höhe des Videoelements abweichen kann

Auf Mobilgeräten werden playbackRate (siehe Demo) und volume nicht unterstützt.

Methoden

Methode Beschreibung
load() Laden oder erneutes Laden einer Videoquelle, ohne dass die Wiedergabe gestartet wird, zum Beispiel, wenn das Videoattribut "src" mit JavaScript geändert wird
play() Videowiedergabe an der aktuellen Position starten
pause() Videowiedergabe an der aktuellen Position pausieren
canPlayType('format') Informationen zu den unterstützten Formaten (siehe `Unterstützte Formate ermitteln`)

Auf Mobilgeräten - mit Ausnahme von Opera unter Android - funktionieren play() und pause() nur, wenn eine Aktion des Nutzers vorausgegangen ist, etwa das Klicken auf eine Schaltfläche: Demo. Ebenso kann die Wiedergabe von Inhalten wie eingebetteten YouTube-Videos nicht ausgelöst werden.

Ereignisse

Es kann nur ein Teil der Medienereignisse ausgelöst werden. Eine vollständige Liste finden Sie auf der Seite Media events (Medienereignisse) im Mozilla Developer Network.

Ereignis Beschreibung
canplaythrough Wird ausgelöst, wenn der Browser aufgrund der verfügbaren Datenmenge der Ansicht ist, dass er das Video vollständig ohne Unterbrechung abspielen kann
ended Wird ausgelöst, wenn die Wiedergabe des Videos beendet ist
error Wird im Falle eines Fehlers ausgelöst
playing Wird ausgelöst, wenn das Video zum ersten Mal abgespielt oder erneut gestartet wird bzw. nachdem es pausiert wurde
progress Wird in regelmäßigen Abständen ausgelöst, um den Download-Fortschritt anzugeben
waiting Wird ausgelöst, wenn eine Aktion verzögert ist, weil zunächst eine andere Aktion abgeschlossen werden muss
loadedmetadata Wird ausgelöst, wenn der Browser die Metadaten des Videos geladen hat: Dauer, Größe und Texttracks