Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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:

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

Menata Gaya Pemain Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Logo pemutaran

Properti latar belakang pemutar

Variabel dan default

Template CSS

Properti logo

Variabel dan default

Template CSS

Properti layar pembuka

Variabel dan default

Template CSS

Slideshow

Variabel dan default

Template CSS

Properti watermark

Variabel dan default

Template CSS

Pemutaran, iklan, dan properti CSS lainnya

Variabel dan default

Template CSS

Overscan

UI audio default

MetadataType.MUSIC_TRACK

Data binding UI kustom

Menata Gaya Pemain