RemotePlayback: disconnect — Ereignis · JavaScript-Referenz

Signatur

remote.addEventListener("disconnect", handler)

Beschreibung

Das disconnect-Ereignis gehört zur Remote Playback API. Es wird auf dem RemotePlayback-Objekt ausgelöst, das über HTMLMediaElement.remote erreichbar ist, und zwar dann, wenn die Verbindung zu einem entfernten Wiedergabegerät endet. Zu diesem Zeitpunkt hat remote.state bereits den Wert "disconnected", und die Wiedergabe läuft wieder lokal (bzw. ist pausiert).

Typische Einsatzzwecke sind das Zurücksetzen der Benutzeroberfläche (z. B. das Cast-Symbol wieder inaktiv darstellen), das Anzeigen eines Hinweises wie „Wiedergabe auf diesem Gerät fortgesetzt“ oder das Protokollieren der Sitzungsdauer. Die Trennung kann vom Nutzer (über den Geräte-Dialog), vom Gerät selbst oder durch Netzwerkprobleme ausgelöst werden – das Ereignis unterscheidet diese Ursachen nicht.

Man kann den Handler entweder per addEventListener("disconnect", handler) registrieren oder über die Eigenschaft remote.ondisconnect zuweisen. Das Ereignis ist ein einfaches Event ohne zusätzliche Eigenschaften, bubbelt nicht und ist nicht abbrechbar. Zusammen mit connecting und connect bildet es den vollständigen Verbindungslebenszyklus ab.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"disconnect"`.
$handler Pflicht	(event: Event) => void		Callback, der beim Trennen der Verbindung aufgerufen wird. Erhält ein generisches `Event`-Objekt; `event.target` ist das `RemotePlayback`-Objekt.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein Event vom Typ disconnect.

Beispiele

UI nach Trennung per addEventListener zurücksetzen

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

if ('remote' in video) {
  video.remote.addEventListener('disconnect', () => {
    console.log('Verbindung getrennt, Status:', video.remote.state);
    castButton.classList.remove('is-casting');
    castButton.textContent = 'Auf Gerät abspielen';
  });

  castButton.addEventListener('click', async () => {
    try {
      await video.remote.prompt();
    } catch (err) {
      console.warn('Remote-Wiedergabe nicht möglich:', err.name);
    }
  });
}

Verbindung getrennt, Status: disconnected

Handler über die on-Property ondisconnect

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

video.remote.ondisconnect = (event) => {
  console.log(`Ereignis: ${event.type}`);
  // Wiedergabe lokal fortsetzen
  video.play().catch(() => console.log('Autoplay blockiert'));
};

// Handler später wieder entfernen
// video.remote.ondisconnect = null;

Ereignis: disconnect

Vollständigen Verbindungslebenszyklus mit AbortController überwachen

const video = document.querySelector('video');
const controller = new AbortController();
const { signal } = controller;
let startedAt = 0;

const remote = video.remote;
remote.addEventListener('connecting', () => console.log('Verbinde …'), { signal });
remote.addEventListener('connect', () => {
  startedAt = performance.now();
  console.log('Verbunden');
}, { signal });
remote.addEventListener('disconnect', () => {
  const sekunden = ((performance.now() - startedAt) / 1000).toFixed(1);
  console.log(`Getrennt nach ${sekunden} s`);
}, { signal });

// Alle Listener auf einmal entfernen, z. B. beim Verlassen der Seite
window.addEventListener('pagehide', () => controller.abort());

Verbinde … Verbunden Getrennt nach 42.3 s

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Remote Playback API wird von Safari (macOS/iOS, AirPlay) und Chromium auf Android unterstützt. Firefox unterstützt sie nicht, auf Desktop-Chrome ist sie nur eingeschränkt verfügbar. Deshalb immer mit 'remote' in HTMLMediaElement.prototype prüfen.
Ist am Medienelement das Attribut disableRemotePlayback gesetzt, gibt es keine Remote-Sitzung und damit auch kein disconnect-Ereignis.
Das Ereignis sagt nicht, warum getrennt wurde (Nutzer, Gerät, Netzwerk). Wer die Ursache braucht, muss sie selbst aus dem Kontext ableiten.
Nach der Trennung ist die lokale Wiedergabe oft pausiert. Ein automatisches play() kann an Autoplay-Richtlinien scheitern, deshalb das Promise immer abfangen.
disconnect kommt auch dann, wenn ein Verbindungsversuch nach connecting fehlschlägt. Es folgt also nicht zwingend auf ein connect.

Siehe auch

RemotePlayback RemotePlayback.state RemotePlayback.prompt() HTMLMediaElement.remote HTMLMediaElement.disableRemotePlayback RemotePlayback: connecting