远程播放 API

远程播放 API扩展了 HTMLMediaElement，以便控制在远程设备上播放的媒体。

概念和用法

远程播放设备是指连接的设备，例如电视、投影仪或扬声器。API 同时考虑了通过 HDMI 或 DVI 连接的有线设备和无线设备，例如 Chromecast 或 AirPlay。

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

注意：iOS 版 Safari 有一些 API 能够在 AirPlay 上进行远程播放。这些 API 的详细信息可以在 Safari 9.0 发布说明中找到。

Android 版 Firefox 和 Chrome 也包含一些远程播放功能。如果本地网络中有 Cast 设备可用，这些设备会显示一个 Cast 按钮。

接口

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

对其他接口的扩展

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

示例

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

html

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

规范

规范
远程播放 API

浏览器兼容性

BCD 表格仅在浏览器中加载