概念与用法
远程播放设备是已连接的设备，例如电视、投影仪或扬声器。该 API 考虑了通过 HDMI 或 DVI 连接的有线设备，以及无线设备，例如 Chromecast 或 AirPlay。
该 API 使包含媒体元素（如视频或音频文件）的页面能够启动并控制这些媒体在已连接的远程设备上的播放。例如，在已连接的电视上播放视频。
注意： Safari for iOS 包含一些能够实现 AirPlay 远程播放的 API。有关这些内容的详细信息，请参阅 Safari 9.0 发行说明。
Firefox 和 Chrome 的 Android 版本也包含一些远程播放功能。如果本地网络中有可用的 Cast 设备，这些设备将显示一个 Cast 按钮。
接口
RemotePlayback-
允许页面检测远程播放设备的可用性，然后连接到这些设备并控制其播放。
其他接口的扩展
HTMLMediaElement.disableRemotePlayback-
一个布尔值，用于设置或返回远程播放状态，指示媒体元素是否允许显示远程播放 UI。
HTMLMediaElement.remote只读-
返回与媒体元素关联的
RemotePlayback对象实例。
示例
以下示例演示了一个带有自定义控件且支持远程播放的播放器。最初，用于选择设备的按钮是隐藏的。
html
<video id="videoElement" src="https://example.org/media.ext">
<button id="deviceBtn" class="hidden">Pick device</button>
</video>
css
.hidden {
display: none;
}
RemotePlayback.watchAvailability() 方法会监视可用的远程播放设备。如果设备可用，请使用回调函数来显示按钮。
js
const deviceBtn = document.getElementById("deviceBtn");
const videoElem = document.getElementById("videoElement");
function availabilityCallback(available) {
// Show or hide the device picker button depending on device availability.
if (available) {
deviceBtn.classList.remove("hidden");
} else {
deviceBtn.classList.add("hidden");
}
}
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";
});
规范
| 规范 |
|---|
| Remote Playback API |
浏览器兼容性
加载中…