Web Alıcı SDK'sı, yerleşik bir oynatıcı kullanıcı arayüzü sağlar. Bu kullanıcı arayüzünü özel Web Alıcısı uygulamanıza uygulamak için cast-media-player
öğesini HTML dosyanızın gövdesine eklemeniz gerekir.
<body>
<cast-media-player></cast-media-player>
</body>
CSS değişkenleri, oynatıcı arka planı, başlangıç resmi, yazı tipi ailesi gibi çeşitli cast-media-player
özelliklerini özelleştirmenizi sağlar. Bu değişkenleri satır içi CSS stilleri, CSS stil sayfası veya JavaScript'te style.setProperty
aracılığıyla ekleyebilirsiniz.
Sonraki bölümlerde, medya oynatıcı öğesinin her bir alanını nasıl özelleştireceğinizi öğrenin. Başlarken aşağıdaki şablonları kullanabilirsiniz.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/receiver.css" media="screen" /> <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> </script> </head> <body> <cast-media-player></cast-media-player> </body> <footer> <script src="js/receiver.js"></script> </footer> </html>
js/receiver.js
const context = cast.framework.CastReceiverContext.getInstance(); ... // Update style using javascript let playerElement = document.getElementsByTagName("cast-media-player")[0]; playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")'); ... context.start();
css/receiver.css
body { --playback-logo-image: url('http://some/image.png'); } cast-media-player { --theme-hue: 100; --progress-color: rgb(0, 255, 0); --splash-image: url('http://some/image.png'); --splash-size: cover; }
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> </script> </head> <body> <cast-media-player></cast-media-player> <style> body { --playback-logo-image: url('http://some/image.png'); } cast-media-player { --theme-hue: 100; --progress-color: rgb(0, 255, 0); --splash-image: url('http://some/image.png'); } </style> <script> const context = cast.framework.CastReceiverContext.getInstance(); ... // Update style using javascript let playerElement = document.getElementsByTagName("cast-media-player")[0]; playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")'); ... context.start(); </script> </body> </html>
Oynatma logosu
Medya oynatılırken alıcınızın sol üst köşesinde oynatma logosu görüntülenir. Bu özellik, .logo
sınıfından ayrıdır. body
seçicisinden --playback-logo-image
öğesini özelleştirebilirsiniz.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Oynatıcı arka plan özellikleri
--background
değişkenleri, oynatıcının tüm arka plan özelliklerini
ayarlar. Bu özellikler, başlatma ve oynatma sırasında görünür. Örneğin, tüm arka plan için beyaz ve gümüş renkli bir doğrusal renk geçişini ayarlayabilirsiniz:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
Web alıcısı ekranı:
.background
özelliklerini özelleştirmek için aşağıdaki değişkenleri kullanabilirsiniz:
Değişkenler ve varsayılanlar
Ad | Varsayılan Değer | Açıklama |
---|---|---|
--arka plan | siyah | CSS arka plan özelliği |
--background-color | CSS background-color özelliği | |
--background-image | CSS arka plan resmi özelliği | |
--background-repeat | yineleme yok | CSS arka plan-tekrarlama özelliği |
--background-size | cover | CSS arka plan boyutu özelliği |
CSS şablonu
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Logo özellikleri
.logo
sınıfı, .background
sınıfının önüne yerleştirilir ve tüm oynatıcıyı kapsar. Bu sınıf, alıcınız başlatılırken gösterilir. Herhangi bir .splash
değişkeni sağlamazsanız .logo
sınıfı, alıcınız boşta olduğunda da gösterilir.
Aşağıdaki örnekte --logo-image
, welcome.png
adlı bir ekolayzer simgesine ayarlanmaktadır. Resimler varsayılan olarak alıcınızın ortasına yerleştirilir.
cast-media-player {
--logo-image: url('welcome.png');
}
Web alıcısı ekranı:
.logo
özelliklerini özelleştirmek için aşağıdaki değişkenleri kullanabilirsiniz:
Değişkenler ve varsayılanlar
Ad | Varsayılan Değer | Açıklama |
---|---|---|
--logo-background | CSS arka plan özelliği | |
--logo-color | CSS background-color özelliği | |
--logo-image | CSS arka plan resmi özelliği | |
--logo-repeat | yineleme yok | CSS arka plan-tekrarlama özelliği |
--logo-size | CSS arka plan boyutu özelliği |
CSS şablonu
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Başlangıç özellikleri
.logo
sınıfına benzer şekilde .splash
sınıfı tüm oynatıcıyı kapsar. Bu özellikleri ayarlarsanız alıcınız boşta kaldığında .splash
değişkenleriniz .logo
değişkenlerini geçersiz kılar. Bu, lansmanda bir .logo
özellik grubu kullanabileceğiniz ve alıcınız boşta kaldığında ayrı arka planlar veya resimler görüntüleyebileceğiniz anlamına gelir.
Örneğin, beyaz ve gümüş renk geçişli arka planı dimgray
ile geçersiz kılabilir ve animasyonlu bir bekleniyor... simgesi ekleyebilirsiniz:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Web alıcısı ekranı:
Bu özellikleri ayarlamazsanız alıcınız boştayken varsayılan olarak .logo
ayarlarınıza veya uygulama adınıza ayarlanır.
.splash
özelliklerini özelleştirmek için aşağıdaki değişkenleri kullanabilirsiniz:
Değişkenler ve varsayılanlar
Ad | Varsayılan Değer | Açıklama |
---|---|---|
--splash-background | CSS arka plan özelliği | |
--splash-color | CSS background-color özelliği | |
--splash-image | CSS arka plan resmi özelliği | |
--splash-repeat | CSS arka plan-tekrarlama özelliği | |
--splash-size | CSS arka plan boyutu özelliği |
CSS şablonu
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Slayt gösterisi
Boşta kalma durumunda (başlangıç resminin yerine) 10 görüntüye kadar döngü yapılması için aşağıdaki slayt gösterisi parametrelerini kullanın.
Değişkenler ve varsayılanlar
Ad | Varsayılan Değer | Açıklama |
---|---|---|
--slideshow-interval-duration | 10 saniye | Resimler arasındaki süre. |
--slideshow-animation-duration | 2 sn. | Geçiş süresi. |
--slideshow-image-1 | Slayt gösterisindeki ilk resim. | |
--slideshow-image-2 | Slayt gösterisindeki ikinci resim. | |
--slideshow-image-3 | Slayt gösterisindeki üçüncü resim. | |
--slideshow-image-4 | Slayt gösterisindeki dördüncü resim. | |
--slideshow-image-5 | Slayt gösterisindeki beşinci resim. | |
--slideshow-image-6 | Slayt gösterisindeki altıncı resim. | |
--slideshow-image-7 | Slayt gösterisindeki yedinci resim. | |
--slideshow-image-8 | Slayt gösterisindeki sekizinci resim. | |
--slideshow-image-9 | Slayt gösterisinde dokuzuncu resim. | |
--slideshow-image-10 | Slayt gösterisindeki onuncu resim. |
CSS şablonu
cast-media-player {
--slideshow-interval-duration:
--slideshow-animation-duration:
--slideshow-image-1:
--slideshow-image-2:
--slideshow-image-3:
--slideshow-image-4:
--slideshow-image-5:
--slideshow-image-6:
--slideshow-image-7:
--slideshow-image-8:
--slideshow-image-9:
--slideshow-image-10:
}
Filigran özellikleri
Medya oynatılırken .watermark
görüntüleniyor. Bu genellikle varsayılan olarak alıcınızın sağ alt kısmında yer alan küçük ve şeffaf bir resimdir.
.watermark
özelliklerini özelleştirmek için aşağıdaki değişkenleri kullanabilirsiniz:
Değişkenler ve varsayılanlar
Ad | Varsayılan Değer | Açıklama |
---|---|---|
--watermark-background | CSS arka plan özelliği | |
--watermark-color | CSS background-color özelliği | |
--watermark-image | CSS arka plan resmi özelliği | |
--watermark-position | sağ alt | CSS arka plan konumu özelliği |
--watermark-repeat | yineleme yok | CSS arka plan-tekrarlama özelliği |
--watermark-size | CSS arka plan boyutu özelliği |
CSS şablonu
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
Oynatma, reklamlar ve diğer CSS özellikleri
Ayrıca cast-media-player
seçiciden reklamları, yazı tiplerini, oynatıcı resimlerini ve diğer özellikleri özelleştirebilirsiniz.
Değişkenler ve varsayılanlar
Ad | Varsayılan Değer | Açıklama |
---|---|---|
--ad-title | Reklam | Reklamın başlığı. |
--skip-ad-title | Reklamı atla | Reklamı Atla metin kutusunun metni. |
--break-color | hsl(ton; %100; %50) | Reklam arası işaretinin rengi. |
--font-family | Open Sans | Meta veriler ve ilerleme çubuğu için yazı tipi ailesi. |
--spinner-image | Varsayılan resim | Başlatılırken gösterilecek resim. |
--buffering-image | Varsayılan resim | Arabelleğe alınırken görüntülenecek resim. |
--pause-image | Varsayılan resim | Duraklatıldığında görüntülenecek resim. |
--play-image | Oynatma sırasında meta veride gösterilecek resim. | |
--theme-hue | 42 | Oynatıcı için kullanılacak ton. |
--progress-color | hsl(ton; %95; %60) | İlerleme çubuğu rengi. |
CSS şablonu
cast-media-player {
--ad-title:
--skip-ad-title:
--break-color:
--font-family:
--spinner-image:
--buffering-image:
--pause-image:
--play-image:
--theme-hue:
--progress-color:
}
Daha fazla bilgi ve ek resimler için Stilli Medya Alıcısı bölümüne bakın.
Fazla tarama
TV standartlarının evrimi ve izleyicilere her zaman tam ekran bir resim sunma isteği nedeniyle TV için Layouts bazı benzersiz gereksinimlere sahiptir. TV cihazları, ekranın tamamının dolmasını sağlamak için uygulama düzeninin dış kenarını kırpabilir. Bu davranışa genellikle aşırı tarama denir. Düzeninizin her tarafına %10'luk bir alan ekleyerek, ekran öğelerinin fazla tarama nedeniyle kırpılmasını önleyin.
Varsayılan ses kullanıcı arayüzü
MetadataType.MUSIC_TRACK
C. --logo-image
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
veya MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
H. Oynat / Duraklat
Özel kullanıcı arayüzü veri bağlaması
Cast Web Alıcı SDK'sı, cast-media-player
yerine kendi özel kullanıcı arayüzü öğenizi kullanmayı destekler.
Özel kullanıcı arayüzü veri bağlaması, kendi özel kullanıcı arayüzü öğenizi kullanmanıza ve alıcınıza cast-media-player
öğesi eklemek yerine kullanıcı arayüzünü oynatıcı durumuna bağlamak için PlayerDataBinder
sınıfından yararlanmanıza olanak tanır. Bağlayıcı, uygulama veri bağlamayı desteklemiyorsa veri değişiklikleri için etkinlik göndermeyi de destekler.
const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();
const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
// Update ui according to player state
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
e => {
switch (e.value) {
case cast.framework.ui.State.LAUNCHING:
case cast.framework.ui.State.IDLE:
// Write your own event handling code
break;
case cast.framework.ui.State.LOADING:
// Write your own event handling code
break;
case cast.framework.ui.State.BUFFERING:
// Write your own event handling code
break;
case cast.framework.ui.State.PAUSED:
// Write your own event handling code
break;
case cast.framework.ui.State.PLAYING:
// Write your own event handling code
break;
}
});
context.start();
Web Alıcısı'nın kullanabilmesi için HTML'ye en az bir MediaElement
eklemeniz gerekir. Birden fazla MediaElement
nesnesi varsa Web Alıcısı'nın kullanmasını istediğiniz MediaElement
öğesini etiketlemeniz gerekir. Bunu, aşağıda gösterildiği gibi, videonun sınıf listesine castMediaElement
ekleyerek yapabilirsiniz. Aksi takdirde, Web Alıcısı ilk MediaElement
olanı seçer.
<video class="castMediaElement"></video>