Remote playback
Remote Playback API の `RemotePlayback` インターフェイスは、ページがリモート再生デバイスの利用可能性を検出し、その後これらのデバイスに接続して再生を制御できるようにします。
`EventTarget` `RemotePlayback`
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | | 13.1 | 56 | 13.4 | |
| HTML 属性 | ||||||
disableremoteplayback | 121 | 121 | | 13.1 | 56 | 13 |
disableremoteplayback | 121 | 121 | | 13.1 | 56 | 13 |
| DOM API | ||||||
| disableRemotePlayback は HTMLMediaElement インターフェイスのプロパティで、このメディア要素がリモート再生 UI を持つことを許可するかどうかを決定します。 | 121 | 121 | | 13.1 | 56 | 13 |
| remote は HTMLMediaElement インターフェイスの読み取り専用プロパティで、このメディア要素に関連付けられた RemotePlayback オブジェクトを返します。RemotePlayback オブジェクトは、メディアを再生するリモート端末を制御することができます。 | 121 | 121 | | 13.1 | 56 | 13.4 |
| RemotePlaybackインターフェイスのcancelWatchAvailability()メソッドは、1つまたはすべての利用可能なデバイスに対するウォッチ要求をキャンセルする。 | 121 | 121 | | 13.1 | 56 | 13.4 |
| RemotePlaybackインターフェースのconnectイベントは、ユーザーエージェントがリモートデバイスに接続したときに発生します。 | 121 | 121 | | 13.1 | 56 | 13.4 |
| RemotePlaybackインタフェースのconnectingイベントは、ユーザーエージェントがリモート再生を開始したときに発生する。 | 121 | 121 | | 13.1 | 56 | 13.4 |
| RemotePlaybackインターフェースのdisconnectイベントは、ユーザーエージェントがリモートデバイスから切断されたときに発生します。 | 121 | 121 | | 13.1 | 56 | 13.4 |
| RemotePlaybackインターフェイスのprompt()メソッドは、利用可能なリモート再生デバイスを選択し、そのデバイスを使用して現在のメディアを再生する許可を与えるよう、ユーザーに促す。 | 121 | 121 | | 13.1 | 56 | 13.4 |
| RemotePlaybackインターフェイスのstateプロパティ（読み取り専用）は、RemotePlayback接続の現在の状態を返します。 | 121 | 121 | | 13.1 | 56 | 13.4 |
| RemotePlaybackインタフェースのwatchAvailability()メソッドは、利用可能なリモート再生デバイスのリストを監視し、リモート再生デバイスのcallbackIdで解決されるPromiseを返す。 | 121 | 121 | | 13.1 | 56 | 13.4 |
基本構文
const video = document.querySelector('video');
if (video.remote) {
video.remote.watchAvailability((available) => {
console.log('Remote playback:', available ? 'Available' : 'Unavailable');
});
await video.remote.prompt(); // Display device selection UI
}ライブデモ
Remote playback concept
Show the relationship between a local player and a compatible remote display target.
Support reminder
Expect device and browser differences when working with remote playback capabilities.
実務での使いどころ
-
Remote playback の活用
Remote Playback API の `RemotePlayback` インターフェイスは、ページがリモート再生デバイスの利用可能性を検出し、その後これらのデバイスに接続して再生を制御できるようにします。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。