Medyaya Göz Atma

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

Medyaya Göz Atma Girişi - Oynatıcı Video 1 Medyaya Göz Atma Girişi - Oynatıcı Video 2

Ses

Medyaya Göz Atma Girişi - Oynatıcı Ses 1 Medyaya Göz Atma Girişi - Oynatıcı Ses 2

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

Medyaya Göz Atma Girişi - Açılış Sayfası Videosu Medyaya Göz Atma Girişi - Açılış Sayfası Sesi

İç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 - İçeriğe Göz Atma

A. BrowseContent.title

B. BrowseContent.items

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.

Medyaya Göz Atma - Öğeye Göz At

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

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 Medyaya Göz Atma - Kare En Boy Oranı
PORTRAIT_2_TO_3 Medyaya Göz Atma - Dikey En Boy Oranı
LANDSCAPE_16_TO_9 Medyaya Göz Atma - Yatay En Boy Oranı

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;
  });