Gambar Sekunder

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.

Tabel 1: UI gambar sekunder menurut konten dan jenis perangkat
Device Type Konten Audio Konten Video
Chromecast Gambar sekunder pada dongle chromecast untuk konten audio. Gambar sekunder pada dongle chromecast untuk konten video.
Chromecast dengan Google TV Gambar sekunder di Chromecast dengan dongle Google TV untuk konten audio. Gambar sekunder di Chromecast dengan dongle Google TV untuk konten video.
Layar Smart Gambar sekunder di layar smart untuk konten audio. Gambar sekunder di layar smart untuk konten video.
Remote Control Layar Smart Gambar sekunder pada remote control layar smart untuk konten audio. 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.

Sebelumnya
Live
Berikutnya
Logger Debug Cast