Remote Playback API

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.

RemotePlayback

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

HTMLMediaElement.disableRemotePlayback

A boolean that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback UI.

HTMLMediaElement.remote Read only

Return a RemotePlayback object instance associated with the media element.

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

The RemotePlayback.watchAvailability() method watches 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";
});