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.
Gerätetyp | Audioinhalte | Video-Content |
---|---|---|
Chromecast | ||
Chromecast mit Google TV | ||
Smart Display | ||
Smart Display-Fernbedienung | 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.