RemotePlayback

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

Properties

RemotePlayback.stateRead only

Represents the RemotePlayback 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.

Event handlers

RemotePlayback.onconnecting

Fired when the user agent initiates remote playback.

RemotePlayback.onconnect

Fired when the user agent successfully connects to the remote device.

RemotePlayback.ondisconnect

Fired when the user agent disconnects from the remote device.

Methods

RemotePlayback.watchAvailability()

A Promise that resolves with a callbackId 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 playbabk 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:

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

The RemotePlayback.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.
  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";
});

Specifications

Browser compatibility