Medientechnologien im Web

Im Laufe der Jahre hat sich die Fähigkeit des Webs, Audio, Video und andere Medien darzustellen, zu erstellen und zu verwalten, weiterentwickelt. Es gibt jetzt eine Vielzahl von APIs sowie HTML-Elemente, DOM-Schnittstellen und andere Funktionen, die es ermöglichen, mit Medien auf spannende und eindrucksvolle Weise zu arbeiten. Dieser Artikel listet Leitfäden und Referenzen für verschiedene Funktionen auf, die Sie bei der Integration von Medien in Ihre Projekte verwenden können.

Leitfäden

Audio- und Videolieferung: Audio und Video können auf verschiedene Weisen im Web bereitgestellt werden, von 'statischen' Mediendateien bis hin zu adaptiven Live-Streams. Dieser Artikel soll als Ausgangspunkt dienen, um die verschiedenen Liefermechanismen von webbasierten Medien und die Kompatibilität mit gängigen Browsern zu erkunden.
Audio- und Videomanipulation: Durch native Audio- und Videounterstützung im Browser können wir diese Datenströme mit Technologien wie <canvas>, WebGL oder Web Audio API direkt bearbeiten, zum Beispiel um Hall-/Kompressionseffekte zu Audio hinzuzufügen oder Graustufen-/Sepiafilter auf Videos anzuwenden.
Autoplay-Anleitung für Medien und Web Audio APIs: Unerwartete automatische Wiedergabe von Medien oder Audio kann für Benutzer eine unangenehme Überraschung sein. Während Autoplay einen Zweck erfüllt, sollte es sorgfältig eingesetzt werden. Um Benutzern die Kontrolle darüber zu geben, bieten viele Browser jetzt Formen der Autoplay-Blockierung. Dieser Artikel ist ein Leitfaden zu Autoplay, mit Tipps, wann und wie es verwendet werden sollte und wie man mit Browsern arbeitet, um Autoplay-Blockierung elegant zu handhaben.
DASH Adaptive Streaming für HTML 5 Video: Dynamic Adaptive Streaming über HTTP (DASH) ist ein adaptives Streaming-Protokoll. Das bedeutet, dass ein Videostream basierend auf der Netzwerkleistung zwischen Bitraten wechseln kann, um die Wiedergabe fortzusetzen.
Audio- und Videostreaming: Ein Leitfaden, der behandelt, wie man Audio und Video streamen kann, 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 Bild-, Audio- und Videomedien im Web verfügbar sind. Dies beinhaltet Empfehlungen, welche Formate für welche Arten von Inhalten verwendet werden sollten, bewährte Verfahren, einschließlich wie man Fallbacks bereitstellt und Medientypen priorisiert, sowie allgemeine Informationen zur Browser-Unterstützung für jedes Mediencontainer- und Codec-Format.
Bilder in HTML verwenden: Ein Leitfaden zum Hinzufügen von Bildern zu Websites, die reaktionsschnell, zugänglich und performant sind.

Referenzen

HTML

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

<audio>: Das <audio>-Element wird verwendet, um Audio abzuspielen. Diese können unsichtbar als Ziel für komplexere Medien verwendet werden oder mit sichtbaren Steuerelementen für benutzergesteuerte Wiedergabe von Audiodateien. Zugriff über JavaScript als HTMLAudioElement-Objekte.
<video>: Das <video>-Element wird verwendet, um Videoinhalte abzuspielen. Es kann verwendet werden, um Videodateien darzustellen oder als Ziel für gestreamte Videoinhalte. <video> kann auch genutzt werden, um Medien-APIs mit anderen HTML- und DOM-Technologien zu verknüpfen, z.B. mit <canvas> (zum Frame-Grabbing und zur Manipulation). Zugriff über JavaScript als HTMLVideoElement-Objekte.
<track>: Das HTML-<track>-Element kann innerhalb eines <audio>- oder <video>-Elements platziert werden, um einen Verweis auf ein WebVTT-Format-Untertitel oder eine Beschriftungsspur bereitzustellen, die zur Medienwiedergabe verwendet werden soll. Zugriff über JavaScript als HTMLTrackElement-Objekte.
<source>: Das HTML-<source>-Element wird innerhalb eines <audio>- oder <video>-Elements verwendet, um eine Quellmedienpräsentation zu spezifizieren. Mehrere Quellen können verwendet werden, um die Medien in unterschiedlichen Formaten, Größen oder Auflösungen bereitzustellen. Zugriff über JavaScript als HTMLSourceElement-Objekte.

APIs

Media Capabilities API: Die Media Capabilities API ermöglicht es Ihnen, die Codierungs- und Decodierungsfähigkeiten des Geräts zu bestimmen, auf dem Ihre Anwendung oder Website läuft. Dadurch können in Echtzeit Entscheidungen darüber getroffen werden, welche Formate verwendet werden sollen und wann.
Media Capture and Streams API: Eine Referenz für die API, die es ermöglicht, Medien sowohl lokal als auch über ein Netzwerk zu streamen, aufzunehmen und zu bearbeiten. Dazu gehört die Nutzung lokaler Kameras und Mikrofone zur Erfassung von Video-, Audio- und Standbildern.
Media Session API: Die Media Session API bietet eine Möglichkeit, Medienbenachrichtigungen anzupassen. Dies geschieht durch die Bereitstellung von Metadaten für die Anzeige durch den Benutzeragenten für die Medien, die Ihre Web-App abspielt. Sie bietet auch Aktions-Handler, die der Browser verwenden kann, um auf Plattformmedientasten zuzugreifen, wie z.B. Hardwaretasten auf Tastaturen, Headsets, Fernbedienungen und Softwaretasten, die in Benachrichtigungsbereichen und auf Sperrbildschirmen mobiler Geräte gefunden werden.
MediaStream Recording API: Die MediaStream Recording API ermöglicht es, Medienstreams zu erfassen, um die Daten zu verarbeiten oder zu filtern oder sie auf die Festplatte zu speichern.
Web Audio API: Die Web Audio API ermöglicht es, Klangdaten sowohl in Echtzeit als auch auf bereits aufgenommenem Material zu erzeugen, zu filtern und zu manipulieren und diese dann an ein Ziel wie ein <audio>-Element, einen Medienstream 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