RemotePlayback

Erbt auch Eigenschaften von der übergeordneten Schnittstelle, EventTarget.

RemotePlayback.state Nur lesbar

Repräsentiert den Zustand der RemotePlayback-Verbindung. Einer von:

"connecting"

Der User-Agent versucht, die Fernwiedergabe mit dem ausgewählten Gerät zu initiieren.

"connected"

Der Übergang von lokaler zu Fernwiedergabe hat stattgefunden, alle Befehle erfolgen nun auf dem Remote-Gerät.

"disconnected"

Die Fernwiedergabe wurde nicht initiiert, konnte nicht initiiert werden oder wurde gestoppt.

Erbt auch Methoden von der übergeordneten Schnittstelle, EventTarget.

RemotePlayback.watchAvailability()

Beobachtet die Liste verfügbarer Geräte für die Fernwiedergabe und gibt ein Promise zurück, das mit einer callbackId eines verfügbaren Geräts für die Fernwiedergabe aufgelöst wird.

RemotePlayback.cancelWatchAvailability()

Bricht die Anfrage zur Überwachung der Verfügbarkeit von Fernwiedergabegeräten ab.

RemotePlayback.prompt()

Fordert den Benutzer auf, ein Gerät für die Fernwiedergabe auszuwählen und die Berechtigung zum Verbinden zu erteilen.

Erbt auch Ereignisse von der übergeordneten Schnittstelle, EventTarget.

connecting

Wird ausgelöst, wenn der User-Agent die Fernwiedergabe initiiert.

connect

Wird ausgelöst, wenn der User-Agent erfolgreich eine Verbindung zum Remote-Gerät herstellt.

disconnect

Wird ausgelöst, wenn der User-Agent die Verbindung zum Remote-Gerät trennt.

Das folgende Beispiel demonstriert einen Player mit benutzerdefinierten Steuerungen, die die Fernwiedergabe unterstützen. Anfangs ist die Schaltfläche zum Auswählen eines Geräts verborgen:

<video id="videoElement" src="https://example.org/media.ext">
  <button id="deviceBtn" style="display: none;">Pick device</button>
</video>

Die Methode RemotePlayback.watchAvailability() wird verwendet, um verfügbare Geräte für die Fernwiedergabe zu überwachen. Wenn ein Gerät verfügbar ist, verwenden Sie den Callback, um die Schaltfläche anzuzeigen.

const deviceBtn = document.getElementById("deviceBtn");
const videoElem = document.getElementById("videoElement");

function availabilityCallback(available) {
  // Show or hide the device picker button depending on device availability.
  deviceBtn.style.display = available ? "inline" : "none";
}

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";
});