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 jeder dein Video sehen kann, musst du es noch einer Webseite hinzufü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 Formate in der Reihenfolge ihrer 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 ermitteln.
Diese Probleme sind besonders im Zusammenhang mit mobilen Umgebungen wichtig, wo Bandbreite und Latenz nur sehr begrenzt 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 mehrere Möglichkeiten, ins Detail zu gehen. In A Digital Media Primer for Geeks erfahren Sie mehr darüber, wie Video und Audio im Web funktionieren. 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 das Video beispielsweise von Sekunde 5 bis 10 abspielen möchten, 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 wiedergegeben 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. Bei 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 dazu die Entwicklertools Ihres Browsers verwenden. In Chrome finden Sie sie beispielsweise im Bereich „Netzwerk“. Suchen Sie den Accept-Ranges-Header und prüfen Sie, ob dort bytes steht. Im Bild habe ich ein rotes
Feld um diese Überschrift gezeichnet. 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.
Sicherstellen, dass Videos nicht über die Container hinausgehen
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 mithilfe von CSS steuern. Wenn CSS nicht alle Ihre Anforderungen erfüllt, können JavaScript-Bibliotheken und -Plug-ins wie FitVids helfen, selbst für Videos von YouTube und anderen Quellen. Leider können diese Ressourcen die Größe der Netzwerknutzlast erhöhen, was negative Auswirkungen auf Ihre Umsätze und die Wallets 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 können, ist die Version nicht 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 du das Video width: 100% oder max-width: 100% mit CSS festlegst, 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 neueren Versionen wurde diese Anforderung jedoch gelockert. Weitere Informationen finden Sie unter Neue Richtlinien für <video>-Tags für iOS.
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.
- Werden Medien abgespielt, bevor der Nutzer sie möchte, können Bandbreite und CPU-Leistung beansprucht werden, wodurch das Rendern der Seite verzögert wird.
- 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, Dimensionen, Texttracks) sollten vorab geladen werden, jedoch mit einem Minimum an Videos. |
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 das Audio nicht abgespielt wird.