Menata Gaya Pemain

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

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

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

Di bagian berikutnya, pelajari cara menyesuaikan setiap area elemen pemutar media. Anda dapat menggunakan template berikut untuk membantu Anda 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 menyetel 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
--background hitam Properti latar belakang CSS
--background-color Properti background-color CSS
--background-image Properti background-image CSS
--background-repeat no-repeat Properti background-repeat CSS
--background-size cover Properti background-size 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. Kelas ini ditampilkan saat penerima Anda diluncurkan. Jika Anda tidak memberikan variabel .splash, class .logo juga ditampilkan saat penerima dalam status tidak ada aktivitas.

Contoh berikut menetapkan --logo-image ke ikon equalizer bernama welcome.png. Gambar secara default berada di 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 background-color CSS
--logo-image Properti background-image CSS
--logo-repeat no-repeat Properti background-repeat CSS
--logo-size Properti background-size CSS

Template CSS

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

Properti layar pembuka

Mirip dengan class .logo, class .splash mencakup seluruh pemain. Jika Anda menyetel properti ini, variabel .splash akan menggantikan variabel .logo saat penerima tidak aktif. Artinya, Anda dapat menggunakan satu set properti .logo saat peluncuran, dan menampilkan latar belakang atau gambar terpisah saat penerima dalam keadaan tidak aktif.

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

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

Tampilan Penerima Web:

Splash kustom

Jika Anda tidak menyetel properti ini, penerima akan menggunakan setelan .logo atau nama aplikasi Anda secara default 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 background-color CSS
--splash-image Properti background-image CSS
--splash-repeat Properti background-repeat CSS
--splash-size Properti background-size CSS

Template CSS

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

Slideshow

Agar hingga 10 gambar bergantian selama status tidak ada aktivitas (menggantikan 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 dalam slideshow.
--slideshow-image-2 Gambar kedua dalam slideshow.
--slideshow-image-3 Gambar ketiga dalam slideshow.
--slideshow-image-4 Gambar keempat dalam slideshow.
--slideshow-image-5 Gambar kelima dalam slideshow.
--slideshow-image-6 Gambar keenam dalam slideshow.
--slideshow-image-7 Gambar ketujuh dalam 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. Gambar ini biasanya berukuran kecil dan transparan, yang secara default 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 background-color CSS
--watermark-image Properti background-image CSS
--watermark-position kanan bawah Properti background-position CSS
--watermark-repeat no-repeat Properti background-repeat CSS
--watermark-size Properti background-size 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 meluncurkan.
--buffering-image Gambar default Gambar yang akan ditampilkan saat buffering.
--pause-image Gambar default Gambar yang akan ditampilkan saat dijeda.
--play-image Gambar yang akan ditampilkan dalam metadata saat diputar.
--theme-hue 42 Hue yang akan digunakan untuk pemain.
--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 Styled Media Receiver.

Overscan

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

UI audio default

MetadataType.MUSIC_TRACK

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

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

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. Putar/Jeda

Data binding UI kustom

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

Data binding UI kustom memungkinkan Anda menggunakan elemen UI kustom sendiri 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 minimal satu MediaElement ke HTML agar Penerima Web dapat menggunakannya. Jika beberapa objek MediaElement tersedia, Anda harus memberi tag pada MediaElement yang ingin digunakan oleh Penerima Web. Anda 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>
Sebelumnya
HLS di Migrasi Shaka Player
Berikutnya
Optimalkan Layar Smart