Penerima Media Bergaya

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

Penerima Media Bergaya (SMR) memungkinkan aplikasi pengirim memutar media di perangkat Cast tanpa membuat aplikasi penerima kustom Anda sendiri. Anda dapat menyesuaikan skema warna dan branding SMR dengan memberikan file CSS Anda sendiri selama pendaftaran.

Pendaftaran

Untuk menggunakan SMR untuk aplikasi Anda, pilih opsi Styled Media Receiver saat Anda menambahkan aplikasi baru di Google Cast SDK Developer Console. Lihat Pendaftaran untuk mengetahui informasi selengkapnya. Opsi ini menyertakan link ke Pratinjau sheet gaya default serta kolom tempat Anda memasukkan URL ke sheet gaya. Anda dapat menggunakan gaya default atau memberikan URL HTTPS ke file CSS. Anda dapat menggunakan server Anda sendiri untuk menghosting file CSS. Setelah memberikan URL ke file CSS, Anda dapat mengklik Pratinjau untuk melihat tampilan gaya di penerima.

Media yang didukung

Semua penerima mendukung jenis media, seperti yang dijelaskan dalam Media yang Didukung.

SMR mendukung video, audio, dan gambar, serta dikontrol dari aplikasi pengirim menggunakan saluran media Cast SDK. SMR sepenuhnya mematuhi Panduan UX untuk pemutaran media di perangkat Cast.

Mengetik font

Lihat Font bawaan untuk mengetahui daftar font yang sudah diinstal sebelumnya dengan penerima.

CSS

Penerima Media Bergaya menggunakan class CSS berikut:

  • .background: Latar belakang untuk penerima.
  • .logo: Logo yang ditampilkan saat penerima diluncurkan. Class ini juga digunakan saat penerima dalam status tidak ada aktivitas dan tidak ada class .splash yang dideklarasikan.
  • .progressBar: Status progres untuk pemutaran media.
  • .splash: Layar yang ditampilkan saat penerima dalam status tidak ada aktivitas. Jika class ini tidak dideklarasikan, penerima akan secara default menggunakan .logo atau nama aplikasi.
  • .watermark: Watermark yang ditampilkan saat media sedang diputar.

Berikut adalah contoh file CSS yang menggunakan class tersebut:

.background {
  background: center no-repeat url(background.png);
}

.logo {
  background-image: url(logo.png);
}

.progressBar {
  background-color: rgb(238, 255, 65);
}

.splash {
  background-image: url(splash.png);
}

.watermark {
  background-image: url(watermark.png);
  background-size: 57px 57px;
}

Berikut adalah beberapa ilustrasi class yang digunakan.

Video

Catatan: Seni gambar video berukuran 96x143 piksel dan resource gambar pertama yang terkait dengan metadata media dipilih untuk ditampilkan. Gambar diskalakan agar sesuai dengan dimensi yang diharapkan.

Audio

Catatan: Sampul album audio berukuran 384x384 piksel dan resource gambar pertama yang terkait dengan metadata media dipilih untuk ditampilkan. Gambar diskalakan agar sesuai dengan dimensi yang diharapkan.

       

Gambar dari Big Buck Bunny: (c) hak cipta 2008, Blender Foundation / www.bigbuckbunny.org

Gambar dari Sintel: (c) hak cipta Blender Foundation / www.sintel.org