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.
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:
Gunakan
BrowseItem
untuk menampilkan judul, subtitel, durasi, dan gambar setiap item di UI
Jelajah Media:
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;
});