RemotePlayback

Limited availability

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

TheRemotePlayback interface of theRemote Playback API allows the page to detect availability of remote playback devices, then connect to and control playing on these devices.

Instance properties

Also inherits properties from its parent interface,EventTarget.

RemotePlayback.stateRead only

Represents theRemotePlayback connection's state. One of:

"connecting": The user agent is attempting to initiate remote playback with the selected device.
"connected": The transition from local to remote playback has happened, all commands will now take place on the remote device.
"disconnected": The remote playback has not been initiated, has failed to initiate, or has been stopped.

Instance methods

Also inherits methods from its parent interface,EventTarget.

RemotePlayback.watchAvailability(): Watches the list of available remote playback devices and returns aPromise that resolves with acallbackId of an available remote playback device.
RemotePlayback.cancelWatchAvailability(): Cancels the request to monitor the availability of remote playback devices.
RemotePlayback.prompt(): Prompts the user to select and give permission to connect to a remote playback device.

Events

Also inherits events from its parent interface,EventTarget.

connecting: Fired when the user agent initiates remote playback.
connect: Fired when the user agent successfully connects to the remote device.
disconnect: Fired when the user agent disconnects from the remote device.

Examples

The following example demonstrates a player with custom controls that support remote playback. Initially the button used to select a device is hidden:

html

<video src="https://example.org/media.ext">  <button>Pick device</button></video>

css

.hidden {  display: none;}

TheRemotePlayback.watchAvailability() method is used to watch for available remote playback devices. If a device is available, use the callback to show the button.

const deviceBtn = document.getElementById("deviceBtn");const videoElem = document.getElementById("videoElement");function availabilityCallback(available) {  // Show or hide the device picker button depending on device availability.  if (available) {    deviceBtn.classList.remove("hidden");  } else {    deviceBtn.classList.add("hidden");  }}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.classList.remove("hidden");});