Remote Playback API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die Remote Playback API erweitert das HTMLMediaElement, um die Steuerung von Medien zu ermöglichen, die auf einem entfernten Gerät abgespielt werden.

Konzepte und Nutzung

Entfernte Abspielgeräte sind verbundene Geräte wie Fernseher, Projektoren oder Lautsprecher. Die API berücksichtigt kabelgebundene Geräte, die über HDMI oder DVI verbunden sind, sowie drahtlose Geräte wie beispielsweise Chromecast oder AirPlay.

Die API ermöglicht es einer Seite, die ein Medienelement wie eine Video- oder Audiodatei enthält, die Wiedergabe dieses Mediums auf einem verbundenen entfernten Gerät zu starten und zu steuern. Zum Beispiel das Abspielen eines Videos auf einem verbundenen Fernseher.

Hinweis: Safari für iOS verfügt über einige APIs, die die Fernwiedergabe auf AirPlay ermöglichen. Details dazu finden Sie in den Release Notes von Safari 9.0.

Auch die Android-Versionen von Firefox und Chrome enthalten einige Funktionen zur Fernwiedergabe. Diese Geräte zeigen eine Cast-Schaltfläche, wenn ein Cast-Gerät im lokalen Netzwerk verfügbar ist.

Schnittstellen

RemotePlayback

Ermöglicht es der Seite, die Verfügbarkeit von Fernabspielgeräten zu erkennen, sich mit diesen zu verbinden und die Wiedergabe auf diesen Geräten zu steuern.

Erweiterungen zu anderen Schnittstellen

HTMLMediaElement.disableRemotePlayback

Ein Boolescher Wert, der den Status der Fernwiedergabe festlegt oder zurückgibt, um anzuzeigen, ob das Medienelement eine Benutzeroberfläche zur Fernwiedergabe haben darf.

HTMLMediaElement.remote Schreibgeschützt

Gibt eine RemotePlayback-Objektinstanz zurück, die dem Medienelement zugeordnet ist.

Beispiele

Das folgende Beispiel zeigt einen Player mit benutzerdefinierten Steuerelementen, der die Fernwiedergabe unterstützt. Zunächst ist die Schaltfläche zur Auswahl eines Geräts ausgeblendet.

html
<video id="videoElement" src="https://example.org/media.ext">
  <button id="deviceBtn" style="display: none;">Pick device</button>
</video>

Die Methode RemotePlayback.watchAvailability() überwacht verfügbare Fernabspielgeräte. Wenn ein Gerät verfügbar ist, verwenden Sie den Rückruf, um die Schaltfläche anzuzeigen.

js
const deviceBtn = document.getElementById("deviceBtn");
const videoElem = document.getElementById("videoElement");

function availabilityCallback(available) {
  // Show or hide the device picker button depending on device availability.
  deviceBtn.style.display = available ? "inline" : "none";
}

videoElem.remote.watchAvailability(availabilityCallback).catch(() => {
  /* If the device cannot continuously watch available,
  show the button to allow the user to try to prompt for a connection.*/
  deviceBtn.style.display = "inline";
});

Spezifikationen

Specification
Remote Playback API

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
RemotePlayback
cancelWatchAvailability
connect event
connecting event
disconnect event
prompt
state
watchAvailability

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.