远程回放 API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

远程回放 API 扩展了 HTMLMediaElement 来控制远程设备上播放的媒体。

概念和用法

远程回放设备是指电视、投影仪或扬声器等已连接的设备。此 API 考虑了通过 HDMI 或 DVI 连接的有线设备，以及 Chromecast 或 AirPlay 等无线设备。

该 API 使具有媒体元素（如视频或音频文件）的页面能够在连接的远程设备上启用和控制该媒体的播放。例如，在连接的电视上播放视频。

备注：Safari for iOS 有一些在 AirPlay 上启用远程回放的 API。这些细节可以在 Safari 9.0 发行说明中找到。Android 版本的 Firefox 和 Chrome 也包含一些远程回放功能。如果本地网络中有可用的投放（Cast）设备，这些设备将显示投放按钮。

接口

RemotePlayback: 允许页面检测远程回放设备的可用性，然后连接和控制这些设备上的播放。

对其他接口的扩展

HTMLMediaElement.disableRemotePlayback: 一个布尔值，用于设置或返回远程回放状态，指示是否允许媒体元素具有远程回放 UI 界面。
HTMLMediaElement.remote 只读: 返回一个与媒体元素关联的 RemotePlayback 对象实例。

示例

下面的示例展示了一个带有支持远程回放的自定义控件的播放器。最初，用于选取设备的按钮是隐藏的。

html

<video id="videoElement" src="https://example.org/media.ext">
  <button id="deviceBtn" style="display: none;">选取设备</button>
</video>

RemotePlayback.watchAvailability() 方法监视可用的远程回放设备。如果设备可用，使用回调函数来显示选取设备按钮。

const deviceBtn = document.getElementById("deviceBtn");
const videoElem = document.getElementById("videoElement");

function availabilityCallback(available) {
  // 根据设备可用性显示或隐藏选取设备按钮。
  deviceBtn.style.display = available ? "inline" : "none";
}

videoElem.remote.watchAvailability(availabilityCallback).catch(() => {
  /* 在设备可用性无法被持续监视的情况下，显示按钮以允许用户尝试连接。*/
  deviceBtn.style.display = "inline";
});

规范

Specification
Remote Playback API

浏览器兼容性

BCD tables only load in the browser