Tombol Cast membuka dialog untuk menghubungkan, mengontrol, dan memutuskan sambungan dari Penerima Web.
Lihat Ikon Cast untuk mendownload template tombol Cast.
Perlu diketahui bahwa tombol Cast tidak khusus untuk Google Cast; tombol ini dapat digunakan untuk merepresentasikan Penerima Web dan non-Web (seperti headset Bluetooth). Penerima Web harus selalu muncul di bawah dialog Transmisi, dan tidak pernah di bawah dialog, menu, atau kontrol lainnya.
Memperkenalkan Transmisi kepada pengguna
Memperkenalkan tombol Cast membantu pengguna lama mengetahui bahwa aplikasi pengirim kini mendukung Transmisi dan juga membantu pengguna baru menggunakan Google Cast.
Wajib
Tampilkan layar pengantar Cast saat Penerima Web pertama kali tersedia. Untuk pengirim iOS, tampilkan layar pengantar
Transmisi saat tombol Cast pertama kali muncul.
B Soroti tombol Cast secara visual dengan melingkari
tombol)
C Menjelaskan cara kerja tombol Cast (misalnya,
menampilkan pesan seperti "Sentuh untuk mentransmisikan video ke TV")
Android
Pengenalan transmisi
![Pengenalan transmisi](https://developers.google.cn/static/cast/images/a/prompting1_a.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
iOS
Pengenalan transmisi
![](https://developers.google.cn/static/cast/images/i/prompting1_a.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Chrome
Pengenalan transmisi
![Pengenalan transmisi](https://developers.google.cn/static/cast/images/w/prompting1_a.png?authuser=9&hl=id)
Transmisikan layar utama
![Transmisikan layar utama](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Ketersediaan tombol Cast
Wajib
A Tombol Cast harus
terlihat di setiap layar yang memiliki konten yang dapat diputar, dan berada pada posisi yang konsisten
saat menjelajahi atau memutar konten. Ikon tersebut juga akan muncul di header Chrome untuk kontrol global.
B Di Chrome, tombol Cast dapat disembunyikan
saat Penerima Web tidak tersedia. Untuk pengirim Android dan iOS,
tombol Cast akan selalu ditampilkan saat perangkat terhubung ke Wi-Fi sehingga Anda dapat meminta bantuan yang tepat
jika pengguna telah menonaktifkan akses jaringan lokal dan akibatnya perangkat tidak dapat ditemukan
(lihat Izin dan Penemuan iOS
untuk detail selengkapnya).
C Pada aplikasi seluler, tombol Cast berada di sisi
kanan.
D Di Chrome, tombol Cast berada di sisi kanan di
kontrol media konten (misalnya, lihat video tersemat). Jika kontrol media berisi tombol
layar penuh, tempatkan tombol Cast di sebelah kirinya.
Catatan
Google Cast menggunakan model multi-tugas, yang memungkinkan pengguna menjelajahi aplikasi pengirim dan aplikasi lainnya saat melakukan transmisi. Tombol Cast harus terlihat dari setiap layar yang menyediakan konten yang dapat diputar, sehingga pengguna tidak perlu susah payah mencari tempat untuk menjeda atau menghentikan konten yang diputar di TV.
Android
Pengirim terputus
![Pengirim terputus](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
iOS
Pengirim terputus
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Chrome
Pengirim terputus
![Pengirim terputus](https://developers.google.cn/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Status tombol Cast
Wajib
A Terputus: Saat Penerima Web tersedia, tombol Cast muncul
B Menghubungkan: Saat Penerima Web terhubung, tombol Cast akan menganimasikan gelombang pada ikon secara bertahap (untuk detailnya, lihat catatan di bawah)
C Terhubung: Saat aplikasi ini terhubung ke Penerima Web
Cast, tombol Cast akan muncul dengan bingkai yang terisi
Praktik terbaik
Untuk setiap status tombol, gunakan warna yang cocok dengan gaya elemen UI
lain aplikasi Anda. Penggunaan warna sorotan yang berbeda (seperti kuning) untuk status AKTIF / Tersambung
bersifat opsional.
Catatan
- Ikon Cast ditampilkan di Chrome, Android, dan iOS untuk memberikan akses ke ekstensi Cast, terlepas dari ketersediaan perangkat Cast.
- Status Menghubungkan (animasi) muncul saat koneksi ke Cast API memakan waktu lebih lama dari yang diperkirakan (Android dan Chrome SDK akan otomatis menganimasikan ikon Cast). Setelah terhubung, aplikasi Penerima Web akan diluncurkan.
- Status AKTIF / Tersambung dari ikon Transmisi telah diperbarui dan sekarang menggunakan isian solid dalam bingkai ikon. Template ikon dan ikon Cast yang baru tersedia di sini.
Android
Pengirim, Transmisi terputus
![Pengirim, Transmisi terputus](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=9&hl=id)
Transmisikan layar utama
![Transmisikan layar utama](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Pengirim, Transmisi menghubungkan
![Pengirim, Transmisi menghubungkan](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=9&hl=id)
Transmisikan layar utama
![Transmisikan layar utama](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Pengirim, Transmisi terhubung
![Pengirim, Transmisi terhubung](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=9&hl=id)
Aplikasi Penerima Web sedang dimuat
![Aplikasi Penerima Web sedang dimuat](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=9&hl=id)
Pengirim, Transmisi terhubung
![Pengirim, Transmisi terhubung](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=9&hl=id)
Aplikasi Penerima Web dimuat / tidak ada aktivitas
![Aplikasi Penerima Web dimuat / tidak ada aktivitas](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=9&hl=id)
iOS
Pengirim, Transmisi tidak tersedia
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Pengirim, Transmisi terputus
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Pengirim, Transmisi menghubungkan
![Pengirim, Transmisi menghubungkan](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Pengirim, Transmisi terhubung
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=9&hl=id)
Aplikasi Penerima Web sedang dimuat
![Aplikasi Penerima Web sedang dimuat](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=9&hl=id)
Pengirim, Transmisi terhubung
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=9&hl=id)
Aplikasi Penerima Web dimuat / tidak ada aktivitas
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=9&hl=id)
Chrome
Pengirim, Transmisi tidak tersedia
![Pengirim, Transmisi tidak tersedia](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=9&hl=id)
Ikon Cast ditampilkan di Chrome untuk memberikan akses ke ekstensi Cast terlepas dari status koneksinya.
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Pengirim, Transmisi terputus
![Pengirim, Transmisi terputus](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Pengirim, Transmisi menghubungkan
![Pengirim, Transmisi menghubungkan](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=9&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=9&hl=id)
Pengirim, Transmisi terhubung
![Pengirim, Transmisi terhubung](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=9&hl=id)
Aplikasi Penerima Web sedang dimuat
![Aplikasi Penerima Web sedang dimuat](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=9&hl=id)
Pengirim, Transmisi terhubung
![Pengirim, Transmisi terhubung](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=9&hl=id)
Aplikasi Penerima Web dimuat / tidak ada aktivitas
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=9&hl=id)
Gambar yang digunakan dalam panduan desain ini disediakan oleh Blender Foundation, yang dibagikan berdasarkan hak cipta atau lisensi Creative Commons.
- Gajah's Dream: (c) hak cipta 2006, Blender Foundation / Belanda Media Art Institute/www.elephantsdream.org
- Sintel: (c) hak cipta Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) hak cipta 2008, Blender Foundation / www.bigbuckbunny.org