Oynatıcının Stili

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.

Harici

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;
}

Satır içi
<!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>

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ı:

Özel arka plan

.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ı:

Özel logo

.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ı:

Özel başlangıç

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]

F. MediaStatus.currentTime

G. MediaInformation.duration

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>