Pengalaman Pengguna dengan Platform Google Cast
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Google Cast memungkinkan aplikasi web Android, iOS, dan Chrome untuk "men-streaming" konten —
seperti video, audio, dan berbagi layar (pencerminan) — ke perangkat yang kompatibel dengan Cast
seperti:
- Google Chromecast
- TV yang kompatibel dengan Google Cast
- Speaker yang kompatibel dengan Google Cast
- Layar Smart (monitor LCD layar sentuh portabel yang digunakan sebagai thin client)
- Tablet Android
Dalam model interaksi Google Cast, ponsel, tablet, atau laptop adalah
pengirim yang berfungsi sebagai remote control untuk mengontrol pemutaran, dan TV,
layar, atau tablet yang di-dock adalah penerima yang menerima petunjuk dari
pengirim dan menampilkan konten dari koneksi Internet penerima. Semua
tindakan pengguna (ketuk dan geser) dapat dilakukan di baik perangkat pengirim
maupun Penerima Web.
Transmisi mengandalkan koordinasi antara dua layar atau lebih; UI pengirim
dan UI penerima — keduanya harus bekerja sama. Misalnya, jika Anda menekan
tombol di perangkat seluler untuk menjeda konten, TV akan menunjukkan bahwa konten
dijeda, sedangkan perangkat seluler akan menyediakan tombol putar untuk melanjutkan
pemutaran.
Pertimbangan
Karena keterbatasan hardware dan resource, ada batasan tertentu yang diterapkan
pada aplikasi yang kompatibel dengan Google Cast:
- Perangkat Transmisi adalah perangkat berdaya rendah dengan keterbatasan memori, CPU, dan GPU,
sehingga aplikasi Penerima Web harus seringan mungkin.
- Untuk model interaksi Cast dan Google Cast, tab, jendela,
atau pop-up dapat dibuat di aplikasi Penerima atau pengirim Web, serta
langsung menerima input pengguna, seperti ketukan atau geser. Misalnya, aplikasi Web
Receiver di tablet atau layar yang di-dock dapat menampilkan tombol jeda dan
menerima ketukan pengguna. Dengan cara ini, semua tindakan pada aplikasi harus
dipicu dari aplikasi Pengirim atau Penerima Web.
- Layar Smart mendukung input pengguna melalui aplikasi pengirim atau melalui sentuhan pada
UI.
- Penerima Web adalah browser Chrome yang dioptimalkan untuk pemutaran video. Dengan demikian,
WebGL dan Chrome Native Client (NaCL) saat ini tidak didukung, begitu pula
ekstensi Chrome.
- Cast mendukung pemutaran satu streaming media serentak dalam tag
<audio>
dan <video>, atau beberapa trek audio menggunakan
WebAudio API. Hanya satu elemen video yang boleh aktif di DOM kapan saja.
Selain itu, komposisi, manipulasi, transformasi, rotasi, atau
zooming video tidak didukung.
Prinsip desain secara keseluruhan
Perhatikan hal-hal berikut saat Anda mengembangkan antarmuka pengguna.
Antarmuka Penerima Web:
- Penerima Web dapat memiliki elemen interaktif dan elemen informasi
untuk mendeskripsikan status aplikasi, seperti dijeda, diputar, atau
pesan error. Interaksi pengguna dapat dilakukan di pengirim Transmisi (ponsel,
tablet, atau browser Chrome) atau Penerima Web (TV, layar, atau tablet).
- Ingat bahwa tindakan video terjadi di tengah layar TV,
dan elemen UI Anda tidak boleh mengganggu presentasi. Tempatkan elemen
UI di sepertiga bagian bawah layar Penerima Web, dengan menyisakan margin 10%
dari tepi layar untuk kemungkinan
overscan.
- Jika memungkinkan, transisi dari satu status layar ke status lainnya harus lancar
dan terasa sinematik. Daripada tiba-tiba berpindah dari satu status ke status lainnya, gunakan transisi seperti fade-in dan fade-out. Misalnya, status pemuatan
konten tetap berada di layar dan memudar ke dalam pengalaman pemutaran media.
Antarmuka pengirim:
- Pengirim mendukung tindakan pengguna dan Web Receiver menampilkan informasi status.
Misalnya, jika konten dijeda, TV akan menunjukkan bahwa konten tersebut dijeda,
sedangkan perangkat seluler menunjukkan bahwa konten tersebut siap untuk mulai diputar (misalnya,
menampilkan tombol putar kepada pengguna).
- Kecepatan itu penting. Pengguna harus dapat dengan cepat menemukan kontrol transmisi
dan melihat konten langsung mulai diputar di layar besar. Saat konten
dimuat, berikan animasi indikator pemuatan dan gunakan transisi untuk membantu
mempercepat proses.
Cara termudah untuk memastikan bahwa aplikasi Cast Anda mengikuti prinsip-prinsip ini adalah
dengan meninjau antarmuka pengguna Anda menggunakan Checklist Desain Cast
dan menguji aplikasi Cast Anda.
Pedoman merek
Panduan merek Google Cast berikut ditujukan untuk developer aplikasi dan berfokus pada
persyaratan tambahan yang harus Anda patuhi untuk mendeskripsikan aplikasi dalam teks.
Untuk panduan merek perangkat Cast, lihat
Hub Pemasaran Partner.
Anda dapat memberi tahu orang lain bahwa aplikasi Anda kompatibel dengan Google Cast dengan menggunakan
istilah "kompatibel dengan Google Cast". Namun, pastikan aplikasi Anda mematuhi
Persyaratan Layanan Tambahan Developer SDK
Cast dan Checklist Desain, serta bahwa
penggunaan Anda atas "Berkemampuan Google Cast" mematuhi pedoman branding kami.
Anda juga dapat menggunakan badge Google Cast
selama aplikasi atau perangkat Anda mematuhi pedoman pemberian badge kami. Google
berhak meminta Anda mengubah atau menghentikan penggunaan badge jika
badge tersebut tidak mematuhi panduan merek.
"Google Cast" dalam teks
- Saat menjelaskan aplikasi (bukan produk hardware) sebagai kompatibel untuk Transmisi, gunakan
frasa "kompatibel untuk Google Cast". Misalnya: "Aplikasi ini mendukung Google Cast".
- Saat menjelaskan produk hardware pihak ketiga yang kompatibel dengan Cast, gunakan
"{TV} ini kompatibel dengan Google Cast", "{speaker} ini kompatibel dengan Google Cast".
- Saat ditulis dalam teks, "Google" dan "Cast" harus ditulis dengan huruf kapital.
- Pada aset pemasaran yang menggunakan "Google Cast" dalam teks atau badge/logo,
Anda harus menyertakan atribusi hukum berikut: Google Cast adalah merek dagang
dari Google LLC.
- Jangan masukkan Google Cast dalam judul aplikasi (seperti Aplikasi Google Cast XYZ).
Pesan aplikasi yang kompatibel untuk Google Cast
Anda dapat mempromosikan aplikasi sebagai berikut:
- "XYZ adalah aplikasi yang kompatibel dengan Google Cast yang memungkinkan Anda melakukan streaming hiburan
favorit dari perangkat seluler ke TV."
- "Aplikasi XYZ kini tersedia untuk TV yang kompatibel dengan Google Cast".
- "Aplikasi XYZ kini tersedia untuk semua produk Google Cast termasuk
Google Chromecast, Google Cast Audio, TV dan speaker yang berfungsi dengan
Google Cast."
- "Aplikasi XYZ kompatibel dengan Google Cast, sehingga Anda dapat menikmati semua acara/film/musik/game
favorit di TV yang kompatibel dengan Google Cast."
- "Aplikasi XYZ kini memiliki dukungan Google Cast, yang memungkinkan pengguna melakukan streaming konten
dari ponsel ke TV yang kompatibel dengan Google Cast."
Badge Google Cast
Anda dapat menggunakan badge "Google Cast" di situs, listingan app store,
materi pemasaran, dan materi promosi untuk menampilkan kompatibilitas dengan
perangkat yang menggunakan protokol Cast.
- Jangan mengubah warna, proporsi, spasi, atau aspek lainnya dari
gambar badge.
- Jika digunakan bersama logo untuk teknologi bahan lainnya (misalnya,
Bluetooth, Spotify Connect, AirPlay, dll.), badge Google Cast harus
memiliki ukuran yang sama atau lebih besar.
- Jangan menjadikan badge sebagai elemen utama di halaman Anda.
- Berikan jarak antara badge dan logo serta ikon lainnya di halaman Anda.
- Jika digunakan pada latar belakang putih, terang, atau sedang, gunakan badge hitam.
- Jika digunakan pada latar belakang hitam atau gelap, gunakan badge putih.
- Jangan gunakan badge di halaman yang berisi atau menampilkan konten khusus dewasa,
mempromosikan perjudian, mempromosikan kekerasan, berisi ujaran kebencian, melibatkan
penjualan tembakau atau minuman beralkohol kepada orang berusia di bawah dua puluh satu tahun,
melanggar hukum atau peraturan lain yang berlaku, atau dianggap tidak pantas.
Penautan badge
Saat digunakan secara online, badge Google Cast harus ditautkan ke salah satu hal berikut:
- Daftar aplikasi dan produk Google yang kompatibel dengan Google Cast di
g.co/castapps.
- Daftar produk yang Anda publikasikan.
- Halaman detail produk tertentu yang dipublikasikan oleh Anda.
- Daftar aplikasi yang dipublikasikan oleh Anda.
- Halaman detail aplikasi tertentu yang dipublikasikan oleh Anda, di Google Play, atau di Apple
App Store.
Mendownload aset badge Google Cast
Paket download mencakup format Portable Network Graphics (.png), Adobe
Illustrator (.ai), dan Enapsulated Postscript (.eps).
Melihat pratinjau badge Google Cast
Lihat halaman Panduan Badge Partner Hub
untuk mengetahui semua badge yang tersedia dan petunjuk penggunaannya.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-25 UTC.
[null,null,["Terakhir diperbarui pada 2025-07-25 UTC."],[[["\u003cp\u003eGoogle Cast enables streaming of content like video and audio from Android, iOS, and Chrome to compatible devices.\u003c/p\u003e\n"],["\u003cp\u003eThe sender device (phone, tablet, laptop) acts as a remote, while the receiver device (TV, speaker, display) plays the content.\u003c/p\u003e\n"],["\u003cp\u003eBoth sender and receiver UIs must be coordinated for a seamless user experience, with actions reflected on both.\u003c/p\u003e\n"],["\u003cp\u003eWeb Receiver applications should be lightweight due to device limitations, and interactive elements should be strategically placed for optimal viewing.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast branding guidelines must be followed when promoting app compatibility, including using the approved badge and messaging.\u003c/p\u003e\n"]]],["Google Cast enables content streaming from sender devices (phones, tablets, laptops) to receiver devices (Chromecast, Cast-enabled TVs/speakers/displays). Senders act as remote controls, while receivers display content from their internet connection. Both sender and receiver UIs coordinate actions like pausing/playing. Design considerations include lightweight receiver apps, UI placement within the lower third of the screen, and smooth transitions. Apps can be described as \"Google Cast-enabled\" and use a Google Cast badge, following specific branding guidelines and linking requirements.\n"],null,["# User Experience With the Google Cast Platform\n\nGoogle Cast allows Android, iOS, and Chrome web apps to \"stream\" content ---\nlike video, audio and screen sharing (mirroring) --- to Cast-ready devices\nlike:\n\n- Google Chromecast\n- TVs that work with Google Cast\n- Speakers that work with Google Cast\n- Smart Displays (a portable touchscreen LCD monitor used as a thin client)\n- Android Tablets\n\nIn the Google Cast interaction model, the mobile phone, tablet or laptop is the\n**sender** which acts as a remote control to control the playback, and the TV,\ndisplay or docked tablet is the **receiver** which receives instructions from\nthe sender and displays the content from the receiver's Internet connection. All\nthe user actions (taps and swipes) can take place on **both** the sender device\nor the Web Receiver.\n\nCasting relies on the coordination between two or more screens; the sender UI\nand the receiver UI --- they must work together. For example, if you press a\nbutton on a mobile device to pause the content, the TV should indicate that it\nis paused, while the mobile device should provide a play button to resume\nplayback.\n\nConsiderations\n--------------\n\nDue to hardware and resource limitations, there are certain restrictions placed\non Google Cast-enabled applications:\n\n- The Cast device is a low-power device with memory, CPU and GPU limitations, so the Web Receiver application should be as lightweight as possible.\n- For Cast and Google Cast interaction models, tabs, windows or popups can be created in both the Web Receiver or sender app, as well as directly accept user input, such as taps or swipes. For example, the Web Receiver app on a docked tablet or display can display a pause button and receive a user's tap. In this way, *all* actions on the application must be triggered from either a Web Receiver or sender application.\n- Smart Displays support user input through a sender app or via touch on the UI.\n- The Web Receiver is a Chrome browser optimized for video playback. As such, WebGL and Chrome Native Client (NaCL) are not currently supported, nor are Chrome extensions.\n- Cast supports a single concurrent media stream playback in the `\u003caudio\u003e` and `\u003cvideo\u003e` tags, or multiple audio tracks using the WebAudio API. Only one video element may be active in the DOM at any time. Additionally, video compositing, manipulation, transformations, rotations or zooming are not supported.\n\nOverall design principles\n-------------------------\n\nKeep the following in mind as you develop your user interface.\n\n**Web Receiver interface:**\n\n- The Web Receiver can have both interactive elements and informational elements to describe the state of the app, such as paused or playing, or error messages. User interaction can take place on the Cast sender (phone, tablet, or Chrome browser) or the Web Receiver (TV, displays, or tablets).\n- Remember that the video action is happening in the middle of the TV screen, and your UI elements should not interfere with the presentation. Place UI elements within the lower third of the Web Receiver display, leaving a 10% margin from the edges of the screen for possible [overscan](/cast/docs/caf_receiver/customize_ui#overscan).\n- When possible, transitions from one screen state to another should be smooth and feel cinematic. Rather than abrupt moves from state to state, use transitions like fade-in and fade-out. For example, the content-loading state lingers on-screen and fades into the media playing experience.\n\n**Sender interface:**\n\n- The sender supports user actions and the Web Receiver displays state information. For example, if content is paused, the TV should indicate that it is paused, while the mobile device indicates it is ready to start playing (for example, showing the user a play button).\n- Speed matters. Users need to be able to quickly locate the casting control and see content start playing immediately on the large screen. While content is loading, provide animated loading indicators and use transitions to help make things feel faster.\n\nThe easiest way to ensure that your Cast application follows these principles is\nto review your user interface with the Cast [Design Checklist](/cast/docs/design_checklist)\nand [test your Cast applications](/cast/docs/testing).\n\nBrand guidelines\n----------------\n\nThe following Google Cast brand guidelines are for app developers and focus on\nthe additional requirements you must comply with to describe your app in text.\nFor Cast devices brand guidelines see the\n[Partner Marketing Hub](https://partnermarketinghub.withgoogle.com/brands/google-cast/overview/brand-introduction/).\nYou can let others know that your app works with Google Cast by using\nthe term \"Google Cast-enabled\". However be sure that your app complies\nwith the Cast [SDK Additional Developer Terms of Service](/cast/docs/terms)\nand the [Design Checklist](/cast/docs/design_checklist), and that your\nuse of \"Google Cast-enabled\" complies with our branding guidelines.\n\nYou can similarly use a [Google Cast badge](#google_cast_badge)\nas long as your app or device complies with our badging guidelines. Google\nreserves the right to request that you modify or cease your use of the badge if\nit does not comply with the brand guidelines.\n\n### \"Google Cast\" in text\n\n- When describing an app (not a hardware product) as being Cast-enabled, use the phrase \"Google Cast-enabled\". For example: \"This app is Google Cast-enabled\".\n- When describing a Cast compatible third-party hardware product, use \"This {TV} works with Google Cast\", \"These {speakers} work with Google Cast\".\n- When written in text, \"Google\" and \"Cast\" should be capitalized.\n- In any marketing asset that uses \"Google Cast\" in text or the badge/logo, you must include the following legal attribution: Google Cast is a trademark of Google LLC.\n- Don't put Google Cast in the title of the app (such as XYZ Google Cast App).\n\n### Google Cast-enabled app messaging\n\nYou can promote your app as follows:\n\n- \"XYZ is a Google Cast-enabled app which lets you stream your favorite entertainment from your mobile device to your TV.\"\n- \"The XYZ app is now available for TVs that work with Google Cast.\"\n- \"The XYZ app is now available for all Google Cast products including Google Chromecast, Google Cast Audio, and TVs and speakers that work with Google Cast.\"\n- \"The XYZ app is Google Cast-enabled, allowing you to enjoy all your favorite shows/movies/music/games on your TV that works with Google Cast.\"\n- \"The XYZ app now has Google Cast support, allowing users to stream content from their phone to their TV that works with Google Cast.\"\n\n### Google Cast badge\n\nYou can use the \"Google Cast\" badges on your website, app store listing,\nmarketing materials and promotional materials to display compatibility with\ndevices that use the Cast protocol.\n\n- Don't modify the color, proportions, spacing or any other aspect of the badge image.\n- When used alongside logos for other ingredient technologies (for example, Bluetooth, Spotify Connect, AirPlay, etc.), the Google Cast badge must be of equal or greater size.\n- Don't make the badge the primary element on your page.\n- Keep some distance between the badge and other logos and icons on your page.\n- When used on white, light, or medium-toned background, use a black badge.\n- When used on a black or dark-toned background, use the white badge.\n- Don't use the badge on a page that contains or displays adult content, promotes gambling, promotes violence, contains hate speech, involves the sale of tobacco or alcohol to persons under twenty-one years of age, violates other applicable laws or regulations or is otherwise objectionable.\n\n### Badge linking\n\nWhen used online, the Google Cast badge must link to one of the following:\n\n- Google's list of Google Cast-enabled apps and products at [g.co/castapps](http://g.co/castapps).\n- A list of products published by you.\n- A specific product detail page published by you.\n- A list of apps published by you.\n- A specific app detail page published by you, on Google Play, or in the Apple App Store.\n\n### Download Google Cast badge assets\n\nThe download bundle includes Portable Network Graphics (.png), Adobe\nIllustrator (.ai), and Enapsulated Postscript (.eps) formats.\n\n- [Partner Hub Downloads page](https://partnermarketinghub.withgoogle.com/brands/google-cast/downloads/)\n\n### Preview Google Cast badges\n\nRefer to the [Partner Hub Badges Guidelines page](https://partnermarketinghub.withgoogle.com/brands/google-cast/visual-identity/visual-identity/#badge-guidelines)\nfor all available badges and instructions on usage."]]
