Media Browse

Jelajah Media Cast (CMB) adalah fitur yang memungkinkan pengguna smart display menemukan dan berinteraksi dengan katalog konten audio atau video. CMB melakukannya dengan meningkatkan Web Receiver dengan pengalaman penjelajahan sederhana yang disesuaikan secara khusus untuk layar smart.

CMB menentukan template standar yang memberikan pengalaman penjelajahan yang konsisten yang mengikuti konvensi UI layar smart. Developer menyediakan data untuk mengisi template standar ini. Template mendukung konten audio dan video atau campuran keduanya.

Titik entri

Ada dua titik entri untuk CMB, tempat pengguna dapat menjelajahi dan memilih konten menggunakan kontrol sentuh atau suara.

Penjelajahan dalam pemutar

Geser ke atas selama pemutaran untuk memilih dari daftar konten yang disediakan aplikasi:

Video

Audio

Penjelajahan halaman landing

Saat Penerima Web dengan elemen cast-media-player berjalan di Layar Smart, penerima akan ditampilkan dalam status IDLE.

Video dan Audio

Mengisi konten

Developer bertanggung jawab mengisi template untuk setiap titik entri dengan data untuk setiap item konten. Konten yang digunakan untuk mengisi Jelajah dalam Pemutar dapat berbeda dengan konten yang digunakan untuk mengisi Jelajah Halaman Landing.

Gunakan In-Player Browsing untuk menampilkan item yang terkait dengan konten yang sedang diputar pengguna, atau item playlist. Penyedia TV Live juga dapat menggunakan titik entri ini untuk mengisi daftar saluran agar mudah diakses.

Gunakan Penjelajahan Halaman Landing untuk meningkatkan awareness terhadap konten asli baru, konten yang sedang ditayangkan, atau konten yang mungkin menarik bagi pengguna Anda.

Peringatan: Untuk mencegah masalah performa, jumlah maksimum item Cari Media adalah 30 item.

Aktifkan Jelajah Media

Berikan daftar konten media untuk dijelajahi dengan memanggil setBrowseContent:

const controls = cast.framework.ui.Controls.getInstance();
controls.setBrowseContent(BrowseContent);

UI Jelajah Media diperbarui segera setelah memanggil metode ini.

Tinggi area aman

Saat CMB diaktifkan, tinggi area aman UI Cast SDK berubah, dan Anda mungkin perlu mengupdate UI Penerima Web yang ada. Gunakan getSafeAreaHeight untuk menentukan tinggi area aman.

// Media Browse UI enabled
controls.setBrowseContent(BrowseContent);
console.log(controls.getSafeAreaHeight()); // 338px on Google Nest Hub

// Media Browse UI disabled
controls.setBrowseContent(null);
console.log(controls.getSafeAreaHeight()); // 408px on Google Nest Hub

Menghapus Media Browsing

Untuk menghapus UI Jelajah Media, gunakan null dengan setBrowseContent:

controls.setBrowseContent(null);

Sesuaikan Jelajah Media

Konten penjelajahan

Gunakan BrowseContent untuk menyesuaikan judul UI Jelajah Media dan memperbarui item:

A. BrowseContent.title

B. BrowseContent.items

Gunakan BrowseItem untuk menampilkan judul, subtitel, durasi, dan gambar setiap item di UI Jelajah Media:

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

Rasio lebar tinggi

Gunakan targetAspectRatio untuk memilih rasio lebar tinggi terbaik untuk aset gambar Anda. Tiga rasio lebar tinggi didukung oleh Web Receiver SDK:

Rasio Lebar Tinggi	Contoh
SQUARE_1_TO_1
PORTRAIT_2_TO_3
LANDSCAPE_16_TO_9

Messages

Saat pengguna memilih salah satu item dari UI Jelajah Media, Web Receiver SDK mengirimkan pesan LOAD ke aplikasi sesuai dengan nilai BrowseItem yang dipilih.

Kode contoh

const controls = cast.framework.ui.Controls.getInstance();

const item1 = new cast.framework.ui.BrowseItem();
item1.title = 'Title 1';
item1.subtitle = 'Subtitle 1';
item1.duration = 300;
item1.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item1.image = new cast.framework.messages.Image('1.jpg');
item1.entity = 'example://gizmos/1';

const item2 = new cast.framework.ui.BrowseItem();
item2.title = 'Title 2';
item2.subtitle = 'Subtitle 2';
item2.duration = 100;
item2.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item2.image = new cast.framework.messages.Image('2.jpg');
item2.entity = 'example://gizmos/2';

const items = [item1, item2];

const browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = items;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    // Media browse
    controls.setBrowseContent(browseContent);
  });

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD, loadRequestData => {
    if (loadRequestData.media && loadRequestData.media.entity) {
      // Load by entity
      loadRequestData.media.contentId = entityToId(loadRequestData.media.entity);
      loadRequestData.media.contentUrl = entityToUrl(loadRequestData.media.entity);
    }
    return loadRequestData;
  });