Experiencia del usuario con la plataforma de Google Cast
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Google Cast permite que las apps web de Android, iOS y Chrome "transmitan" contenido, como video, audio y uso compartido de pantalla (duplicación), a dispositivos compatibles con Cast, como los siguientes:
- Google Chromecast
- TVs que funcionan con Google Cast
- Bocinas que funcionan con Google Cast
- Pantallas inteligentes (un monitor LCD portátil con pantalla táctil que se usa como cliente ligero)
- Tablets Android
En el modelo de interacción de Google Cast, el teléfono celular, la tablet o la laptop es el emisor, que actúa como control remoto para controlar la reproducción, y la TV, la pantalla o la tablet en la estación de carga es el receptor, que recibe instrucciones del emisor y muestra el contenido de la conexión a Internet del receptor. Todas las acciones del usuario (presiones y deslizamientos) pueden realizarse en ambos, el dispositivo del remitente o el receptor web.
La transmisión se basa en la coordinación entre dos o más pantallas; la IU del remitente y la del receptor deben funcionar en conjunto. Por ejemplo, si presionas un botón en un dispositivo móvil para pausar el contenido, la TV debería indicar que está pausado, mientras que el dispositivo móvil debería proporcionar un botón de reproducción para reanudar la reproducción.
Consideraciones
Debido a las limitaciones de hardware y recursos, existen ciertas restricciones para las aplicaciones compatibles con Google Cast:
- El dispositivo de transmisión es un dispositivo de baja potencia con limitaciones de memoria, CPU y GPU, por lo que la aplicación del receptor web debe ser lo más liviana posible.
- En el caso de los modelos de interacción de Cast y Google Cast, se pueden crear pestañas, ventanas o ventanas emergentes en el receptor web o la app del remitente, así como aceptar directamente la entrada del usuario, como toques o deslizamientos. Por ejemplo, la app del receptor web en una tablet o pantalla conectada puede mostrar un botón de pausa y recibir el toque de un usuario. De esta manera, todas las acciones de la aplicación deben activarse desde un receptor web o una aplicación emisora.
- Las pantallas inteligentes admiten entradas del usuario a través de una app del remitente o a través de la IU.
- El receptor web es un navegador Chrome optimizado para la reproducción de video. Por lo tanto, actualmente no se admiten WebGL ni Chrome Native Client (NaCL), ni tampoco las extensiones de Chrome.
- Cast admite la reproducción de una sola transmisión de contenido multimedia simultánea en las etiquetas
<audio> y <video>, o varias pistas de audio con la API de WebAudio. Solo un elemento de video puede estar activo en el DOM a la vez.
Además, no se admiten la composición, la manipulación, las transformaciones, las rotaciones ni el zoom de videos.
Principios generales de diseño
Ten en cuenta lo siguiente cuando desarrolles tu interfaz de usuario.
Interfaz del receptor web:
- El receptor web puede tener elementos interactivos y elementos informativos para describir el estado de la app, como si está pausada o reproduciendo contenido, o mensajes de error. La interacción del usuario puede ocurrir en el dispositivo de envío de Cast (teléfono,
tablet o navegador Chrome) o en el receptor web (TV, pantallas o tablets).
- Recuerda que la acción de video ocurre en el medio de la pantalla de la TV, y los elementos de la IU no deben interferir con la presentación. Coloca los elementos de la IU en el tercio inferior de la pantalla del receptor web, dejando un margen del 10% desde los bordes de la pantalla para un posible overscan.
- Cuando sea posible, las transiciones de un estado de pantalla a otro deben ser fluidas y tener una sensación cinematográfica. En lugar de movimientos bruscos de un estado a otro, usa transiciones como el fundido de entrada y salida. Por ejemplo, el estado de carga de contenido permanece en la pantalla y se desvanece en la experiencia de reproducción de contenido multimedia.
Interfaz del remitente:
- El remitente admite acciones del usuario, y el receptor web muestra información de estado.
Por ejemplo, si el contenido está pausado, la TV debe indicar que está pausado, mientras que el dispositivo móvil indica que está listo para comenzar a reproducirse (por ejemplo, mostrándole al usuario un botón de reproducción).
- La velocidad es importante. Los usuarios deben poder ubicar rápidamente el control de transmisión y ver que el contenido comience a reproducirse de inmediato en la pantalla grande. Mientras se carga el contenido, proporciona indicadores de carga animados y usa transiciones para que parezca que todo es más rápido.
La forma más fácil de garantizar que tu aplicación para Cast siga estos principios es revisar tu interfaz de usuario con la lista de tareas de diseño de Cast y probar tus aplicaciones para Cast.
Lineamientos de marca
Los siguientes lineamientos de desarrollo de la marca de Google Cast están destinados a desarrolladores de apps y se enfocan en los requisitos adicionales que debes cumplir para describir tu app en texto.
Para ver los lineamientos de desarrollo de la marca de los dispositivos Cast, consulta el
Centro de comarketing.
Puedes usar el término “compatible con Google Cast” para informar a los usuarios que tu app funciona con Google Cast. Sin embargo, asegúrate de que tu app cumpla con las Condiciones del Servicio Adicionales para Desarrolladores del SDK de Cast y la Lista de tareas del diseño, y de que el uso de la insignia "Compatible con Google Cast" cumpla con nuestros lineamientos de desarrollo de la marca.
De manera similar, puedes usar una insignia de Google Cast siempre que tu app o dispositivo cumpla con nuestros lineamientos de insignias. Google se reserva el derecho de solicitarte que modifiques o dejes de usar la insignia si no cumple con los lineamientos de desarrollo de la marca.
"Google Cast" en texto
- Cuando describas una app (no un producto de hardware) como compatible con Cast, usa la frase "Compatible con Google Cast". Por ejemplo: "Esta app es compatible con Google Cast".
- Cuando describas un producto de hardware de terceros compatible con Cast, usa "Esta {TV} funciona con Google Cast" o "Estas {bocinas} funcionan con Google Cast".
- Cuando se escriben en texto, “Google” y “Cast” deben escribirse en mayúsculas.
- En cualquier recurso de marketing que utilice "Google Cast" en el texto o en la insignia o el logotipo, debes incluir la siguiente atribución legal: Google Cast es una marca de Google LLC.
- No coloques Google Cast en el título de la app (como XYZ Google Cast App).
Mensajes de apps compatibles con Google Cast
Puedes promocionar tu app de la siguiente manera:
- "XYZ es una app compatible con Google Cast que te permite transmitir tu contenido de entretenimiento favorito desde tu dispositivo móvil a la TV".
- "La app XYZ ahora está disponible para TVs que funcionan con Google Cast".
- "La app de XYZ ahora está disponible para todos los productos de Google Cast, incluidos Google Chromecast, Google Cast Audio, y TVs y bocinas que funcionan con Google Cast".
- "La app de XYZ es compatible con Google Cast, lo que te permite disfrutar de todos tus programas, películas, música y juegos favoritos en tu TV que funciona con Google Cast".
- "La app XYZ ahora es compatible con Google Cast, lo que permite a los usuarios transmitir contenido de su teléfono a su TV compatible con Google Cast".
Insignia de Google Cast
Puedes usar las insignias de “Google Cast” en tu sitio web, la ficha de Play Store, los materiales de marketing y los materiales promocionales para mostrar la compatibilidad con los dispositivos que usan el protocolo Cast.
- No modifiques el color, las proporciones, el espaciado ni ningún otro aspecto de la imagen de la insignia.
- Cuando se usa junto con logotipos de otras tecnologías de ingredientes (por ejemplo, Bluetooth, Spotify Connect, AirPlay, etcétera), la insignia de Google Cast debe tener el mismo tamaño o uno mayor.
- No hagas que la insignia sea el elemento principal de tu página.
- Mantén cierta distancia entre la insignia y otros logotipos y íconos de la página.
- Cuando se use sobre un fondo blanco, claro o de tonos medios, usa una insignia negra.
- Cuando se use sobre un fondo negro o de tonos oscuros, usa la insignia blanca.
- No uses la insignia en una página que contenga o muestre contenido para adultos, que promueva juegos de apuestas, que promueva la violencia, que contenga incitación al odio o a la violencia, que implique la venta de tabaco o alcohol a personas menores de veintiún años, que incumpla otras leyes o reglamentaciones aplicables o que sea censurable.
Vinculación de insignias
Cuando se usa en línea, la insignia de Google Cast debe vincularse a una de las siguientes opciones:
- Consulta la lista de apps y productos compatibles con Google Cast en g.co/castapps.
- Es una lista de los productos que publicaste.
- Una página de detalles de un producto específico que hayas publicado
- Una lista de las apps que publicaste.
- Una página específica de detalles de la app publicada por ti, en Google Play o en la App Store de Apple
Descarga los recursos de la insignia de Google Cast
El paquete de descarga incluye formatos Portable Network Graphics (.png), Adobe Illustrator (.ai) y Encapsulated Postscript (.eps).
Vista previa de insignias de Google Cast
Consulta la página de lineamientos de las insignias del Centro de socios para ver todas las insignias disponibles y las instrucciones de uso.
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-07-25 (UTC)
[null,null,["Última actualización: 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."]]
