Developer Cast dapat menambahkan image informasi (sekunder) ke UI untuk aplikasi audio dan video. Lihat format gambar yang didukung untuk mengetahui kompatibilitas.
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 panggil stasiun radio, atau rating acara TV. Gambar sekunder tetap ada di layar selama fitur 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.
Device Type | Konten Audio | Konten Video |
---|---|---|
Chromecast | ||
Chromecast dengan Google TV | ||
Layar Smart | ||
Remote Control Layar Smart | Catatan: Gambar sekunder tidak didukung di 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 akan ditampilkan dalam UI.
Jika layar smart digunakan sebagai remote control untuk audio, gambar sekunder juga akan muncul di 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.
Dalam contoh di bawah, gambar sekunder disetel 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
.
Selanjutnya, aplikasi harus mengubah metadata
dengan memperbarui
properti secondaryImage
ke nilai yang diinginkan. Terakhir,
memanggil setMediaInformation
dengan informasi baru akan mengupdate 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 ditetapkan dan dihapus menggunakan
UiManager
.
Gambar sekunder ditampilkan dengan overlay kontrol video.
Penerapan
Untuk menetapkan gambar sekunder, aplikasi harus mendapatkan instance UiManager
dan memanggil
setSecondaryImage
.
Parameter ini memerlukan dua parameter: SecondaryImagePosition
dan URL gambar. Menyetel gambar sekunder dapat dilakukan kapan saja, tetapi
hanya akan ditampilkan ketika pengguna memicu overlay ke 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');
Penghapusan gambar sekunder dilakukan dengan menyetel 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
Bagian ini mengakhiri fitur yang dapat Anda tambahkan ke Penerima Web. Sekarang Anda dapat membuat aplikasi pengirim di iOS, Android, atau Web.