Nutzer mögen Medien, insbesondere Videos, sie können unterhaltsam und informativ sein. Auf Mobilgeräten sind Videos oft eine einfachere Möglichkeit, Informationen zu verarbeiten als Text. Für eine gute Nutzererfahrung sollten Videos nicht mehr als die verfügbare Bandbreite benötigen. Nutzer sollten sie auf jedem Gerät verwenden können. Nutzer sollten nie warten müssen, bis Medien heruntergeladen werden. Niemandem gefällt es, wenn sie auf Wiedergabe drücken und nichts passiert.
Sie haben zweifellos Videos auf Ihrem eigenen Gerät angesehen. Das bedeutet, dass Sie nicht im letzten Absatz überrascht werden. Jetzt müssen Sie lernen, wie Sie ein Video oder eine andere Mediendatei auf Ihrer Website einfügen. Die technischen Anforderungen für das Hinzufügen von Medien sollten der Nutzererfahrung entsprechen.
Technische Anforderungen
- Versionen einer Mediendatei befinden sich in gängigen webfreundlichen Formaten, 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 entsprechenden Technologien aufgerufen werden.
- Die Datei ist verschlüsselt (optional).
Im Abschnitt media dieser Website wird beschrieben, wie Sie diese technischen Anforderungen erfüllen. Machen Sie sich keine Sorgen, wenn diese Konzepte immer noch ein wenig abstrakt sind. Sie werden in allen Artikeln nach und nach erläutert. Im ersten Abschnitt lernen Sie die grundlegenden Konzepte von Medien kennen. Im zweiten Abschnitt erfahren Sie, wie Sie dem Web Medien hinzufügen. Im letzten Abschnitt erfahren Sie mehr über die praktischen Anwendungen für die Nutzung von Medien im Web, einschließlich einiger fortgeschrittener Techniken.
Video im Web anzeigen
Für die Anzeige von Videos auf einer Website gibt es vier Ansätze.
- Laden Sie Ihre Videos bei einem Mediahostinganbieter wie YouTube oder Vimeo hoch. Für diese Optionen müssen Sie die entsprechenden Player in Ihre Website einbetten.
- Einfache, selbst gehostete Einbettung mit den HTML-Elementen
<video>und<audio>. - Umfassendere Einbettungen mithilfe einer Videobibliothek wie Shaka Player, JW Player oder Video.js
- Erstellen eines eigenen Medienservers und einer eigenen Streaminganwendung
Auf dieser Website geht es hauptsächlich um die Grundlagen der Einbettung von Medien. Wir behandeln jedoch einige weiterführende Themen, die Ihnen den Einstieg in die Erstellung einer eigenen Media-Streaming-Anwendung erleichtern. Der Aufwand dafür ist nicht so einfach. Deshalb haben wir eine Media-PWA mit Offlineunterstützung entwickelt, die als Referenz verwendet werden kann. Diese soll Ihnen zeigen, wie dies umgesetzt werden kann und welchen Aufwand es erfordert. Die Anwendung ist keinesfalls ein produktionsfertiges Angebot oder Konkurrent für Dienste wie YouTube oder Vimeo, aber sie bietet Ihnen einen Ausgangspunkt, um etwas Schwieriges und Neues zu lernen.
Um einen Mitbewerber gehosteter Mediendienste aufzubauen, wäre ehrlich gesagt ein Team aus erfahrenen Technikern und Tausende von menschlichen Arbeitsstunden erforderlich. Wenn Ihr Ziel nicht darin besteht, als Mitbewerber in diesen Markt einzusteigen, sollten Sie eine der anderen Methoden verwenden. Es ist gut, die Technologie zu verstehen. Auch wenn Sie keine eigene Anwendung oder einen eigenen Videoplayer einführen, bietet es sich an, die hochmoderne Browserunterstützung oder zumindest eine der vorhandenen Videobibliotheken zu erkunden und zu experimentieren.
Unsere Themen
Die media-Sammlung besteht aus drei Teilen. In diesem ersten Abschnitt beschreiben wir Konzepte und Voraussetzungen für das Hinzufügen von Medien zu Ihrer Website. Dazu gehören die Erläuterung der Zusammenstellung von Mediendateien, Grundlagen der Anwendungen, die Sie zum Vorbereiten Ihrer Dateien für das Web benötigen, sowie Streamingkonzepte. Im zweiten Abschnitt wird erläutert, wie Sie Ihre Dateien vorbereiten, in verschiedene Formate konvertieren und optional eine Verschlüsselung hinzufügen. Im letzten Abschnitt erfahren Sie, wie Sie eine Mediendatei in eine Webseite einbetten, Best Practices für die automatische Wiedergabe besprechen, Medien-Frameworks verwenden, Videos offline verfügbar machen und Ihre Videos zugänglich machen.
Es gibt viel zu tun, also fangen wir am besten mit den Grundlagen zu Mediendateien an.