RemotePlayback.state — Eigenschaft · JavaScript-Referenz

Signatur

RemotePlayback.state

Beschreibung

Die Eigenschaft state einer RemotePlayback-Instanz (erreichbar über HTMLMediaElement.remote) gibt an, ob ein <video>- oder <audio>-Element gerade auf einem entfernten Gerät abgespielt wird, z. B. per Chromecast oder AirPlay.

Mögliche Werte:

"connecting": Der Browser baut gerade eine Verbindung zu einem Wiedergabegerät auf. Die Wiedergabe läuft noch lokal.
"connected": Die Verbindung steht, die Wiedergabe läuft auf dem entfernten Gerät. Befehle wie play() oder pause() gehen dorthin.
"disconnected": Es gibt keine Fernwiedergabe, das Medium spielt lokal.

Meistens nutzt man state, um die Oberfläche anzupassen, etwa das Cast-Symbol hervorzuheben oder den Hinweis „Wird auf Fernseher abgespielt“ zu zeigen. Den Anfangszustand liest man einmal aus. Danach reagiert man auf die Ereignisse connecting, connect und disconnect, die jede Zustandsänderung melden.

Rückgabewert

Typ

"connecting" | "connected" | "disconnected"

Beschreibung

Ein String mit dem aktuellen Verbindungszustand der Fernwiedergabe.

Beispiele

Aktuellen Zustand auslesen

const video = document.querySelector('video');

if ('remote' in HTMLMediaElement.prototype) {
  console.log(`Fernwiedergabe-Status: ${video.remote.state}`);
} else {
  console.log('Remote Playback API wird nicht unterstützt');
}

Fernwiedergabe-Status: disconnected

Oberfläche bei Zustandsänderung aktualisieren

const video = document.querySelector('#player');
const statusEl = document.querySelector('#cast-status');

const labels = {
  connecting: 'Verbinde mit Gerät …',
  connected: 'Wird auf externem Gerät abgespielt',
  disconnected: 'Lokale Wiedergabe'
};

const updateStatus = () => {
  const { state } = video.remote;
  statusEl.textContent = labels[state];
  statusEl.dataset.state = state;
};

// Anfangszustand anzeigen und auf jede Änderung reagieren
updateStatus();
video.remote.addEventListener('connecting', updateStatus);
video.remote.addEventListener('connect', updateStatus);
video.remote.addEventListener('disconnect', updateStatus);

Geräteauswahl nur starten, wenn noch keine Verbindung besteht

const video = document.querySelector('video');
const castButton = document.querySelector('#cast');

castButton.addEventListener('click', async () => {
  if (video.remote.state !== 'disconnected') {
    console.log(`Bereits aktiv (${video.remote.state})`);
    return;
  }
  try {
    await video.remote.prompt(); // öffnet den Geräte-Dialog
    console.log('Neuer Zustand:', video.remote.state);
  } catch (err) {
    console.warn('Fernwiedergabe abgebrochen:', err.name);
  }
});

Neuer Zustand: connecting

// Wichtig · Fallstricke

Kompatibilität: Chrome und Edge auf Android und Safari (macOS/iOS, AirPlay) unterstützen die API. Firefox unterstützt sie nicht, Chrome auf dem Desktop nur eingeschränkt. Vor dem Zugriff immer prüfen, ob 'remote' in HTMLMediaElement.prototype gilt.
Nur lesbar: Eine Zuweisung an state hat keine Wirkung. Die Verbindung startet man mit prompt(). Beendet wird sie über die Bedienoberfläche des Browsers.
Nicht abfragen, sondern Ereignisse nutzen: Den Wert regelmäßig mit setInterval abzufragen ist unnötig. Die Ereignisse connecting, connect und disconnect melden jede Änderung.
Fernwiedergabe deaktiviert: Ist am Element disableRemotePlayback gesetzt, bleibt der Zustand "disconnected", und prompt() scheitert mit InvalidStateError.
Zustandsgrenzen: Bei "connecting" läuft die Wiedergabe noch lokal. Erst bei "connected" gelten Befehle wie play() oder pause() für das entfernte Gerät.

Siehe auch

RemotePlayback RemotePlayback.prompt() RemotePlayback.watchAvailability() HTMLMediaElement.remote MediaSession.playbackState