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.
RemotePlayback
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.
-
Methods
-
RemotePlayback.watchAvailability()
-
A
Promise
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
-
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:
<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
Specification |
---|
Remote Playback API # remoteplayback-interface |
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
See
bug 521319.
|
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–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/RemotePlayback