Sie haben eine Videodatei für das Web vorbereitet. Sie haben die richtigen Abmessungen und die richtige Auflösung angegeben. Sie haben sogar separate WebM- und MP4-Dateien für verschiedene Browser erstellt.
Damit andere Ihr Video sehen können, müssen Sie es einer Webseite hinzufügen. Dazu müssen zwei HTML-Elemente hinzugefügt werden: das <video>-Element und das <source>-Element. Neben den Grundlagen zu diesen Tags werden in diesem Artikel auch Attribute erläutert, die du diesen Tags hinzufügen solltest, um eine gute Nutzererfahrung zu schaffen.
Einzelne Datei angeben
Obwohl es nicht empfohlen wird, können Sie das Videoelement auch allein verwenden. Verwenden Sie immer das Attribut type, wie unten gezeigt. Der Browser verwendet diese Angabe, um zu bestimmen, ob er die bereitgestellte Videodatei abspielen kann. Wenn dies nicht möglich ist, wird der eingeschlossene Text angezeigt.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Mehrere Dateiformate angeben
Wie bereits unter Grundlagen zu Mediendateien erwähnt, unterstützen nicht alle Browser dieselben Videoformate. Mit dem <source>-Element kannst du mehrere Formate als Fallback angeben, falls der Browser des Nutzers eines davon nicht unterstützt.
Im folgenden Beispiel wird das eingebettete Video erstellt, das später in diesem Artikel als Beispiel verwendet wird.
<video controls>
<source src="chrome.webm" type="video/webm">
<source src="chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Sie sollten den <source>-Tags immer ein type-Attribut hinzufügen, auch wenn es optional ist. So wird sichergestellt, dass der Browser nur die Datei herunterlädt, die er auch abspielen kann.
Dieser Ansatz bietet gegenüber der Bereitstellung unterschiedlicher HTML-Inhalte oder serverseitigem Scripting mehrere Vorteile, insbesondere auf Mobilgeräten:
- Sie können Formate in der Reihenfolge Ihrer Präferenz auflisten.
- Durch den clientseitigen Wechsel wird die Latenz reduziert, da nur eine Anfrage zum Abrufen von Inhalten gestellt wird.
- Wenn du das Format vom Browser auswählen lässt, ist das einfacher, schneller und potenziell zuverlässiger, als eine serverseitige Supportdatenbank mit User-Agent-Erkennung zu verwenden.
- Wenn Sie den Typ jeder Dateiquelle angeben, verbessert sich die Netzwerkleistung. Der Browser kann eine Videoquelle auswählen, ohne einen Teil des Videos herunterladen zu müssen, um das Format zu ermitteln.
Diese Probleme sind besonders im mobilen Kontext wichtig, wo Bandbreite und Latenz knapp sind und die Geduld der Nutzer wahrscheinlich begrenzt ist. Wenn Sie das Attribut type weglassen, kann sich das auf die Leistung auswirken, wenn es mehrere Quellen mit nicht unterstützten Typen gibt.
Es gibt verschiedene Möglichkeiten, sich die Details anzusehen. Weitere Informationen zur Funktionsweise von Video und Audio im Web finden Sie unter A Digital Media Primer for Geeks. Sie können auch das Remote-Debugging in den Entwicklertools verwenden, um die Netzwerkaktivität mit Typattributen und ohne Typattribute zu vergleichen.
Start- und Endzeit angeben
Bandbreite sparen und die Website responsiver gestalten: Verwende Medienfragmente, um dem Videoelement Start- und Endzeiten hinzuzufügen.
Wenn Sie ein Medienfragment verwenden möchten, fügen Sie der Medien-URL #t=[start_time][,end_time] hinzu. Wenn Sie das Video beispielsweise von Sekunde 5 bis 10 abspielen möchten, geben Sie Folgendes an:
<source src="chrome.webm#t=5,10" type="video/webm">
Sie können die Zeiten auch in <hours>:<minutes>:<seconds> angeben. Beispiel: #t=00:01:05 startet das Video bei einer Minute und fünf Sekunden. Wenn Sie nur die erste Minute des Videos abspielen möchten, geben Sie #t=,00:01:00 an.
Mit dieser Funktion können Sie mehrere Ansichten desselben Videos bereitstellen, z. B. Cue-Punkte auf einer DVD, ohne mehrere Dateien codieren und bereitstellen zu müssen.
Damit diese Funktion funktioniert, muss dein Server Bereichsanfragen unterstützen und diese Funktion muss aktiviert sein. Die meisten Server aktivieren Bereichsanfragen standardmäßig. Da einige Hosting-Dienste sie deaktivieren, sollten Sie prüfen, ob Bereichsanfragen für die Verwendung von Fragmenten auf Ihrer Website verfügbar sind.
Glücklicherweise können Sie dies in den Entwicklertools Ihres Browsers tun. In Chrome finden Sie sie beispielsweise im Netzwerkbereich. Suchen Sie nach dem Header Accept-Ranges und prüfen Sie, ob er bytes enthält. In der Abbildung habe ich einen roten Rahmen um diesen Header gezeichnet. Wenn Sie bytes nicht als Wert sehen, müssen Sie sich an Ihren Hostanbieter wenden.
Posterbild hinzufügen
Füge dem video-Element ein Poster-Attribut hinzu, damit die Zuschauer eine Vorstellung vom Inhalt bekommen, sobald das Element geladen wird, ohne das Video herunterladen oder die Wiedergabe starten zu müssen.
<video poster="poster.jpg" ...>
…
</video>
Ein Poster kann auch als Fallback dienen, wenn das Video src beschädigt ist oder keines der bereitgestellten Videoformate unterstützt wird. Der einzige Nachteil eines Posterbilds ist eine zusätzliche Dateianfrage, die Bandbreite verbraucht und gerendert werden muss.
Weitere Informationen finden Sie unter Bilder effizient codieren.
Achten Sie darauf, dass Videos nicht über Container hinausgehen
Wenn Videoelemente zu groß für den Darstellungsbereich sind, können sie über den Container hinausragen, sodass der Nutzer den Inhalt nicht sehen oder die Steuerelemente nicht verwenden kann.
Sie können die Videogröße mit CSS steuern. Wenn CSS nicht alle Ihre Anforderungen erfüllt, können JavaScript-Bibliotheken und Plug-ins wie FitVids helfen, auch für Videos von YouTube und anderen Quellen. Leider können diese Ressourcen die Größe der Netzwerknutzlast erhöhen, was sich negativ auf Ihre Einnahmen und die Geldbörsen Ihrer Nutzer auswirkt.
Für einfache Anwendungsfälle wie die hier beschriebenen können Sie CSS-Medienabfragen verwenden, um die Größe von Elementen abhängig von den Abmessungen des Darstellungsbereichs anzugeben. max-width:
100% ist hierbei hilfreich.
Für Medieninhalte in iFrames (z. B. YouTube-Videos) empfiehlt sich ein responsiver Ansatz (wie der von John Surdakowski vorgeschlagene).
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 responsive Beispiel mit der nicht responsiven Version. Wie Sie sehen, ist die nicht responsive Version nicht besonders nutzerfreundlich.
Ausrichtung des Geräts
Die Geräteausrichtung ist bei Desktopmonitoren oder Laptops kein Problem, aber beim Design von Webseiten für Mobilgeräte und Tablets ist sie sehr wichtig.
Safari auf dem iPhone wechselt gut zwischen Hoch- und Querformat:
Die Geräteausrichtung auf einem iPad und Chrome unter Android kann problematisch sein. Ohne Anpassung sieht ein Video, das auf einem iPad im Querformat abgespielt wird, beispielsweise so aus:
Wenn Sie die width: 100% oder max-width: 100% des Videos mit CSS festlegen, können viele Layoutprobleme im Zusammenhang mit der Geräteausrichtung behoben werden.
Autoplay
Das Attribut autoplay steuert, ob der Browser ein Video sofort herunterlädt und abspielt. Die genaue Funktionsweise hängt von der Plattform und dem Browser ab.
Chrome: Hängt von mehreren Faktoren ab, u. a. davon, ob die Wiedergabe auf einem Computer erfolgt und ob der mobile Nutzer deine Website oder App zu seinem Startbildschirm hinzugefügt hat. Weitere Informationen finden Sie unter Best Practices für die automatische Wiedergabe.
Firefox: Blockiert alle Videos und Töne, bietet Nutzern aber die Möglichkeit, diese Einschränkungen für alle oder bestimmte Websites zu lockern. Weitere Informationen finden Sie unter Automatische Wiedergabe von Medien in Firefox zulassen oder blockieren.
Safari: Erforderte in der Vergangenheit eine Nutzergeste, hat diese Anforderung aber in neueren Versionen gelockert. Weitere Informationen finden Sie unter Neue <video>-Richtlinien für iOS.
Selbst auf Plattformen, auf denen die automatische Wiedergabe möglich ist, solltest du dir überlegen, ob es eine gute Idee ist, sie zu aktivieren:
- Die Datennutzung kann teuer sein.
- Wenn Medien wiedergegeben werden, bevor der Nutzer dies möchte, kann das Bandbreite und CPU-Leistung beanspruchen und dadurch das Rendern der Seite verzögern.
- Nutzer befinden sich möglicherweise in einer Umgebung, in der die Wiedergabe von Video oder Audio störend ist.
Vorab laden
Das Attribut preload gibt dem Browser einen Hinweis darauf, wie viele Informationen oder Inhalte vorab geladen werden sollen.
| Wert | Beschreibung |
|---|---|
none |
Der Nutzer entscheidet sich möglicherweise, das Video nicht anzusehen. Daher sollten Sie nichts vorab laden. |
metadata |
Metadaten (Dauer, Abmessungen, Texttracks) sollten vorab geladen werden, aber mit minimalem Video. |
auto |
Das sofortige Herunterladen des gesamten Videos wird als wünschenswert angesehen. Ein leerer String führt zum selben Ergebnis. |
Das Attribut preload hat auf verschiedenen Plattformen unterschiedliche Auswirkungen.
In Chrome werden beispielsweise auf dem Desktop 25 Sekunden Video zwischengespeichert, unter iOS oder Android jedoch keine. Das bedeutet, dass es auf Mobilgeräten zu Verzögerungen beim Start der Wiedergabe kommen kann, die auf Computern nicht auftreten. Weitere Informationen findest du unter Schnelle Wiedergabe mit Audio- und Video-Preload oder im Blog von Steve Souders.
Nachdem Sie nun wissen, wie Sie Ihrer Webseite Medien hinzufügen, ist es an der Zeit, sich mit der Barrierefreiheit von Medien zu befassen. Dabei fügen Sie Ihrem Video Untertitel für Hörgeschädigte hinzu oder für den Fall, dass die Audiowiedergabe nicht möglich ist.