Medien-Technologien im Web

Im Laufe der Jahre hat sich die Fähigkeit des Webs, Audio, Video und andere Medien zu präsentieren, zu erstellen und zu verwalten, weiterentwickelt. Es gibt mittlerweile eine große Anzahl an APIs sowie HTML-Elemente, DOM-Schnittstellen und andere Funktionen, die es ermöglichen, auf spannende und immersive Weise mit Medien zu arbeiten. Dieser Artikel listet Leitfäden und Referenzen für verschiedene Funktionen auf, die Sie verwenden können, wenn Sie Medien in Ihre Projekte einbinden.

Leitfäden

Audio und Video Übertragung: Wir können Audio und Video im Web auf verschiedene Arten übertragen, von 'statischen' Mediendateien bis hin zu adaptiven Live-Streams. Dieser Artikel dient als Ausgangspunkt, um die verschiedenen Übertragungsmechanismen von web-basierten Medien und die Kompatibilität mit gängigen Browsern zu erkunden.
Audio- und Videomanipulation: Die native Unterstützung von Audio und Video im Browser ermöglicht es uns, diese Datenströme mit Technologien wie <canvas>, WebGL oder Web Audio API direkt zu modifizieren, z. B. Nachhall-/Kompressionseffekte zu Audio hinzuzufügen oder Graustufen-/Sepia-Filter zu Video anzuwenden.
Leitfaden für Autoplay für Medien und Web Audio APIs: Unerwartete automatische Wiedergabe von Medien oder Audio kann für Nutzer eine unangenehme Überraschung sein. Während Autoplay einen Zweck erfüllt, sollte es mit Bedacht eingesetzt werden. Um den Nutzern die Kontrolle darüber zu geben, bieten viele Browser nun verschiedene Formen des Autoplay-Blockierens an. Dieser Artikel ist ein Leitfaden für Autoplay, mit Tipps, wann und wie es verwendet werden sollte und wie man mit Browsern zusammenarbeitet, um Autoplay-Blockaden elegant zu handhaben.
DASH Adaptive Streaming für HTML 5 Video: Dynamic Adaptive Streaming over HTTP (DASH) ist ein adaptives Streaming-Protokoll. Das bedeutet, dass es einen Video-Stream ermöglicht, zwischen Bitraten auf Basis der Netzwerk-Performance zu wechseln, um ein kontinuierliches Abspielen des Videos sicherzustellen.
Streaming von Audio und Video: Ein Leitfaden, der abdeckt, wie man Audio und Video streamt, sowie Techniken und Technologien, die Sie nutzen können, um die bestmögliche Qualität und/oder Leistung Ihrer Streams sicherzustellen.
Medientypen und -formate im Web: Ein Leitfaden zu den Dateitypen und Codecs, die für Bilder, Audio und Video im Web verfügbar sind. Dies beinhaltet Empfehlungen, welche Formate für welche Inhalte verwendet werden sollten, bewährte Praktiken, einschließlich der Bereitstellung von Fallbacks und der Priorisierung von Medientypen, und allgemeine Informationen zur Browser-Unterstützung für jeden Mediencontainer und Codec.
Bilder in HTML verwenden: Ein Leitfaden zum Hinzufügen von Bildern zu Websites, die reaktionsfähig, zugänglich und leistungsstark sind.

Referenzen

HTML

Diese Artikel beschreiben die HTML-Elemente zur Einbindung von Medien:

<audio>: Das <audio>-Element wird verwendet, um Audio abzuspielen. Diese können unsichtbar als Ziel für anspruchsvollere Medien oder mit sichtbaren Steuerelementen zur benutzerkontrollierten Wiedergabe von Audiodateien verwendet werden. Von JavaScript zugänglich als HTMLAudioElement-Objekte.
<video>: Das <video>-Element wird verwendet, um Videoinhalte abzuspielen. Es kann verwendet werden, um Videodateien zu präsentieren oder als Ziel für gestreamte Videoinhalte. <video> kann auch als Möglichkeit genutzt werden, Medien-APIs mit anderen HTML- und DOM-Technologien, einschließlich <canvas> (für das Ergreifen und Bearbeiten von Frames), zu verknüpfen. Es ist von JavaScript aus zugänglich als HTMLVideoElement-Objekte.
<track>: Das HTML-<track>-Element kann innerhalb eines <audio>- oder <video>-Elements platziert werden, um eine Referenz zu einer WebVTT-Format-Untertitel- oder Beschriftungsspur bereitzustellen, die bei der Wiedergabe des Mediums verwendet werden soll. Von JavaScript zugänglich als HTMLTrackElement-Objekte.
<source>: Das HTML-<source>-Element wird innerhalb eines <audio>- oder <video>-Elements verwendet, um Medienquellen zur Präsentation anzugeben. Mehrere Quellen können verwendet werden, um das Medium in verschiedenen Formaten, Größen oder Auflösungen bereitzustellen. Von JavaScript zugänglich als HTMLSourceElement-Objekte.

APIs

Media Capabilities API: Die Media Capabilities API ermöglicht es Ihnen, die Kodierungs- und Dekodierungsfähigkeiten des Geräts zu bestimmen, auf dem Ihre App oder Website läuft. Dadurch können Sie in Echtzeit Entscheidungen darüber treffen, welche Formate verwendet werden sollen und wann.
Media Capture and Streams API: Eine Referenz zur API, die es ermöglicht, Medien sowohl lokal als auch über ein Netzwerk zu streamen, aufzuzeichnen und zu manipulieren. Dies umfasst die Verwendung lokaler Kameras und Mikrofone zum Erfassen von Video, Audio und Standbildern.
Media Session API: Die Media Session API bietet eine Möglichkeit, Medienbenachrichtigungen anzupassen. Dies geschieht durch Bereitstellung von Metadaten, die vom Benutzeragenten für die Medien, die Ihre Web-App abspielt, angezeigt werden. Es stellt auch Aktionshandler bereit, die der Browser verwenden kann, um auf Plattformmedia-Tasten zuzugreifen, wie Hardware-Tasten auf Tastaturen, Headsets, Fernbedienungen und Software-Tasten in Benachrichtigungsbereichen und auf Sperrbildschirmen mobiler Geräte.
MediaStream Recording API: Die MediaStream Recording API ermöglicht es Ihnen, Medienströme zu erfassen, um die Daten zu verarbeiten oder zu filtern oder sie auf die Festplatte aufzuzeichnen.
Web Audio API: Die Web Audio API ermöglicht es Ihnen, Klangeffekte sowohl in Echtzeit als auch auf zuvor aufgenommenem Material zu generieren, zu filtern und zu manipulieren, und dann diesen Ton an ein Ziel wie ein <audio>-Element, einen Medienstrom oder auf die Festplatte zu senden.
WebRTC: WebRTC (Web Real-Time Communication) ermöglicht es, Live-Audio und -Video zu streamen, sowie beliebige Daten zwischen zwei Peers über das Internet zu übertragen, ohne dass ein Vermittler erforderlich ist.

Leitfäden

Referenzen

HTML

APIs

Verwandte Themen