Yayın geliştiricileri, ses ve video uygulamaları için kullanıcı arayüzüne bilgilendirici (ikincil) bir resim ekleyebilirler. Uyumluluk için desteklenen resim biçimlerini inceleyin.
İkincil resim, ekranın sağ üst tarafında görünür ve o anda oynatılan içerik hakkında ek bilgiler (ör. içerik biçimi, radyo istasyonu çağrı işareti veya TV programının derecelendirmesi) içeren bir grafiği göstermek için kullanılabilir. İkincil resim, özellik mevcut içerik için etkin olduğu ve oynatıcı boşta durumda olmadığı sürece ekranda kalır.
Tablo 1, ilgili özellik geçerli cihaz türlerinde ve kontrollerde etkinleştirildiğinde kullanıcı deneyimini gösterir. Uygulama ve entegrasyon ayrıntıları, ses ve video uygulamaları arasında biraz farklılık gösterir. Bu özelliği Web Alıcısı uygulamanıza entegre etmek için aşağıdaki bölümlere bakın.
Cihazın Türü | Ses İçeriği | Video İçeriği |
---|---|---|
Chromecast | ||
Google TV'li Chromecast | ||
Akıllı Ekran | ||
Akıllı Ekran Uzaktan Kumandası | Not: Uzaktan kumandalarda video içeriğine ilişkin ikincil resim desteklenmez. |
Ses
Genel bakış
Ses içeriğinin ikincil resmi, yüklenen içeriğin meta verileri tarafından yönlendirilir. Medya öğesi yüklendikten sonra, meta verilerin secondaryImage
özelliğinde yapılan sonraki değişiklikler kullanıcı arayüzüne yansıtılır.
Akıllı ekran, ses için uzaktan kumanda olarak kullanılıyorsa ikincil görüntü de ayarlandığında akıllı ekranın kullanıcı arayüzünde görünür.
Uygulama
İkincil resmi ayarlamak, kaldırmak veya güncellemek için MusicTrackMediaMetadata
öğesinin secondaryImage
özelliğinin değiştirilmesi gerekir. Bu özellik, ikincil resmin nerede barındırıldığını açıklayan URL ile doldurulan bir Image
nesnesi alır.
Aşağıdaki örnekte ikincil resim, load
önleyicisinde ayarlanmıştır. Oynatıcı içeriği yüklemeyi bitirdiğinde, ikincil resim görüntülenir.
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, loadRequestData => {
loadRequestData.media.metadata =
new cast.framework.messages.MusicTrackMediaMetadata();
// Set image on secondaryImage field of metadata object
loadRequestData.media.metadata.secondaryImage =
new cast.framework.messages.Image('https://www.image.png');
return loadRequestData;
});
Oynatma sırasında ikincil görüntüyü güncellemek için uygulama, getMediaInformation
çağrısı yaparak MediaInformation
edinmek üzere PlayerManager
kullanmalıdır.
Daha sonra uygulama, secondaryImage
özelliğini istenen değere güncelleyerek metadata
özelliğini değiştirmelidir. Son olarak, yeni bilgilerle setMediaInformation
çağrıldığında kullanıcı arayüzü güncellenir. Bu yöntem, oynatma sırasında EMSG
veya ID3
etkinlikleri gibi güncellemeler aracılığıyla sağlanan meta verilerdeki değişiklikleri işlemek için kullanılabilir.
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage =
new cast.framework.messages.Image('http://anotherimage.png');
playerManager.setMediaInformation(mediaInformation);
});
İkincil resmin ayarını kaldırmak için secondaryImage
özelliğini meta veri nesnesinde null değerine ayarlayın.
// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);
Video
Genel bakış
Video içeriği için ikincil resim, UiManager
kullanılarak ayarlanır ve kaldırılır.
İkincil resim, video kontrolleri yer paylaşımıyla gösterilir.
Uygulama
İkincil görüntüyü ayarlamak için uygulamanın UiManager
örneği alıp setSecondaryImage
yöntemini çağırması gerekir.
İki parametre alır: resmin SecondaryImagePosition
ve URL'si. İkincil resmin ayarlanması herhangi bir zamanda yapılabilir, ancak yalnızca bir kullanıcı yer paylaşımının ön plana alınmasını tetiklediğinde gösterilir.
/**
* Sets the image url for the secondary image overlay. Replaces any image that
* was previously set.
*/
castUiManager.setSecondaryImage(
cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
'http://www.image.png');
İkincil resmi kaldırmak için resim URL'si null
veya boş bir dizeye ayarlanır.
// To clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);
Sonraki adımlar
Web Alıcınıza ekleyebileceğiniz özellikler burada tamamlanmış olur. Artık iOS, Android veya Web'de bir gönderen uygulaması oluşturabilirsiniz.