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ı 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 ve yazı tipi ailesi gibi çeşitli cast-media-player özelliklerini özelleştirmenize olanak tanır. Bu değişkenleri satır içi CSS stilleri, bir CSS stil sayfası veya JavaScript'teki style.setProperty ile ekleyebilirsiniz.
Sonraki bölümlerde, medya oynatıcı öğesinin her alanını nasıl özelleştireceğinizi öğreneceksiniz. Başlamak 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/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 oynatma logosu alıcınızın sol üst köşesinde gösterilir. Bu özellik, .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, oynatıcının başlatma ve oynatma sırasında görünen arka plan özelliklerini ayarlar. Örneğin, tüm arka planı beyaz ve gümüş renkli doğrusal 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 |
|---|---|---|
| --background | siyah | CSS background özelliği |
| --background-color | CSS background-color özelliği | |
| --background-image | CSS background-image özelliği | |
| --background-repeat | no-repeat | CSS background-repeat özelliği |
| --background-size | cover | CSS background-size ö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 oynatıcının tamamını kaplar. Bu sınıf, alıcınızın ne zaman başlatıldığını gösterir. Herhangi bir .splash değişkeni sağlamazsanız alıcınız boşta durumdayken .logo sınıfı da gösterilir.
Aşağıdaki örnekte --logo-image, welcome.png adlı bir ekolayzır simgesine ayarlanmıştır. Resimler varsayılan olarak alıcınızın ortasında gösterilir:
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 background özelliği | |
| --logo-color | CSS background-color özelliği | |
| --logo-image | CSS background-image özelliği | |
| --logo-repeat | no-repeat | CSS background-repeat özelliği |
| --logo-size | CSS background-size özelliği |
CSS şablonu
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Sıçratma özellikleri
.logo sınıfına benzer şekilde, .splash sınıfı tüm oyuncuyu kapsar. Bu özellikleri ayarlarsanız alıcınız boşta olduğunda .splash değişkenleriniz .logo değişkenlerini geçersiz kılar. Bu sayede, lansman sırasında bir grup .logo özelliği kullanabilir ve alıcınız boşta olduğunda ayrı arka planlar veya resimler gösterebilirsiniz.
Örneğin, beyaz ve gümüş renkli gradyan 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şta kaldığında varsayılan olarak .logoayarlarınıza veya uygulama adınıza döner.
.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 background özelliği | |
| --splash-color | CSS background-color özelliği | |
| --splash-image | CSS background-image özelliği | |
| --splash-repeat | CSS background-repeat özelliği | |
| --splash-size | CSS background-size özelliği |
CSS şablonu
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Slayt Gösterisi
Boşta kalma durumunda (açılış resmi yerine) 10 adede kadar resmin döngüde gösterilmesi 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şin 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österisindeki 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 simgesi gösterilir. Bu genellikle alıcınızın sağ alt kısmında varsayılan olarak gösterilen 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 background özelliği | |
| --watermark-color | CSS background-color özelliği | |
| --watermark-image | CSS background-image özelliği | |
| --watermark-position | sağ alt | CSS background-position özelliği |
| --watermark-repeat | no-repeat | CSS background-repeat özelliği |
| --watermark-size | CSS background-size ö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 de ö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ı Geç metin kutusunun metni. |
| --break-color | hsl(hue, 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şlatma sırasında gösterilecek resim. |
| --buffering-image | Varsayılan resim | Arabelleğe alma sırasında gösterilecek resim. |
| --pause-image | Varsayılan resim | Duraklatıldığında gösterilecek resim. |
| --play-image | Oynatma sırasında meta verilerde gösterilecek resim. | |
| --theme-hue | 42 | Oyuncu için kullanılacak renk tonu. |
| --progress-color | hsl(hue, 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 Stil Verilmiş Medya Alıcısı bölümüne bakın.
Fazla tarama
TV'deki düzenler, TV standartlarının gelişimi ve izleyicilere her zaman tam ekran görüntü sunma isteği nedeniyle bazı benzersiz şartlara tabidir. 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 adı verilir. Düzeninizin her tarafına %10 kenar boşluğu ekleyerek ekran öğelerinin fazla tarama nedeniyle kırpılmasını önleyin.
Varsayılan ses kullanıcı arayüzü
MetadataType.MUSIC_TRACK
A. --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ğlama
Cast Web Receiver SDK, cast-media-player yerine kendi özel kullanıcı arayüzü öğenizi kullanmayı destekler.
Özel kullanıcı arayüzü veri bağlama, kendi özel kullanıcı arayüzü öğenizi kullanmanıza ve alıcınıza PlayerDataBinder sınıfını eklemek yerine kullanıcı arayüzünü oynatıcı durumuna bağlamak için cast-media-player öğesini kullanmanıza olanak tanır. Bağlayıcı, uygulama veri bağlamayı desteklemiyorsa veri değişiklikleriyle ilgili 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ının kullanabilmesi için HTML'ye en az bir MediaElement eklemeniz gerekir. Birden fazla MediaElement
nesne varsa Web Alıcısı'nın kullanmasını istediğiniz MediaElement nesnesini etiketlemeniz gerekir. Bunu, videonun sınıf listesine castMediaElement ekleyerek yaparsınız. Aksi takdirde, Web Alıcı ilk MediaElement öğesini seçer.
<video class="castMediaElement"></video>