Developer transmisi dapat menambahkan gambar informasi (sekunder) ke UI untuk aplikasi audio dan video. Lihat format gambar yang didukung untuk mengetahui kompatibilitasnya.
Gambar sekunder muncul di kanan atas layar, dan dapat digunakan untuk menampilkan grafik dengan informasi tambahan tentang konten yang sedang diputar, seperti format konten, tanda panggilan stasiun radio, atau rating acara TV. Gambar sekunder tetap ditampilkan di layar selama fitur ini diaktifkan untuk konten saat ini dan pemutar tidak dalam status tidak ada aktivitas.
Tabel 1 menunjukkan pengalaman pengguna saat fitur ini diaktifkan pada jenis dan kontrol perangkat yang berlaku. Detail penerapan dan integrasi sedikit berbeda antara aplikasi audio dan video. Lihat bagian di bawah untuk mengintegrasikan fitur ini di aplikasi Penerima Web Anda.
Device Type | Konten Audio | Konten Video |
---|---|---|
Chromecast |
![]() |
![]() |
Chromecast dengan Google TV |
![]() |
![]() |
Layar Smart |
![]() |
![]() |
Remote Control Smart Display |
![]() |
Catatan: Gambar sekunder tidak didukung pada remote control untuk konten video. |
Audio
Ringkasan
Gambar sekunder untuk konten audio didorong oleh metadata konten yang dimuat. Setelah item media dimuat, setiap perubahan berikutnya pada properti secondaryImage
metadata tercermin di UI.
Jika layar smart digunakan sebagai remote control untuk audio, gambar sekunder juga akan muncul pada UI layar smart saat disetel.
Penerapan
Untuk menetapkan, menghapus, atau memperbarui gambar sekunder, properti
secondaryImage
dari MusicTrackMediaMetadata
perlu diubah. Properti ini mengambil
objek Image
yang diisi dengan URL yang menjelaskan tempat gambar sekunder dihosting.
Pada contoh di bawah, gambar sekunder ditetapkan dalam interseptor load
. Setelah
pemain selesai memuat konten, gambar sekunder akan ditampilkan.
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;
});
Untuk memperbarui gambar sekunder selama pemutaran, aplikasi harus menggunakan
PlayerManager
untuk mendapatkan MediaInformation
dengan memanggil
getMediaInformation
.
Aplikasi kemudian harus memodifikasi metadata
dengan mengupdate
properti secondaryImage
ke nilai yang diinginkan. Terakhir, memanggil setMediaInformation
dengan informasi baru akan memperbarui UI. Metode ini dapat digunakan untuk menangani
perubahan metadata yang disediakan melalui update seperti peristiwa EMSG
atau ID3
selama pemutaran.
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);
});
Untuk membatalkan penetapan gambar sekunder, tetapkan properti secondaryImage
ke null pada objek metadata.
// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);
Video
Ringkasan
Untuk konten video, gambar sekunder disetel dan dihapus menggunakan
UiManager
.
Gambar sekunder ditampilkan dengan overlay kontrol video.
Penerapan
Untuk menetapkan gambar sekunder, aplikasi harus mendapatkan instance UiManager
dan memanggil
setSecondaryImage
.
Dibutuhkan dua parameter: SecondaryImagePosition
dan URL gambar. Menetapkan gambar sekunder dapat dilakukan kapan saja, tetapi
hanya akan ditampilkan saat pengguna memicu overlay menjadi di latar depan.
/**
* 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');
Menghapus gambar sekunder dilakukan dengan menetapkan URL gambar ke null
atau
string kosong.
// 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);
Langkah berikutnya
Ini melengkapi fitur yang dapat Anda tambahkan ke Penerima Web. Sekarang Anda dapat mem-build aplikasi pengirim di iOS, Android, atau Web.