远程回放 API

有限可用

此特性不属于基线，因为它尚未在主流浏览器中得到支持。

远程回放 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";
});

规范

Remote Playback API

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2024年7月28日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题

远程回放 API
接口
1. RemotePlayback
属性
1. HTMLMediaElement.disableRemotePlayback
2. HTMLMediaElement.remote