W3cubDocs

/Web APIs

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.

EventTarget RemotePlayback

Instance properties

RemotePlayback.state Read 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.

Instance 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 playback device.

Events

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

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.

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
RemotePlayback 56 79 No No 43 13.1 No 56 No 43 13.4 6.0
cancelWatchAvailability 56 79 No No 43 13.1 No 56 No 43 13.4 6.0
connect_event 56 79 No No 43 13.1 No 56 No 43 13.4 6.0
connecting_event 56 79 No No 43 13.1 No 56 No 43 13.4 6.0
disconnect_event 56 79 No No 43 13.1 No 56 No 43 13.4 6.0
prompt 56 79 No No 43 13.1 No 56 No 43 13.4 6.0
state 56 79 No No 43 13.1 No 56 No 43 13.4 6.0
watchAvailability 56 79 No No 43 13.1 No 56 No 43 13.4 6.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/RemotePlayback