Menata Gaya Pemain

SDK Penerima Web menyediakan UI pemutar bawaan. Untuk menerapkan UI ini ke dalam aplikasi Penerima Web kustom, Anda perlu menambahkan elemen cast-media-player ke isi file HTML.

<body>
  <cast-media-player></cast-media-player>
</body>

Dengan variabel CSS, Anda dapat menyesuaikan berbagai properti cast-media-player, termasuk latar belakang pemutar, gambar pembuka, jenis font, dan lainnya. Anda dapat menambahkan variabel ini dengan gaya CSS inline, stylesheet CSS, atau style.setProperty dalam JavaScript.

Di bagian berikutnya, pelajari cara menyesuaikan setiap area elemen pemutar media. Anda dapat menggunakan template berikut untuk membantu memulai.

Eksternal

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

Inline
<!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>

Logo pemutaran ditampilkan di sudut kiri atas penerima saat media diputar. Properti ini terpisah dari class .logo. Anda dapat menyesuaikan --playback-logo-image dari pemilih body.

body {
  --playback-logo-image: url('image.png'); /* set from the body selector */
}

Properti latar belakang pemutar

Variabel --background menetapkan properti latar belakang seluruh pemutar, yang terlihat selama peluncuran dan pemutaran. Misalnya, Anda dapat menetapkan seluruh latar belakang ke gradien linear putih dan perak:

cast-media-player {
  --background-image: linear-gradient(white, silver);
}

Tampilan Penerima Web:

Latar belakang kustom

Anda dapat menggunakan variabel berikut untuk menyesuaikan properti .background:

Variabel dan default

Nama Nilai Default Deskripsi
--latar belakang hitam Properti latar belakang CSS
--background-color Properti warna latar belakang CSS
--background-image Properti gambar latar CSS
--background-repeat tidak berulang Properti background-repeat CSS
--background-size cover Properti ukuran latar belakang CSS

Template CSS

cast-media-player {
  --background:
  --background-color:
  --background-image:
  --background-repeat:
  --background-size:
}

Properti logo

Class .logo diposisikan di depan class .background, dan mencakup seluruh pemain. Class ini ditampilkan saat penerima Anda diluncurkan. Jika Anda tidak memberikan variabel .splash apa pun, class .logo juga akan ditampilkan saat penerima dalam status tidak ada aktivitas.

Contoh berikut menetapkan --logo-image ke ikon equalizer bernama welcome.png. Gambar ditetapkan secara default ke bagian tengah penerima:

cast-media-player {
  --logo-image: url('welcome.png');
}

Tampilan Penerima Web:

Logo khusus

Anda dapat menggunakan variabel berikut untuk menyesuaikan properti .logo:

Variabel dan default

Nama Nilai Default Deskripsi
--logo-background Properti latar belakang CSS
--logo-color Properti warna latar belakang CSS
--logo-image Properti gambar latar CSS
--logo-repeat tidak berulang Properti background-repeat CSS
--logo-size Properti ukuran latar belakang CSS

Template CSS

cast-media-player {
  --logo-background:
  --logo-color:
  --logo-image:
  --logo-repeat:
  --logo-size:
}

Properti percikan

Serupa dengan class .logo, class .splash mencakup seluruh pemain. Jika Anda menetapkan properti ini, variabel .splash akan mengganti variabel .logo saat penerima tidak ada aktivitas. Ini berarti Anda dapat menggunakan satu kumpulan properti .logo saat peluncuran, dan menampilkan latar belakang atau gambar yang terpisah saat penerima tidak ada aktivitas.

Misalnya, Anda dapat mengganti latar belakang gradien putih dan perak dengan dimgray, dan menambahkan ikon animasi waiting...:

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

Tampilan Penerima Web:

Layar pembuka kustom

Jika Anda tidak menetapkan properti ini, penerima akan ditetapkan secara default ke setelan .logo atau nama aplikasi saat tidak ada aktivitas.

Anda dapat menggunakan variabel berikut untuk menyesuaikan properti .splash:

Variabel dan default

Nama Nilai Default Deskripsi
--splash-background Properti latar belakang CSS
--splash-color Properti warna latar belakang CSS
--splash-image Properti gambar latar CSS
--splash-repeat Properti background-repeat CSS
--splash-size Properti ukuran latar belakang CSS

Template CSS

cast-media-player {
  --splash-background:
  --splash-color:
  --splash-image:
  --splash-repeat:
  --splash-size:
}

Slideshow

Agar siklus proses gambar berjalan hingga 10 gambar selama status tidak ada aktivitas (sebagai ganti gambar pembuka), gunakan parameter slideshow berikut.

Variabel dan default

Nama Nilai Default Deskripsi
--slideshow-interval-duration 10 dtk Waktu antar-gambar.
--slideshow-animation-duration 2 dtk Durasi transisi.
--slideshow-image-1 Gambar pertama di slideshow.
--slideshow-image-2 Gambar kedua di slideshow.
--slideshow-image-3 Gambar ketiga di slideshow.
--slideshow-image-4 Gambar keempat di slideshow.
--slideshow-image-5 Gambar kelima dalam slideshow.
--slideshow-image-6 Gambar keenam dalam slideshow.
--slideshow-image-7 Gambar ketujuh di slideshow.
--slideshow-image-8 Gambar kedelapan dalam slideshow.
--slideshow-image-9 Gambar kesembilan dalam slideshow.
--slideshow-image-10 Gambar kesepuluh dalam slideshow.

Template CSS

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

Properti watermark

.watermark ditampilkan saat media diputar. Biasanya berupa gambar kecil transparan yang secara {i>default<i} berada di kanan bawah penerima.

Anda dapat menggunakan variabel berikut untuk menyesuaikan properti .watermark:

Variabel dan default

Nama Nilai Default Deskripsi
--watermark-background Properti latar belakang CSS
--watermark-color Properti warna latar belakang CSS
--watermark-image Properti gambar latar CSS
--watermark-position kanan bawah Properti posisi latar belakang CSS
--watermark-repeat tidak berulang Properti background-repeat CSS
--watermark-size Properti ukuran latar belakang CSS

Template CSS

cast-media-player {
  --watermark-background:
  --watermark-color:
  --watermark-image:
  --watermark-position:
  --watermark-repeat:
  --watermark-size:
}

Pemutaran, iklan, dan properti CSS lainnya

Anda juga dapat menyesuaikan iklan, font, gambar pemutar, dan properti lainnya dari pemilih cast-media-player.

Variabel dan default

Nama Nilai Default Deskripsi
--ad-title Iklan Judul iklan.
--skip-ad-title Lewati iklan Teks kotak teks Lewati Iklan.
--break-color hsl(hue, 100%, 50%) Warna untuk tanda jeda iklan.
--font-family Open Sans Jenis font untuk metadata dan status progres.
--spinner-image Gambar default Gambar yang akan ditampilkan saat peluncuran.
--buffering-image Gambar default Gambar yang akan ditampilkan saat buffering.
--pause-image Gambar default Gambar yang akan ditampilkan saat dijeda.
--play-image Gambar untuk ditampilkan di metadata saat diputar.
--theme-hue 42 hue yang akan digunakan untuk pemutar.
--progress-color hsl(hue, 95%, 60%) Warna untuk status progres.

Template CSS

cast-media-player {
  --ad-title:
  --skip-ad-title:
  --break-color:
  --font-family:
  --spinner-image:
  --buffering-image:
  --pause-image:
  --play-image:
  --theme-hue:
  --progress-color:
}

Untuk mengetahui informasi selengkapnya dan ilustrasi tambahan, lihat Penerima Media Bergaya.

Overscan

Tata letak untuk TV memiliki beberapa persyaratan unik karena evolusi standar TV dan keinginan untuk selalu menyajikan gambar layar penuh kepada penonton. Perangkat TV dapat memangkas tepi luar tata letak aplikasi untuk memastikan seluruh layar terisi. Perilaku ini umumnya disebut sebagai pemindaian berlebihan. Hindari pemotongan elemen layar karena overscan dengan menyertakan margin 10% di semua sisi tata letak.

UI audio default

MetadataType.MUSIC_TRACK

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist, atau MusicTrackMediaMetadata.composer

D. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

MediaInformation.duration

H. Putar/Jeda

Data binding UI kustom

SDK Penerima Web Cast mendukung penggunaan elemen UI kustom Anda sendiri, bukan cast-media-player.

Data binding UI kustom memungkinkan Anda menggunakan elemen UI kustom dan menggunakan class PlayerDataBinder untuk mengikat UI ke status pemutar, bukan menambahkan elemen cast-media-player ke penerima. Binder juga mendukung pengiriman peristiwa untuk perubahan data, jika aplikasi tidak mendukung data binding.

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();

Anda harus menambahkan setidaknya satu MediaElement ke HTML agar Penerima Web dapat menggunakannya. Jika beberapa objek MediaElement tersedia, Anda harus memberi tag MediaElement yang ingin digunakan oleh Penerima Web. Anda dapat melakukannya dengan menambahkan castMediaElement dalam daftar class video, seperti yang ditunjukkan di bawah; jika tidak, Penerima Web akan memilih MediaElement pertama.

<video class="castMediaElement"></video>