Akıllı Ekranlar için optimize et

Akıllı Ekranlar, Web Alıcısı uygulamalarının dokunmatik özellikli kontrolleri desteklemesine olanak tanıyan dokunma işlevine sahip cihazlardır. Web Alıcısı SDK'sı, oynatıcı kontrollerine yönelik ek özelleştirmeyle varsayılan bir kullanıcı arayüzü deneyimi sunar.

Bu kılavuzda, akıllı ekranlarda kullanıma sunulduğunda Web Alıcı uygulamanızı nasıl optimize edeceğiniz ve oynatıcı kontrollerini nasıl özelleştireceğiniz açıklanmaktadır.

Kullanıcı arayüzü kontrollerine erişme

Kullanıcı Arayüzü Kontrolleri nesnesine aşağıdaki kodla erişilebilir:

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

cast-media-player öğesi kullanmıyorsanız UiConfig altında UiConfig içinde touchScreenOptimizedApp özelliğini true olarak ayarlamanız gerekir.

context.start({
  uiConfig: {
    touchScreenOptimizedApp: true
  }
});

Varsayılan video kullanıcı arayüzü

Varsayılan kontrol düğmeleri, her bir alana MetadataType ve MediaStatus.supportedMediaCommands temel alınarak atanır.

Meta Veri Türü.Film, Meta Veri Türü.Genel

C: --playback-logo-image

B. MovieMediaMetadata.subtitle veya GenericMediaMetadata.subtitle.

C. MovieMediaMetadata.title veya GenericMediaMetadata.title.

D. MediaStatus.currentTime

E. MediaInformation.duration

S. ControlsSlot.SLOT_SECONDARY_1

G. ControlsSlot.SLOT_PRIMARY_1

daha fazla Oynat / Duraklat

I. ControlsSlot.SLOT_PRIMARY_2

J. ControlsSlot.SLOT_SECONDARY_2

supportedMediaCommands değeri ALL_BASIC_MEDIA değerine geldiğinde varsayılan kontrol düzeni aşağıdaki gibi görünür:

supportedMediaCommands değeri ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT değerine geldiğinde varsayılan kontrol düzeni aşağıdaki gibi görünür:

supportedMediaCommands değeri PAUSE | QUEUE_PREV | QUEUE_NEXT olduğunda, varsayılan denetim düzeni aşağıdaki gibi gösterilir:

Metin parçaları kullanılabilir olduğunda altyazı düğmesi her zaman SLOT_SECONDARY_1 adresinde gösterilir.

Alıcı bağlamı başlattıktan sonra supportedMediaCommands değerini dinamik olarak değiştirmek için PlayerManager.setSupportedMediaCommands yöntemini çağırarak değeri geçersiz kılabilirsiniz. Ayrıca addSupportedMediaCommands kullanarak yeni bir komut ekleyebilir veya removeSupportedMediaCommands kullanarak mevcut komutu kaldırabilirsiniz.

Varsayılan ses kullanıcı arayüzü

Meta VeriTürü.MUSIC_TRACK

C: --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist veya MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

S. MediaStatus.currentTime

G. MediaInformation.duration

I. ControlsSlot.SLOT_SECONDARY_1

I. ControlsSlot.SLOT_PRIMARY_1

J. Oynat / Duraklat

K. ControlsSlot.SLOT_PRIMARY_2

Sol ControlsSlot.SLOT_SECONDARY_2

supportedMediaCommands değeri ALL_BASIC_MEDIA olduğunda, varsayılan kontrol düzeni aşağıdaki gibi görüntülenir:

supportedMediaCommands değeri ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT olduğunda, varsayılan denetim düzeni aşağıdaki gibi gösterilir:

Bir Web Alıcısı bağlamını başlattıktan sonra supportedMediaCommands değerini dinamik olarak değiştirmek için PlayerManager.setSupportedMediaCommands yöntemini çağırarak değeri geçersiz kılabilirsiniz. Ayrıca, addSupportedMediaCommands kullanarak yeni komutlar ekleyebilir veya removeSupportedMediaCommands kullanarak mevcut komutları kaldırabilirsiniz.

Kullanıcı arayüzü kontrol düğmesi düzenini özelleştirin

Kullanıcı arayüzü kontrollerindeki düğmeleri değiştirmek istiyorsanız özel düzen kullanın.

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

Daha sonra assignButton numaralı telefonu arayarak 4 alana kontrol düğmeleri atayabilirsiniz.

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_1,
  cast.framework.ui.ControlsButton.LIKE
)

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_2,
  cast.framework.ui.ControlsButton.DISLIKE
)

Özel düzen aşağıdaki gibi gösterilir:

Atanan düğme MediaStatus.supportedMediaCommands uygulamasında desteklenmediğinde düğme devre dışı bırakılır. Örneğin, supportedMediaCommands öğesi ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE ise QUEUE_PREV düğmesi devre dışı bırakılır.

Bir Web Alıcısı bağlamı başlattıktan sonra supportedMediaCommands değerini dinamik olarak değiştirmek için PlayerManager.setSupportedMediaCommands yöntemini kullanarak değeri geçersiz kılabilirsiniz. Ayrıca, addSupportedMediaCommands kullanarak yeni komutlar ekleyebilir veya removeSupportedMediaCommands kullanarak mevcut komutları kaldırabilirsiniz.

İkincil Resim

İkincil Resim, Cast geliştiricilerine örneğin yerel kanal logolarını veya medya biçimini görüntülemek üzere ses ve video uygulamaları için kullanıcı arayüzüne bilgi resmi ekleme esnekliği sağlar. Bu yeni işlev, farklı Yayın görüntülü reklam platformlarında (Chromecast, akıllı ekranlar ve Google TV'li Chromecast) tutarlı bir kullanıcı arayüzü sunarken çok az ek yük ile sunulmaktadır.