Nutzer mögen Medien, insbesondere Videos, da sie unterhaltsam und informativ sein können. Auf Mobilgeräten können Videos eine einfachere Möglichkeit sein, Informationen zu erhalten als Text. Für eine gute Nutzererfahrung sollten Videos nicht mehr als die verfügbare Bandbreite benötigen. Nutzer sollten sie unabhängig vom verwendeten Gerät verwenden können. Nutzer sollten nie warten müssen, bis Medien heruntergeladen sind. Niemand mag es, wenn er auf „Wiedergabe“ klickt und nichts passiert.
Sie haben zweifellos schon Videos auf Ihrem eigenen Gerät angesehen. Daher überrascht Sie nichts in diesem letzten Absatz. Jetzt müssen Sie lernen, wie Sie ein Video oder eine andere Mediendatei auf Ihrer eigenen Website einfügen. Die technischen Anforderungen für das Hinzufügen von Medien sollten der Nutzerfreundlichkeit dienen.
Technische Anforderungen
- Versionen einer Mediendatei sind in gängigen webfreundlichen Formaten verfügbar, die sowohl Audio- als auch Videostreams enthalten.
- Die Auflösung ist für die Geräte Ihrer Nutzer geeignet.
- Die Bitrate überlastet nicht die Netzwerkbandbreite der Nutzer.
- Das Ergebnis kann in allen gängigen Browsern mit geeigneten 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. Machen Sie sich keine Sorgen, wenn diese Konzepte noch etwas abstrakt sind. Wir werden sie nach und nach in den einzelnen Artikeln erläutern. Im ersten Abschnitt erfahren Sie mehr über die grundlegenden Konzepte von Medien. Im zweiten Abschnitt erfahren Sie, wie Sie dem Web Medien hinzufügen. Im letzten Abschnitt geht es um praktische Anwendungen und einige erweiterte Techniken zur Verwendung von Medien im Web.
Video im Web anzeigen
Es gibt vier Möglichkeiten, Videos auf einer Website einzubetten.
- Laden Sie Ihre Videos bei einem Medien-Hosting-Anbieter wie YouTube oder Vimeo hoch. Für diese Optionen musst du die entsprechenden Player in deine Website einbetten.
- Einfaches selbst gehostetes Einbetten mit den HTML-Elementen
<video>und<audio> - Umfangreicheres Einbetten mit einer Videobibliothek wie Shaka Player, JW Player oder Video.js
- Einen eigenen Mediaserver und eine eigene Streaminganwendung erstellen
Auf dieser Website werden hauptsächlich die Grundlagen des Einbettens von Medien behandelt. Wir behandeln jedoch einige fortgeschrittene Themen, die Ihnen den Einstieg in die Entwicklung Ihrer eigenen Medien-Streaming-Anwendung erleichtern. Das ist mit einigem Aufwand verbunden. Deshalb haben wir eine Media-PWA mit Offlineunterstützung als Referenz erstellt, die Ihnen zeigen soll, wie das geht und wie viel Aufwand es erfordert. Die Anwendung ist keineswegs ein für die Produktion bereites Angebot oder ein Mitbewerber von Diensten wie YouTube oder Vimeo, aber sie bietet Ihnen einen Ausgangspunkt, um etwas Neues und Herausforderndes zu lernen.
Ehrlich gesagt würde die Entwicklung eines Mitbewerbers für gehostete Mediendienste ein Team von erfahrenen Entwicklern und Tausende von Arbeitsstunden erfordern. Sofern Sie nicht beabsichtigen, in diesen Markt als Mitbewerber einzutreten, sollten Sie eine der anderen Methoden verwenden. Es ist gut, die Technologie zu verstehen. Auch wenn Sie möglicherweise keine eigene Anwendung oder keinen eigenen Videoplayer einführen, ist es nützlich, die neueste Browserunterstützung zu erkunden und zu testen oder zumindest eine der vorhandenen Videobibliotheken zu verwenden.
Was wir lernen
Die Sammlung media besteht aus drei Teilen. In diesem ersten Abschnitt werden Konzepte und Voraussetzungen für das Hinzufügen von Medien auf Ihrer Website erläutert. Dazu gehören die Zusammenstellung von Mediendateien, die Grundlagen der Anwendungen, mit denen du deine Dateien für das Web vorbereiten kannst, und Streamingkonzepte. Im zweiten Abschnitt wird beschrieben, wie Sie Ihre Dateien vorbereiten und in verschiedene Formate konvertieren und optional verschlüsseln. Im letzten Abschnitt zeigen wir Ihnen, wie Sie eine Mediendatei in eine Webseite einbetten, gehen auf Best Practices für Autoplay ein, sprechen über die Verwendung von Medien-Frameworks, das Offline stellen von Videos und die Barrierefreiheit von Videos.
Es gibt viel zu besprechen. Beginnen wir mit den Grundlagen von Mediendateien.