Web Alıcısı SDK'sı yerleşik 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 ve diğer özellikler dahil olmak üzere çeşitli cast-media-player özelliklerini özelleştirmenize olanak tanır. Bu değişkenleri satır içi CSS stilleri, CSS stil sayfası veya style.setProperty öğesine sahip JavaScript'le ekleyebilirsiniz.
Sonraki bölümlerde, medya oynatıcı öğesinin her bir alanını nasıl özelleştireceğinizi öğrenin. Başlamanıza yardımcı olması için 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/alıcı.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/alıcı.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, oynatma logosu alıcınızın sol üst köşesinde gösterilir. Bu mülk, .logo sınıfından ayrıdır. --playback-logo-image öğesini body seçiciden özelleştirebilirsiniz.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Oynatıcı arka plan özellikleri
--background değişkenleri, başlatma ve oynatma sırasında tüm oyuncunun arka plan özelliklerini ayarlar. Örneğin, tüm arka planı beyaz ve gümüş doğrusal bir gradyan olarak 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 mülkü |
| --arka plan-rengi | CSS arka plan rengi özelliği | |
| --arka plan-resim | CSS arka plan resmi özelliği | |
| --arka plan-yineleme | tekrar yok | CSS arka plan tekrarı özelliği |
| --arka plan-boyut | 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ünde yer alır ve tüm oyuncuyu kapsar. Bu sınıf, alıcınız başlatılırken gösterilir. .splash değişkenleri girmezseniz alıcınız boştayken .logo sınıfı da gösterilir.
Aşağıdaki örnekte --logo-image, welcome.png adlı bir ekolayzer simgesine ayarlanmaktadır. Resim, varsayılan olarak alıcınızın tam 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-arka planı | CSS arka plan mülkü | |
| --logo-renk | CSS arka plan rengi özelliği | |
| --logo-resim | CSS arka plan resmi özelliği | |
| --logo-tekrar et | tekrar yok | CSS arka plan tekrarı özelliği |
| --logo-boyutu | CSS arka plan boyutu özelliği |
CSS şablonu
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Leke özellikleri
.logo sınıfına benzer şekilde .splash sınıfı da tüm oyuncuyu kapsar. Bu özellikleri ayarlarsanız alıcınız boştayken .splash değişkenleriniz .logo değişkenlerini geçersiz kılar. Böylece, başlatma sırasında bir grup .logo özelliği kullanabilir ve alıcınız boştayken ayrı arka planlar veya resimler görüntüleyebilirsiniz.
Örneğin, beyaz ve gümüş gradyan arka planını dimgray ile geçersiz kılabilir ve animasyonlu bir bekliyor... 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ızı veya uygulama adınızı kullanı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 |
|---|---|---|
| -- başlangıç-arka planı | CSS arka plan mülkü | |
| -- başlangıç rengi | CSS arka plan rengi özelliği | |
| -- başlangıç resmi | CSS arka plan resmi özelliği | |
| -- Hesabınızı tekrarlamak | CSS arka plan tekrarı özelliği | |
| --başlangıç boyutu | 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 durumu sırasında (giriş resmi yerine) en fazla 10 resmin döngü içermesi 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österisinde ikinci resim. | |
| --slideshow-image-3 | Slayt gösterisinde üçüncü resim. | |
| --slideshow-image-4 | Slayt gösterisinde dördüncü resim. | |
| --slideshow-image-5 | Slayt gösterisinde beşinci resim. | |
| --slideshow-image-6 | Slayt gösterisinde altıncı resim. | |
| --slideshow-image-7 | Slayt gösterisinde yedinci resim. | |
| --slideshow-image-8 | Slayt gösterisinde sekizinci resim. | |
| --slideshow-image-9 | Slayt gösterisinde dokuzuncu resim. | |
| --slideshow-image-10 | Slayt gösterisinde 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 bir .watermark görüntülenir. Bu, genellikle alıcınızın sağ alt kısmındaki varsayılan
seçenek olan küçük, ş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 |
|---|---|---|
| --filmark-arka plan | CSS arka plan mülkü | |
| --filigran-rengi | CSS arka plan rengi özelliği | |
| --filmark-resim | CSS arka plan resmi özelliği | |
| --filigran-konumu | sağ alt | CSS arka plan konumu özelliği |
| --filmark-tekrar | tekrar yok | CSS arka plan tekrarı özelliği |
| --filigran boyutu | 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çiciyi kullanarak 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 |
|---|---|---|
| --reklam-başlığı | Reklam | Reklamın başlığı. |
| --atla-reklam-başlığı | Reklamı atla | Reklamı Atla metin kutusunun metni. |
| --break-color | hsl(ton, %100, %50) | Reklam arası işaretinin rengi. |
| --yazı tipi-ailesi | Open Sans | Meta veriler ve ilerleme çubuğu için yazı tipi ailesi. |
| --dönen-resim | Varsayılan resim | Lansmanda gösterilecek resim. |
| --Arabelleğe alınıyor-resim | Varsayılan resim | Arabelleğe alınırken gösterilecek resim. |
| --pause-image | Varsayılan resim | Duraklatıldığında görüntülenecek resim. |
| --play-image | Oynarken meta verilerde gösterilecek resim. | |
| --tema-Tonu | 42 | Oynatıcı için kullanılacak ton. |
| --progress-color | hsl(Ton, %95, %60) | İlerleme çubuğunun 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ı'na bakın.
Fazla tarama
TV düzenlerinin evrimi ve izleyicilere her zaman tam ekran resim sunma isteği nedeniyle TV düzenlerinin bazı benzersiz gereksinimleri vardır. TV cihazları, ekranın tamamını doldurduğundan emin olmak için uygulama düzeninin dış kenarını kırpabilir. Bu davranış genellikle aşırı tarama olarak adlandırılır. Düzeninizin her kenarına %10 kâr marjı ekleyerek ekran öğelerinin aşırı tarama nedeniyle kırpılmasını önleyin.
Varsayılan ses kullanıcı arayüzü
Meta VeriTürü.MUSIC_TRACK
C. --logo-image
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist veya MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
Oynat / Duraklat
Özel kullanıcı arayüzü veri bağlama
Cast Web Alıcısı SDK'sı, cast-media-player yerine kendi özel kullanıcı arayüzü öğenizi kullanmayı destekler.
Özel kullanıcı arayüzü veri bağlama özelliği, cast-media-player öğesini alıcınıza eklemek yerine kullanıcı arayüzünü oynatıcı durumuna bağlamak için kendi özel kullanıcı arayüzü öğenizi ve PlayerDataBinder sınıfını kullanmanıza olanak tanır. Uygulama, veri bağlamayı desteklemiyorsa bağlayıcı aynı zamanda 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 eklemelisiniz. Birden fazla MediaElement nesnesi varsa Web Alıcısı'nın kullanmasını istediğiniz MediaElement nesnesini etiketlemeniz gerekir. Bunu, aşağıda gösterildiği gibi, videonun sınıf listesine castMediaElement öğesini ekleyerek yaparsınız; aksi halde, Web Alıcısı ilk MediaElement öğesini seçecektir.
<video class="castMediaElement"></video>