RemotePlayback

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

RemotePlayback 介面是 遠端播放 API 的一部分,允許網頁檢測遠端播放裝置的可用性,然後連線到這些裝置並控制播放。

EventTarget RemotePlayback

例項屬性

還繼承了其父介面 EventTarget 的屬性。

RemotePlayback.state 只讀

表示 RemotePlayback 連線的狀態。可能的值為:

"connecting"

使用者代理正在嘗試與選定的裝置啟動遠端播放。

"connected"

已從本地播放切換到遠端播放,所有命令現在都將在遠端裝置上執行。

"disconnected"

尚未啟動遠端播放、啟動失敗或已停止。

例項方法

還繼承了其父介面 EventTarget 的方法。

RemotePlayback.watchAvailability()

監視可用遠端播放裝置列表,並返回一個 Promise,該 Promise 解析為可用遠端播放裝置的 callbackId

RemotePlayback.cancelWatchAvailability()

取消監視遠端播放裝置可用性的請求。

RemotePlayback.prompt()

提示使用者選擇遠端播放裝置並授權連線。

事件

還繼承了其父介面 EventTarget 的事件。

connecting

當用戶代理啟動遠端播放時觸發。

connect

當用戶代理成功連線到遠端裝置時觸發。

disconnect

當用戶代理斷開與遠端裝置的連線時觸發。

示例

以下示例演示了一個具有自定義控制元件的播放器,該播放器支援遠端播放。最初,用於選擇裝置的按鈕是隱藏的。

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.classList.remove("hidden");
});

規範

規範
Remote Playback API
# remoteplayback-interface

瀏覽器相容性