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.
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 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:
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
Specification |
---|
Remote Playback API # remoteplayback-interface |
Browser compatibility
BCD tables only load in the browser