API удалённого воспроизведения

API удалённого воспроизведения расширяет HTMLMediaElement, чтобы позволить управлять воспроизведением медиа на удалённом устройстве.

Устройства удалённого воспроизведения — это подключённые устройства, такие как телевизоры, проекторы или колонки. API учитывает проводные устройства, подключённые через HDMI или DVI, а также беспроводные устройства, например Chromecast или AirPlay.

API позволяет странице, на которой есть медиаэлемент, такой как видео или аудиофайл, инициировать и управлять воспроизведением этого медиа на подключённом удалённом устройстве. Например, воспроизведение видео на подключённом телевизоре.

RemotePlayback

Позволяет странице определять доступность устройств удалённого воспроизведения, а затем подключаться к ним и управлять воспроизведением на этих устройствах.

HTMLMediaElement.disableRemotePlayback

Булево значение, которое устанавливает или возвращает состояние удалённого воспроизведения, указывая, разрешено ли медиаэлементу иметь пользовательский интерфейс удалённого воспроизведения.

HTMLMediaElement.remote Только для чтения

Возвращает экземпляр объекта RemotePlayback, связанный с медиаэлементом.

Следующий пример демонстрирует плеер с настраиваемыми элементами управления, поддерживающими удалённое воспроизведение. Изначально кнопка для выбора устройства скрыта.

<video id="videoElement" src="https://example.org/media.ext">
  <button id="deviceBtn" style="display: none;">Pick device</button>
</video>

Метод RemotePlayback.watchAvailability() следит за доступностью устройств удалённого воспроизведения. Если устройство доступно, используйте обратный вызов для отображения кнопки.

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";
});