RemotePlayback: connecting — Ereignis · JavaScript-Referenz

Signatur

remote.addEventListener("connecting", handler)

Beschreibung

Das Ereignis connecting gehört zur Remote Playback API. Es wird am Objekt HTMLMediaElement.remote ausgelöst, sobald der Browser die Fernwiedergabe startet und die Verbindung zu einem Gerät (z. B. Chromecast, AirPlay-Empfänger oder Smart-TV) aufbaut. In diesem Moment wechselt remote.state auf "connecting".

Es ist das erste von drei Zustands-Ereignissen: connecting → connect (Verbindung steht, Wiedergabe läuft auf dem Gerät) → disconnect (Rückkehr zur lokalen Wiedergabe). Typischerweise nutzt man connecting, um in der Oberfläche einen Ladeindikator anzuzeigen, etwa ein pulsierendes Cast-Symbol oder den Hinweis „Verbinde mit Gerät …“.

Der Handler lässt sich per addEventListener("connecting", handler) oder über die Eigenschaft remote.onconnecting registrieren. Das übergebene Objekt ist ein einfaches Event ohne zusätzliche Eigenschaften; es bubbelt nicht und kann nicht abgebrochen werden.

Parameter

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

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein Event-Objekt.

Beispiele

Ladeanzeige beim Verbindungsaufbau mit addEventListener

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

if ('remote' in video) {
  video.remote.addEventListener('connecting', () => {
    status.textContent = 'Verbinde mit Gerät …';
    console.log('Zustand:', video.remote.state);
  });
  video.remote.addEventListener('connect', () => {
    status.textContent = 'Wiedergabe auf externem Gerät';
  });
  video.remote.addEventListener('disconnect', () => {
    status.textContent = 'Lokale Wiedergabe';
  });
}

Zustand: connecting

Über die on-Property und per Button auslösen

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

video.remote.onconnecting = () => {
  castButton.classList.add('is-connecting');
  castButton.disabled = true;
};
video.remote.onconnect = () => {
  castButton.classList.remove('is-connecting');
  castButton.disabled = false;
};

castButton.addEventListener('click', async () => {
  try {
    await video.remote.prompt(); // öffnet die Geräteauswahl
  } catch (err) {
    console.warn('Fernwiedergabe abgebrochen:', err.name);
  }
});

Listener wieder entfernen

const video = document.querySelector('video');
const onConnecting = () => console.log('Verbindungsaufbau gestartet');

video.remote.addEventListener('connecting', onConnecting);

// später, z. B. beim Abbau einer Komponente
video.remote.removeEventListener('connecting', onConnecting);
// alternativ: video.remote.onconnecting = null;

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Remote Playback API wird von Safari (macOS/iOS, AirPlay) und Chromium auf Android unterstützt. Desktop-Chrome unterstützt sie nur eingeschränkt, Firefox gar nicht. Deshalb vorher mit 'remote' in HTMLMediaElement.prototype prüfen.
Ist am Medienelement disableRemotePlayback gesetzt, wird kein connecting ausgelöst. prompt() wird dann mit InvalidStateError abgewiesen.
Auf connecting muss nicht immer connect folgen: Scheitert die Verbindung oder bricht der Nutzer ab, kommt direkt disconnect. Ladeanzeigen deshalb auch dort zurücksetzen.
prompt() muss durch eine Nutzeraktion ausgelöst werden (z. B. einen Klick), sonst wird es abgelehnt.
Das Ereignis kann auch ohne Aufruf von prompt() kommen, wenn der Nutzer die Fernwiedergabe über die nativen Medien-Steuerelemente des Browsers startet.

Siehe auch

RemotePlayback RemotePlayback: connect RemotePlayback: disconnect RemotePlayback.prototype.prompt() RemotePlayback.state HTMLMediaElement.remote HTMLMediaElement.disableRemotePlayback