Oynatıcının Stili

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

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.

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

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

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

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

Özel başlangıç

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]

C MediaStatus.currentTime

G. MediaInformation.duration

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>