Remote playback
The Remote Playback API initiates and controls playback of media on connected remote devices, such as smart TVs with AirPlay or Chromecast capabilities. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The Remote Playback API initiates and controls playback of media on connected remote devices, such as smart TVs with AirPlay or Chromecast capabilities. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | | 13.1 | 56 | 13.4 | |
| HTML attribute | ||||||
disableremoteplayback | 121 | 121 | | 13.1 | 56 | 13 |
disableremoteplayback | 121 | 121 | | 13.1 | 56 | 13 |
| DOM API | ||||||
| The disableRemotePlayback property of the HTMLMediaElement interface determines whether the media element is allowed to have a remote playback UI. | 121 | 121 | | 13.1 | 56 | 13 |
| The remote read-only property of the HTMLMediaElement interface returns the RemotePlayback object associated with the media element. The RemotePlayback object allow the control of remote devices playing the media. | 121 | 121 | | 13.1 | 56 | 13.4 |
| The cancelWatchAvailability() method of the RemotePlayback interface cancels the request to watch for one or all available devices. | 121 | 121 | | 13.1 | 56 | 13.4 |
| The connect event of the RemotePlayback interface fires when the user agent connects to the remote device. | 121 | 121 | | 13.1 | 56 | 13.4 |
| The connecting event of the RemotePlayback interface fires when the user agent initiates remote playback. | 121 | 121 | | 13.1 | 56 | 13.4 |
| The disconnect event of the RemotePlayback interface fires when the user agent disconnects from the remote device. | 121 | 121 | | 13.1 | 56 | 13.4 |
| The prompt() method of the RemotePlayback interface prompts the user to select an available remote playback device and give permission for the current media to be played using that device. | 121 | 121 | | 13.1 | 56 | 13.4 |
| The state read-only property of the RemotePlayback interface returns the current state of the RemotePlayback connection. | 121 | 121 | | 13.1 | 56 | 13.4 |
| The watchAvailability() method of the RemotePlayback interface watches the list of available remote playback devices and returns a Promise that resolves with the callbackId of a remote playback device. | 121 | 121 | | 13.1 | 56 | 13.4 |
Syntax
const video = document.querySelector('video');
if (video.remote) {
video.remote.watchAvailability((available) => {
console.log('Remote playback:', available ? 'Available' : 'Unavailable');
});
await video.remote.prompt(); // Display device selection UI
}Live demo
Remote playback concept
Show the relationship between a local player and a compatible remote display target.
Support reminder
Expect device and browser differences when working with remote playback capabilities.
Use cases
Enhance media playback
Use Remote playback when audio, video, or responsive media needs better control or more capable browser behavior.
Deliver flexible assets
Apply Remote playback to adapt media loading or presentation more closely to user context and device capability.
Cautions
- Test Remote playback in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Pair richer media behavior with captions, transcripts, controls, and loading behavior that remain understandable to all users.
Related links
Powered by web-features