Nutzer mögen Medien, insbesondere Videos, da sie unterhaltsam und informativ sein können. Auf Mobilgeräten sind Videos eine einfachere Möglichkeit, Informationen zu verstehen als Text. Für eine gute Nutzererfahrung sollten Videos nicht mehr als die verfügbare Bandbreite benötigen. Sie sollten von jedem Gerät aus verwendet werden können, mit dem sie angezeigt werden. Nutzer sollten nie auf den Download von Medien warten müssen. Niemand mag es, wenn er auf die Wiedergabetaste klickt und nichts passiert.
Da Sie sich Videos sicher schon auf Ihrem eigenen Gerät angesehen haben, überrascht Sie nichts im letzten Absatz. Jetzt wissen Sie, wie Sie ein Video oder eine andere Mediendatei auf Ihrer Website platzieren. Die technischen Anforderungen für das Hinzufügen von Medien sollten der Nutzererfahrung entsprechen.
Technische Anforderungen
- Versionen einer Mediendatei haben gängige webfreundliche Formate, die sowohl Audio- als auch Videostreams enthalten.
- Die Auflösung ist für die Geräte Ihrer Nutzer geeignet.
- Die Netzwerkbandbreite Ihrer Nutzer wird durch die Bitrate nicht überlastet.
- Das Ergebnis kann in allen gängigen Browsern unter Verwendung geeigneter Technologien angezeigt werden.
- Die Datei ist verschlüsselt (optional).
Im Abschnitt Medien dieser Website finden Sie Informationen dazu, wie Sie diese technischen Anforderungen erfüllen können. Keine Sorge, wenn diese Konzepte noch ein wenig abstrakt sind. Wir werden sie in allen Artikeln nach und nach erläutern. Im ersten Abschnitt lernen Sie die grundlegenden Konzepte von Medien kennen. Im zweiten Abschnitt geht es darum, wie Sie Medien dem Web hinzufügen. Im letzten Abschnitt geht es um die praktischen Anwendungen, mit einigen fortgeschrittenen Techniken, wie Medien im Web verwendet werden.
Videos im Web präsentieren
Beim Anzeigen von Videos auf einer Website gibt es vier Ansätze.
- Laden Sie Ihre Videos bei einem Mediahostanbieter wie YouTube oder Vimeo hoch. Dazu müssen Sie die entsprechenden Player in Ihre Website einbetten.
- Einfache, selbst gehostete Einbettung mit den HTML-Elementen
<video>und<audio>. - Umfassendere Einbettung mithilfe einer Videobibliothek wie dem Shaka Player, JW Player oder Video.js
- Eigenen Mediaserver und eine eigene Streaminganwendung erstellen
Diese Website behandelt hauptsächlich die Grundlagen des Einbettens von Medien. Wir behandeln jedoch einige weiterführende Themen, die Ihnen den Einstieg in die Entwicklung Ihrer eigenen Media-Streaming-Anwendung erleichtern. Der Aufwand dafür ist nicht einfach. Deshalb haben wir eine Medien-PWA mit Offline-Unterstützung als Referenz erstellt, die Ihnen beide Möglichkeiten aufzeigen sollte, wie das geht und wie viel Aufwand dafür notwendig ist. Die Anwendung ist keineswegs ein produktionsfertiges Angebot oder Konkurrenzunternehmen für Dienste wie YouTube oder Vimeo, aber sie bietet Ihnen einen Ausgangspunkt, um etwas Schwieriges und Neues zu lernen.
Ehrlich gesagt würde die Erstellung eines Konkurrenten für gehostete Mediendienste ein Team von erfahrenen Ingenieuren und Tausende von Arbeitsstunden erfordern. Sofern Ihr Ziel nicht darin besteht, diesen Markt als Mitbewerber zu erschließen, sollten Sie eine der anderen Methoden verwenden. Es ist gut, die Technologie zu verstehen. Auch wenn Sie möglicherweise keine eigene Anwendung oder einen eigenen Videoplayer einführen, können Sie nützliche Funktionen nutzen, um die modernste Browserunterstützung zu erkunden oder zu experimentieren, oder zumindest eine der vorhandenen Videobibliotheken zu verwenden.
In diesem Kurs lernen wir
Die Mediensammlung besteht aus drei Teilen. In diesem ersten Abschnitt finden Sie Informationen zu Konzepten und Voraussetzungen für das Hinzufügen von Medien zu Ihrer Website. Dazu gehören die Erläuterung der Zusammenstellung von Mediendateien, die Grundlagen zu den Anwendungen, die Sie zur Vorbereitung Ihrer Dateien für das Web benötigen, sowie Streamingkonzepte. Im zweiten Abschnitt wird erläutert, wie Sie Ihre Dateien vorbereiten und in verschiedene Formate konvertieren und optional eine Verschlüsselung hinzufügen. Im letzten Abschnitt zeigen wir Ihnen, wie Sie eine Mediendatei in eine Webseite einbetten, Best Practices für die Autoplay-Funktion besprechen, Medien-Frameworks verwenden, Videos offline stellen und Ihre Videos barrierefrei gestalten.
Es gibt sehr viel zu tun, also beginnen wir mit den Grundlagen zu Mediendateien.