Sekundäres Bild

Cast-Entwickler können der Benutzeroberfläche ein informatives (sekundäres) Image für Audio- und Videoanwendungen hinzufügen. Weitere Informationen zur Kompatibilität finden Sie unter Unterstützte Bildformate.

Das zweite Bild wird oben rechts auf dem Display angezeigt und kann verwendet werden, um eine Grafik mit zusätzlichen Informationen zum aktuell wiedergegebenen Inhalt anzuzeigen, z. B. das Format des Inhalts, das Rufzeichen des Radiosenders oder die Altersfreigabe der TV-Sendung. Das sekundäre Image bleibt auf dem Bildschirm sichtbar, solange die Funktion für den aktuellen Inhalt aktiviert ist und der Player nicht inaktiv ist.

Tabelle 1 zeigt die Nutzererfahrung, wenn die Funktion auf den entsprechenden Gerätetypen und Steuerelementen aktiviert ist. Details zur Implementierung und Integration unterscheiden sich bei Audio- und Video-Apps geringfügig. In den folgenden Abschnitten wird beschrieben, wie Sie diese Funktion in Ihre Web Receiver-App integrieren.

Tabelle 1: Sekundäre Image-UI nach Inhalt und Gerätetyp
Gerätetyp Audioinhalte Video-Content
Chromecast Sekundäres Bild auf Chromecast-Dongles für Audioinhalte. Sekundäres Bild auf Chromecast-Dongles für Videoinhalte.
Chromecast mit Google TV Sekundäres Bild auf Chromecast mit Google TV-Dongles für Audioinhalte. Sekundäres Bild auf Chromecast mit Google TV-Dongles für Videoinhalte.
Smart Display Sekundäres Bild auf Smart Displays für Audioinhalte. Sekundäres Bild auf Smart Displays für Videoinhalte.
Smart Display-Fernbedienung Sekundäres Bild auf der Smart Display-Fernbedienung für Audioinhalte. Hinweis: Sekundäres Bild wird auf der Fernbedienung für Videoinhalte nicht unterstützt.

Audio

Überblick

Das Sekundärbild für Audioinhalte wird von den Metadaten der geladenen Inhalte gesteuert. Nachdem das Medienelement geladen wurde, werden alle nachfolgenden Änderungen am secondaryImage-Attribut der Metadaten in der UI widergespiegelt.

Wenn ein Smart Display als Fernbedienung für Audio verwendet wird, erscheint das sekundäre Bild auch auf der Benutzeroberfläche des Smart Displays, wenn es konfiguriert ist.

Implementierung

Wenn Sie das sekundäre Image festlegen, entfernen oder aktualisieren möchten, muss das Attribut secondaryImage von MusicTrackMediaMetadata geändert werden. Für das Attribut wird ein Image-Objekt mit der URL verwendet, die beschreibt, wo das sekundäre Bild gehostet wird.

Im Beispiel unten wird das sekundäre Image im Interceptor load festgelegt. Sobald der Inhalt im Player geladen wurde, wird das sekundäre Bild angezeigt.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

Zum Aktualisieren des sekundären Images während der Wiedergabe sollte die Anwendung PlayerManager verwenden, um das MediaInformation durch Aufrufen von getMediaInformation abzurufen. Die Anwendung sollte dann den metadata ändern, indem das Attribut secondaryImage auf den gewünschten Wert aktualisiert wird. Wenn Sie schließlich setMediaInformation mit den neuen Informationen aufrufen, wird die UI aktualisiert. Diese Methode kann verwendet werden, um Änderungen an Metadaten zu verarbeiten, die während der Wiedergabe durch Aktualisierungen wie EMSG- oder ID3-Ereignisse bereitgestellt werden.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

Um die Festlegung des sekundären Images aufzuheben, setzen Sie das Attribut secondaryImage im Metadatenobjekt auf null.

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

Video

Überblick

Bei Videoinhalten wird das sekundäre Bild mit UiManager festgelegt und entfernt. Das sekundäre Bild wird mit dem Overlay der Videosteuerelemente angezeigt.

Implementierung

Zum Festlegen des sekundären Images muss die Anwendung eine Instanz von UiManager abrufen und setSecondaryImage aufrufen. Sie benötigt zwei Parameter: den SecondaryImagePosition und die URL des Bildes. Das sekundäre Bild kann jederzeit festgelegt werden. Es wird jedoch nur angezeigt, wenn ein Nutzer das Overlay im Vordergrund auslöst.

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

Um das sekundäre Bild zu entfernen, setzen Sie die Bild-URL auf null oder einen leeren String.

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

Nächste Schritte

Damit sind Sie am Ende der Funktionen angelangt, die Sie zu Ihrem Web-Receiver hinzufügen können. Sie können jetzt eine Absender-App für iOS, Android oder Web erstellen.