W3cubDocs

/Web APIs

Remote Playback API

The Remote Playback API extends the HTMLMediaElement to enable the control of remote playback of media from a webpage.

Concepts and Usage

Remote playback devices are connected devices such as TVs, projectors, or speakers. The API takes into account wired devices connected via HDMI or DVI, and wireless devices, for example Chromecast or AirPlay.

The API enables a page, which has an media element such as a video or audio file, to initiate and control playback of that media on a connected remote device. For example, playing a video on a connected TV.

Note: Safari for iOS has some APIs which enable remote playback on AirPlay. Details of these can be found in the Safari 9.0 release notes.

Android versions of Firefox and Chrome also contain some remote playback features. These devices will show a Cast button if there is a Cast device available in the local network.

Interfaces

RemotePlayback

Allows the page to detect availability of remote playback devices, then connect to and control playing on these devices.

Examples

The following example demonstrates a player with custom controls that supports 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 watches 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
Remote_Playback_API 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/Remote_Playback_API