RemotePlayback

Erbt auch Eigenschaften von seinem übergeordneten Interface, EventTarget.

RemotePlayback.state Schreibgeschützt

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

"connecting"

Der Benutzeragent versucht, eine Remote-Wiedergabe mit dem ausgewählten Gerät zu initiieren.

"connected"

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

"disconnected"

Die Remote-Wiedergabe wurde nicht initiiert, die Initialisierung ist fehlgeschlagen oder sie wurde gestoppt.

Erbt auch Methoden von seinem übergeordneten Interface, EventTarget.

RemotePlayback.watchAvailability()

Überwacht die Liste der verfügbaren Remote-Wiedergabegeräte und gibt ein Promise zurück, das mit einer callbackId eines verfügbaren Remote-Wiedergabegeräts aufgelöst wird.

RemotePlayback.cancelWatchAvailability()

Bricht die Anforderung zur Überwachung der Verfügbarkeit von Remote-Wiedergabegeräten ab.

RemotePlayback.prompt()

Fordert den Benutzer auf, ein Remote-Wiedergabegerät auszuwählen und die Berechtigung zur Verbindung zu erteilen.

Erbt auch Ereignisse von seinem übergeordneten Interface, EventTarget.

connecting

Wird ausgelöst, wenn der Benutzeragent die Remote-Wiedergabe initiiert.

connect

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

disconnect

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

Das folgende Beispiel zeigt einen Player mit benutzerdefinierten Steuerungen, die Remote-Wiedergabe 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" class="hidden">Pick device</button>
</video>

.hidden {
  display: none;
}

Die Methode RemotePlayback.watchAvailability() wird verwendet, um nach verfügbaren Remote-Wiedergabegeräten zu suchen. Wenn ein Gerät verfügbar ist, zeigt der Callback die Schaltfläche an.

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

function availabilityCallback(available) {
  // Show or hide the device picker button depending on device availability.
  if (available) {
    deviceBtn.classList.remove("hidden");
  } else {
    deviceBtn.classList.add("hidden");
  }
}

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.classList.remove("hidden");
});