远程播放

RemotePlayback 接口属于远程播放 API，它允许页面检测远程播放设备的可用性，然后连接到这些设备并控制播放。

实例属性

它还继承了父接口 EventTarget 的属性。

RemotePlayback.state 只读

表示 RemotePlayback 连接的状态。其中之一是

"正在连接": 用户代理正在尝试使用选定的设备启动远程播放。
"已连接": 已从本地播放过渡到远程播放，所有命令现在将在远程设备上执行。
"已断开连接": 远程播放尚未启动、启动失败或已停止。

实例方法

它还继承了父接口 EventTarget 的方法。

RemotePlayback.watchAvailability(): 监控可用远程播放设备的列表，并返回一个 Promise，该 Promise 使用可用远程播放设备的 callbackId 解析。
RemotePlayback.cancelWatchAvailability(): 取消监控远程播放设备可用性的请求。
RemotePlayback.prompt(): 提示用户选择并授权连接到远程播放设备。

事件

它还继承了父接口 EventTarget 的事件。

正在连接: 当用户代理启动远程播放时触发。
连接: 当用户代理成功连接到远程设备时触发。
断开连接: 当用户代理断开与远程设备的连接时触发。

示例

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

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 # remoteplayback-interface

浏览器兼容性

BCD 表格仅在浏览器中加载