Medyaya Göz Atma (CMB), akıllı ekran kullanıcılarının ses veya video içeriği kataloğunuzu keşfedip bunlarla etkileşim kurmasını sağlayan bir özelliktir. CMB, bunu, Akıllı Ekranlar için özel olarak ayarlanan basitleştirilmiş tarama deneyimiyle Web Alıcısı'nı geliştirerek yapar.
CMB, akıllı ekran kullanıcı arayüzü kurallarına uyan tutarlı bir göz atma deneyimi sunan standartlaştırılmış şablonları tanımlar. Geliştiriciler, bu standartlaştırılmış şablonları doldurmak için veri sağlar. Şablonlar hem ses hem de video içeriğini veya ikisinin bir karışımını destekler.
Giriş noktaları
CMB'de, kullanıcıların dokunma veya sesli kontrol kullanarak göz atabileceği ve içeriği seçebileceği iki giriş noktası vardır.
Oyuncular için göz atma
Uygulama tarafından sağlanan içerik listesinden seçim yapmak için oynatma sırasında yukarı kaydırın:
Video
Ses
Açılış sayfasına göz atma
cast-media-player
Ekranına sahip bir Web Alıcı, Akıllı Ekranlarda çalışırken "Boşta" durumundayken MBD'yi gösterir.
Video ve İşitsel
İçerik dolduruluyor
Geliştiriciler her bir giriş noktası için şablonu her bir içerik öğesiyle ilgili verilerle doldurmaktan sorumludur. Oyuncu İçi Göz Atma özelliğini doldurmak için kullanılan içerik, Açılış Sayfası Göz Atma'yı doldurmak için kullanılan içerikten farklı olabilir.
Kullanıcının şu anda oynattığı içerikle veya bir oynatma listesiyle ilgili öğeleri görüntülemek için Oyuncu İçi Göz Atma özelliğini kullanın. Canlı TV sağlayıcıları, kolay erişim amacıyla kanal listesini doldurmak için de bu giriş noktasını kullanabilir.
Yeni orijinal içerik, şu anda yayında olan içerikler veya kullanıcılarınızın ilgisini daha fazla çekebilecek içeriklerle ilgili farkındalık oluşturmak için açılış sayfası göz atma özelliğini kullanın.
Medyaya Göz Atmayı Etkinleştir
Göz atmak için setBrowseContent
yazarak medya içeriklerinin listesini sağlayın:
const controls = cast.framework.ui.Controls.getInstance(); controls.setBrowseContent(BrowseContent);
Medya Göz Atma kullanıcı arayüzü, bu yöntem çağrıldıktan hemen sonra güncellenir.
Güvenli alan yüksekliği
CMB etkinleştirildiğinde, Cast SDK kullanıcı arayüzünün güvenli alan yüksekliği değişir ve mevcut Web Alıcısı kullanıcı arayüzünü güncellemeniz gerekebilir. Güvenli alanın yüksekliğini belirlemek için getSafeAreaHeight
özelliğini kullanın.
// 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
Medyaya Göz Atmayı Kaldır
Medyaya Göz Atma Kullanıcı Arayüzünü kaldırmak için null
öğesini setBrowseContent
ile kullanın:
controls.setBrowseContent(null);
Medya Taramayı Özelleştir
Göz atma içeriği
Medyaya Göz Atma Kullanıcı Arayüzü başlığını özelleştirmek ve öğeleri güncellemek için BrowseContent
özelliğini kullanın:
Medyaya Göz Atma Kullanıcı Arayüzü'ndeki her bir öğenin başlığını, alt başlığını, süresini ve resmini görüntülemek için BrowseItem
aracını kullanın.
En boy oranı
Resim öğeleriniz için en iyi en boy oranını seçmek üzere targetAspectRatio
kullanın. Web Buyer SDK, üç en boy oranını destekler:
En Boy Oranı | Örnek |
---|---|
SQUARE_1_TO_1 |
|
PORTRAIT_2_TO_3 |
|
LANDSCAPE_16_TO_9 |
Mesajlar
Bir kullanıcı Media Göz Atma Kullanıcı Arayüzünden öğelerden birini seçtiğinde, Web Alıcısı SDK'sı, seçilen BrowseItem
değerlerine göre uygulamaya bir LOAD
mesajı gönderir.
Örnek kod
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;
});