Sie haben eine Videodatei ordnungsgemäß 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 Sie zwei HTML-Elemente hinzufügen: das <video> Element und das
<source> Element. In diesem Artikel werden nicht nur die Grundlagen zu diesen Tags erläutert, sondern auch die Attribute, die Sie diesen Tags hinzufügen sollten, um eine gute Nutzererfahrung zu erzielen.
Einzelne Datei angeben
Obwohl dies nicht empfohlen wird, können Sie das Videoelement allein verwenden. Verwenden Sie immer das Attribut type wie unten gezeigt. Der Browser verwendet dieses Attribut, um zu ermitteln, 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 Sie in den Grundlagen zu Mediendateien erfahren haben, werden nicht alle Video
formate von allen Browsern unterstützt. Mit dem <source> Element können Sie mehrere Formate als Fallback
angeben, falls der Browser des Nutzers eines der Formate 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 abspielen kann.
Dieser Ansatz bietet mehrere Vorteile gegenüber der Bereitstellung von unterschiedlichem HTML- oder serverseitigem Scripting, insbesondere auf Mobilgeräten:
- Sie können Formate in der Reihenfolge ihrer Präferenz auflisten.
- Durch das clientseitige Umschalten wird die Latenz reduziert. Es wird nur eine Anfrage gesendet, um Inhalte abzurufen.
- Wenn Sie den Browser ein Format auswählen lassen, ist das einfacher, schneller und potenziell zuverlässiger als die Verwendung einer serverseitigen Supportdatenbank mit User-Agent-Erkennung.
- Wenn Sie den Typ jeder Dateiquelle angeben, 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 Probleme sind besonders wichtig im mobilen Kontext, wo Bandbreite und Latenz eine große Rolle spielen und die Geduld der Nutzer wahrscheinlich begrenzt ist. Wenn Sie das Attribut type weglassen, kann sich das auf die Leistung auswirken, wenn mehrere Quellen mit nicht unterstützten Typen vorhanden sind.
Es gibt verschiedene Möglichkeiten, sich die Details anzusehen. Im Artikel Eine Einführung in digitale Medien für Technikbegeisterte erfahren Sie mehr darüber, wie Video und Audio im Web funktionieren. 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
Sparen Sie Bandbreite und sorgen Sie dafür, dass Ihre Website reaktionsschneller ist: Verwenden Sie Media Fragments, um dem Videoelement Start- und Endzeiten hinzuzufügen.
Wenn Sie ein Media Fragment verwenden möchten, fügen Sie der Media-URL #t=[start_time][,end_time] hinzu. Wenn das Video beispielsweise von Sekunde 5 bis 10 abgespielt werden soll, 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 nur die erste Minute des Videos abgespielt werden soll, geben Sie #t=,00:01:00 an.
Mit dieser Funktion können Sie mehrere Ansichten desselben Videos bereitstellen, z. B. Cue-Punkte in einer DVD, ohne mehrere Dateien codieren und bereitstellen zu müssen.
Damit diese Funktion funktioniert, muss Ihr Server Bereichsanfragen unterstützen und diese Funktion muss aktiviert sein. Auf den meisten Servern sind Bereichsanfragen standardmäßig aktiviert. Da einige Hostingdienste 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 das in den Entwicklertools Ihres Browsers tun. In Chrome finden Sie sie beispielsweise im Bereich „Netzwerk“. Suchen Sie nach dem Header Accept-Ranges und prüfen Sie, ob bytes angezeigt wird. Im Bild habe ich diesen Header rot umrandet. Wenn Sie bytes nicht als Wert sehen, müssen Sie sich an Ihren Hostinganbieter wenden.
Posterbild einfügen
Fügen Sie dem video-Element ein Posterattribut hinzu, damit Zuschauer eine Vorstellung vom Inhalt haben, 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 die src des Videos fehlerhaft ist oder keines der bereitgestellten Videoformate unterstützt wird. Der einzige Nachteil von Posterbildern ist eine zusätzliche Dateianfrage, die Bandbreite verbraucht und gerendert werden muss.
Weitere Informationen finden Sie unter Bilder effizient codieren.
Verhindern, dass Videos Container überlaufen
Wenn Videoelemente zu groß für den Darstellungsbereich sind, können sie ihren Container überlaufen. Dadurch können Nutzer die Inhalte nicht sehen oder die Steuerelemente nicht verwenden.
Sie können die Videoabmessungen mit CSS steuern. Wenn CSS nicht alle Ihre Anforderungen erfüllt, können JavaScript-Bibliotheken und ‑Plug-ins wie FitVids helfen, auch bei 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 Ausgaben Ihrer Nutzer auswirken kann.
Für einfache Anwendungsfälle wie die hier beschriebenen verwenden Sie CSS-Medienabfragen, um
die Größe von Elementen je nach Darstellungsbereichsabmessungen anzugeben. max-width:
100% ist hier hilfreich.
Für Medieninhalte in iFrames (z. B. YouTube-Videos) sollten Sie einen responsiven Ansatz verwenden (z. B. den von John Surdakowski vorgeschlagenen).
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, bietet die nicht responsive Version keine gute Nutzererfahrung.
Ausrichtung des Geräts
Die Ausrichtung des Geräts ist bei Desktopmonitoren oder Laptops kein Problem, aber sie ist sehr wichtig, wenn Sie Webseiten für Mobilgeräte und Tablets entwerfen.
Safari auf dem iPhone wechselt gut zwischen Hoch- und Querformat:
Die Ausrichtung des Geräts auf einem iPad und in Chrome auf Android-Geräten kann problematisch sein. Ohne Anpassung sieht ein Video, das auf einem iPad im Querformat abgespielt wird, beispielsweise so aus:
Wenn Sie die Video-width: 100% oder max-width: 100% mit CSS festlegen, können
viele Layoutprobleme bei der Geräteausrichtung behoben werden.
Autoplay
Mit dem Attribut autoplay wird gesteuert, 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, z. B. davon, ob die Wiedergabe auf einem Computer erfolgt und ob der mobile Nutzer Ihre Website oder App seinem Startbildschirm hinzugefügt hat. Weitere Informationen finden Sie in den Best Practices für Autoplay.
Firefox: Blockiert alle Videos und Sounds, bietet Nutzern aber die Möglichkeit, diese Einschränkungen entweder für alle oder für bestimmte Websites aufzuheben. Weitere Informationen finden Sie unter Autoplay von Medien in Firefox zulassen oder blockieren.
Safari: Bisher war eine Nutzeraktion erforderlich, aber diese Anforderung wurde in den letzten Versionen gelockert. Weitere Informationen finden Sie unter Neue <video>-Richtlinien für iOS.
Auch auf Plattformen, auf denen Autoplay möglich ist, müssen Sie überlegen, ob es sinnvoll ist, die Funktion zu aktivieren:
- Die Datennutzung kann teuer sein.
- Wenn Medien abgespielt werden, bevor der Nutzer es möchte, kann das Bandbreite und CPU-Leistung beanspruchen und dadurch das Seitenrendering verzögern.
- Nutzer befinden sich möglicherweise in einer Umgebung, in der die Wiedergabe von Videos oder Audioinhalten 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. Laden Sie daher nichts vorab. |
metadata |
Metadaten (Dauer, Abmessungen, Text-Tracks) sollten vorab geladen werden, aber nur ein minimaler Teil des Videos. |
auto |
Das sofortige Herunterladen des gesamten Videos ist wünschenswert. Ein leerer String führt zum selben Ergebnis. |
Das Attribut preload hat auf verschiedenen Plattformen unterschiedliche Auswirkungen.
In Chrome werden beispielsweise 25 Sekunden des Videos auf dem Computer gepuffert, aber nicht auf iOS- oder Android-Geräten. Das bedeutet, dass es auf Mobilgeräten zu Verzögerungen beim Start der Wiedergabe kommen kann, die auf dem Computer nicht auftreten. Weitere Informationen finden Sie unter Schnelle Wiedergabe mit Audio- und Video-Preload oder
im Blog von Steve Souders.
Jetzt wissen Sie, wie Sie Ihrer Webseite Medien hinzufügen. Im nächsten Artikel erfahren Sie mehr über die Barrierefreiheit von Medien. Dort fügen Sie Ihrem Video Untertitel für hörgeschädigte Nutzer hinzu oder wenn die Wiedergabe von Audioinhalten keine praktikable Option ist.