Gambar Sekunder

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.

Tabel 1: UI gambar sekunder menurut konten dan jenis perangkat

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.

Catatan: Sebaiknya developer Cast menggunakan UI audio default yang disediakan melalui elemen <cast-media-player> Penerima Web. Menggunakan UI default memberikan pengalaman pengguna yang konsisten di seluruh Chromecast, layar smart, dan Chromecast dengan Google TV, dengan overhead minimal. Fitur gambar sekunder tidak didukung untuk aplikasi yang menggunakan UI kustom. Hal ini tidak berlaku untuk remote control karena akan selalu menampilkan gambar sekunder saat ditetapkan.

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.