Sie haben eine Videodatei richtig 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 auf einer Webseite einfügen. Dazu müssen zwei HTML-Elemente hinzugefügt werden: das Element <video> und das Element <source>. Neben den Grundlagen zu diesen Tags werden in diesem Artikel auch Attribute erläutert, die Sie diesen Tags hinzufügen sollten, um eine gute Nutzererfahrung zu schaffen.
Einzelne Datei angeben
Es wird zwar nicht empfohlen, Sie können das Videoelement aber auch allein verwenden. Verwenden Sie immer das Attribut type wie unten gezeigt. Anhand dieser Informationen kann der Browser feststellen, ob er die bereitgestellte Videodatei abspielen kann. Andernfalls 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 im Abschnitt Grundlagen von Mediendateien erfahren haben, unterstützen nicht alle Browser dieselben Videoformate. Mit dem Element <source> 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="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/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 dies optional ist. So wird sichergestellt, dass der Browser nur die Datei herunterlädt, die er abspielen kann.
Dieser Ansatz bietet im Vergleich zum Bereitstellen verschiedener HTML- oder serverseitiger Scripts mehrere Vorteile, insbesondere auf Mobilgeräten:
- Sie können die Formate nach Präferenz auflisten.
- Durch die clientseitige Umstellung wird die Latenz reduziert, da nur eine Anfrage zum Abrufen von Inhalten gestellt wird.
- Wenn der Browser ein Format auswählt, ist das einfacher, schneller und möglicherweise 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 „sniffen“.
Diese Probleme sind besonders in mobilen Kontexten wichtig, in denen Bandbreite und Latenz von entscheidender Bedeutung 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 dazu, wie Video und Audio im Web funktionieren, finden Sie unter A Digital Media Primer for Geeks. Sie können auch die Remote-Fehlerbehebung in DevTools verwenden, um die Netzwerkaktivität mit Typattributen und ohne Typattribute zu vergleichen.
Start- und Endzeit angeben
Bandbreite sparen und die Reaktionsfähigkeit Ihrer Website verbessern: Mithilfe von Medienfragmenten können Sie dem Videoelement Start- und Endzeiten hinzufügen.
Wenn du ein Media-Fragment verwenden möchtest, füge der Media-URL #t=[start_time][,end_time] hinzu. Wenn Sie beispielsweise möchten, dass das Video von Sekunde 5 bis 10 abgespielt wird, geben Sie Folgendes an:
<source src="video/chrome.webm#t=5,10" type="video/webm">
Sie können die Zeiten auch in <hours>:<minutes>:<seconds> angeben. Beispiel: Mit #t=00:01:05 startet das Video nach 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 kannst du mehrere Ansichten desselben Videos bereitstellen, ähnlich wie Cue-Punkte auf 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 dies in den Entwicklertools Ihres Browsers tun. In Chrome finden Sie sie beispielsweise im Bereich „Netzwerk“. Suchen Sie den Accept-Ranges-Header und prüfen Sie, ob dort bytes steht. Auf dem Bild habe ich einen roten Rahmen um diese Überschrift gezogen. Wenn bytes nicht als Wert angezeigt wird, müssen Sie sich an Ihren Hostinganbieter wenden.
Posterbild einfügen
Fügen Sie dem video-Element ein Posterattribut hinzu, damit Zuschauer schon beim Laden des Elements eine Vorstellung von den Inhalten haben, ohne das Video herunterladen oder die Wiedergabe starten zu müssen.
<video poster="poster.jpg" ...>
…
</video>
Ein Poster kann auch als Fallback verwendet werden, wenn das Video src beschädigt ist oder keines der bereitgestellten Videoformate unterstützt wird. Der einzige Nachteil von Plakatbildern ist eine zusätzliche Dateianfrage, die etwas Bandbreite verbraucht und ein Rendering erfordert.
Weitere Informationen finden Sie unter Bilder effizient codieren.
Achten Sie darauf, dass Videos nicht über Container hinausragen.
Wenn Videoelemente zu groß für den Darstellungsbereich sind, können sie über den Container hinausragen, sodass Nutzer die Inhalte nicht sehen oder die Steuerelemente nicht verwenden können.
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 Nutzlastgrößen des Netzwerks erhöhen, was negative Auswirkungen auf Ihre Einnahmen und die Ausgaben Ihrer Nutzer hat.
Für einfache Anwendungen wie die hier beschriebenen können Sie CSS-Medienabfragen verwenden, um die Größe von Elementen abhängig von den Darstellungsbereichsabmessungen anzugeben. max-width:
100% ist Ihr Freund.
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, ist die nicht responsive Version nicht sehr nutzerfreundlich.
Ausrichtung des Geräts
Die Geräteausrichtung ist für Computermonitore oder Laptops kein Problem, aber sie ist äußerst wichtig, wenn es um das Design von Webseiten für Mobilgeräte und Tablets geht.
Safari auf dem iPhone wechselt gut zwischen Hoch- und Querformat:
Die Geräteausrichtung auf einem iPad und Chrome auf Android-Geräten kann problematisch sein. Ohne Anpassungen sieht ein Video, das auf einem iPad im Querformat abgespielt wird, beispielsweise so aus:
Wenn Sie das Video mit CSS auf width: 100% oder max-width: 100% festlegen, können viele Layoutprobleme bei der Geräteausrichtung behoben werden.
Autoplay
Mit dem Attribut autoplay wird festgelegt, ob der Browser ein Video sofort herunterlädt und wiedergibt. Wie genau das funktioniert, 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 auf dem Startbildschirm hinzugefügt hat. Weitere Informationen finden Sie in den Best Practices für Autoplay.
Firefox: Blockiert alle Videos und Audioinhalte, bietet Nutzern aber die Möglichkeit, diese Einschränkungen für alle oder bestimmte Websites zu lockern. Weitere Informationen finden Sie unter Automatisches Abspielen von Medien in Firefox zulassen oder blockieren.
Safari: Bisher war eine Nutzergeste erforderlich, in den letzten Versionen wurde diese Anforderung jedoch gelockert. Weitere Informationen finden Sie unter Neue Richtlinien für <video> auf iOS-Geräten.
Auch auf Plattformen, auf denen Autoplay möglich ist, solltest du dir überlegen, ob du diese Funktion aktivieren möchtest:
- Die Datennutzung kann teuer sein.
- Wenn Medien vor dem Nutzerwunsch wiedergegeben werden, kann das die Bandbreite und die CPU belasten und das Seitenrendering verzögern.
- Nutzer befinden sich möglicherweise in einer Umgebung, in der die Wiedergabe von Video- oder Audioinhalten störend ist.
Vorab laden
Das preload-Attribut gibt dem Browser einen Hinweis darauf, wie viele Informationen oder Inhalte vorab geladen werden sollen.
| Wert | Beschreibung |
|---|---|
none |
Der Nutzer kann sich das Video auch nicht ansehen. Laden Sie also nichts vorab. |
metadata |
Metadaten (Dauer, Abmessungen, Texttracks) sollten vorab geladen werden, aber nur mit minimalem Video. |
auto |
Es wird empfohlen, das gesamte Video sofort herunterzuladen. Ein leerer String führt zum selben Ergebnis. |
Das preload-Attribut hat auf verschiedenen Plattformen unterschiedliche Auswirkungen.
In Chrome werden beispielsweise 25 Sekunden Video auf dem Computer, aber keine auf iOS- oder Android-Geräten vorgeladen. Das bedeutet, dass es auf Mobilgeräten zu Verzögerungen beim Starten 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.
Sie wissen jetzt, wie Sie Ihrer Webseite Medien hinzufügen. Als Nächstes geht es um die Barrierefreiheit von Medien. Dabei fügen Sie Ihrem Video Untertitel für hörbeeinträchtigte Nutzer hinzu oder sorgen dafür, dass die Audiowiedergabe funktioniert.