概念與用法
遠端播放裝置是已連線的裝置，例如電視、投影儀或揚聲器。該 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 |
瀏覽器相容性
載入中…