远程回放 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()
方法监视可用的远程回放设备。如果设备可用,使用回调函数来显示选取设备按钮。
js
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