RemotePlayback

Erbt auch Eigenschaften von seinem Eltern-Interface, EventTarget.

RemotePlayback.state Schreibgeschützt

Representiert den Zustand der RemotePlayback-Verbindung. Einer der folgenden Werte:

"connecting"

Der Benutzeragent versucht, die Fernwiedergabe mit dem ausgewählten Gerät zu initiieren.

"connected"

Der Übergang von der lokalen zur Fernwiedergabe ist erfolgt, alle Befehle werden nun auf dem Fernwiedergabegerät ausgeführt.

"disconnected"

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

Erbt auch Methoden von seinem Eltern-Interface, EventTarget.

RemotePlayback.watchAvailability()

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

RemotePlayback.cancelWatchAvailability()

Bricht die Anfrage zum Überwachen der Verfügbarkeit von Fernwiedergabegeräten ab.

RemotePlayback.prompt()

Fordert den Benutzer auf, ein Fernwiedergabegerät auszuwählen und die Erlaubnis zur Verbindung zu erteilen.

Erbt auch Ereignisse von seinem Eltern-Interface, EventTarget.

connecting

Wird ausgelöst, wenn der Benutzeragent die Fernwiedergabe initiiert.

connect

Wird ausgelöst, wenn der Benutzeragent erfolgreich mit dem Fernwiedergabegerät verbunden ist.

disconnect

Wird ausgelöst, wenn der Benutzeragent die Verbindung zum Fernwiedergabegerät trennt.

Das folgende Beispiel zeigt einen Player mit benutzerdefinierten Steuerungen, die Fernwiedergabe unterstützen. Der anfangs verwendete Knopf zur Auswahl eines Geräts ist 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 Fernwiedergabegeräten zu suchen. Wenn ein Gerät verfügbar ist, verwenden Sie den Callback, um den Knopf 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.
  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");
});