Botón para transmitir
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
El botón para transmitir abre un diálogo para conectarse a los receptores web, controlarlos y desconectarse de ellos.
Consulta Íconos de Cast para descargar las plantillas del botón de Cast.
Ten en cuenta que el botón para transmitir no es específico de Google Cast, sino que se puede usar para representar tanto receptores web como no web (como auriculares Bluetooth). Los receptores web siempre deben aparecer en el diálogo de Cast y nunca en otro diálogo, menú o control.
La presentación del botón para transmitir ayuda a los usuarios existentes a saber que la app emisora ahora admite la transmisión y también ayuda a los usuarios nuevos de Google Cast.
Obligatorio
A Muestra una pantalla de introducción de Cast la primera vez que hay disponibles receptores web. En el caso de los remitentes de iOS, muestra una pantalla de introducción de Cast la primera vez que aparezca el botón de Cast.
B Destaca visualmente el botón de Cast rodeándolo con un círculo.
C Explica cómo funciona el botón de Cast (por ejemplo,
muestra un mensaje como "Toca para transmitir videos a tu TV").
Android
Introducción a Cast
Transmite la pantalla principal
iOS
Introducción a Cast
Transmite la pantalla principal
Chrome
Introducción a Cast
Transmite la pantalla principal
Obligatorio
A El botón de Cast debe estar visible en todas las pantallas en las que haya contenido reproducible y debe ubicarse en una posición coherente mientras se explora o reproduce contenido. También aparecerá en el encabezado de Chrome para el control global.
B En Chrome, el botón Transmitir se puede ocultar
cuando no hay receptores web disponibles. En el caso de los remitentes de Android y iOS, el botón de Cast siempre debe mostrarse cuando el dispositivo esté conectado a Wi-Fi, de modo que se pueda brindar la ayuda adecuada si el usuario desactivó el acceso a la red local y, como resultado, los dispositivos no se pueden detectar (consulta Permisos y detección en iOS para obtener más detalles).
C En las apps para dispositivos móviles, el botón para transmitir debe estar en el lado derecho.
D En Chrome, el botón para transmitir debe estar en el lado derecho de los controles multimedia de contenido (por ejemplo, consulta el video incorporado). Si los controles multimedia contienen un botón de pantalla completa, coloca el botón de Cast a la izquierda de este.
Nota
Google Cast emplea un modelo de multitarea que permite a los usuarios navegar por la app emisora y otras apps mientras transmiten contenido. El botón de Cast debe estar visible en todas las pantallas en las que haya contenido reproducible, de modo que el usuario no tenga que buscar dónde pausar o detener el contenido que se reproduce en la TV.
Android
Se desconectó el remitente
Transmite la pantalla principal
iOS
Se desconectó el remitente
Transmite la pantalla principal
Chrome
Se desconectó el remitente
Transmite la pantalla principal
Obligatorio
A Desconectado: Cuando hay receptores web disponibles, aparece el botón de Cast.
B Conectando: Cuando el receptor web se está conectando, el botón de Cast anima las ondas del ícono de forma progresiva (para obtener más detalles, consulta la nota a continuación).
C Conectado: Cuando esta app está conectada al receptor web de Cast, su botón de Cast aparece con una forma de marco rellenada.
Prácticas recomendadas
Para cada uno de los estados del botón, usa colores que coincidan con el estilo de otros elementos de la IU de tu app. El uso de un color de resaltado distintivo (como el amarillo) para el estado ON / Conectado es opcional.
Notas
- El ícono de Cast se muestra en Chrome, Android y iOS para proporcionar acceso a la extensión de Cast, sin importar la disponibilidad de los dispositivos Cast.
- El estado Conectando (animado) aparece cuando la conexión a la API de Cast tarda más de lo esperado (los SDKs de Android y Chrome animarán automáticamente el ícono de Cast). Una vez que se conecte, se iniciará la app de Web Receiver.
- Se actualizó el estado ON / Connected del ícono de Cast y ahora usa un relleno sólido dentro del marco del ícono. Los nuevos íconos de Cast y las plantillas de íconos están disponibles
aquí.
Android
Remitente, transmisión desconectada
Transmite la pantalla principal
Emisor, conectando dispositivo de transmisión
Transmite la pantalla principal
Remitente, dispositivo de transmisión conectado
Carga de la app de Web Receiver
Remitente, dispositivo de transmisión conectado
La app de Web Receiver está cargada o inactiva
iOS
Remitente, Cast no disponible
Transmite la pantalla principal
Remitente, transmisión desconectada
Transmite la pantalla principal
Emisor, conectando dispositivo de transmisión
Transmite la pantalla principal
Remitente, dispositivo de transmisión conectado
Carga de la app de Web Receiver
Remitente, dispositivo de transmisión conectado
La app de Web Receiver está cargada o inactiva
Chrome
Remitente, Cast no disponible
El ícono de Cast se muestra en Chrome para brindar acceso a la extensión de Cast
independientemente del estado de la conexión.
Transmite la pantalla principal
Remitente, transmisión desconectada
Transmite la pantalla principal
Emisor, conectando dispositivo de transmisión
Transmite la pantalla principal
Remitente, dispositivo de transmisión conectado
Carga de la app de Web Receiver
Remitente, dispositivo de transmisión conectado
La app de Web Receiver está cargada o inactiva
Las imágenes que se usan en esta guía de diseño son cortesía de Blender Foundation y se comparten bajo licencia de derechos de autor o Creative Commons.
- Elephant's Dream: (c) Copyright 2006, Blender Foundation / Netherlands Media Art Institute/www.elephantsdream.org
- Sintel: (c) Copyright Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) Copyright 2008, Blender Foundation / www.bigbuckbunny.org
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-26 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-26 (UTC)"],[[["\u003cp\u003eThe Cast button, used for connecting to Web Receivers and other devices, should be visible on every screen with playable content.\u003c/p\u003e\n"],["\u003cp\u003eUsers should be introduced to the Cast button's functionality with a highlight and explanatory message, especially on first use.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button has distinct visual states (Disconnected, Connecting, Connected) to indicate the connection status.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button should be consistently positioned, typically on the right side of the UI in mobile apps and Chrome's content media controls.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast allows for multitasking, enabling users to browse other apps while casting content.\u003c/p\u003e\n"]]],["The Cast button facilitates connections to Web Receivers, allowing users to control and disconnect. It should be consistently visible on all screens with playable content, positioned on the right in mobile apps and to the left of the fullscreen button in Chrome media controls. The button has distinct states: disconnected, connecting (animated), and connected (filled frame). Users should receive an introduction to the Cast feature, including visual highlights and explanatory messages.\n"],null,["# Cast Button\n\nThe Cast button opens a dialog to connect, control, and disconnect from Web Receivers.\n\nSee [Cast icons](/cast/docs/get-started#download_cast_icons_optional) to download the Cast button templates.\n\nNote that the Cast button is not specific to Google Cast; it can be used to represent both Web\nand non-Web Receivers (like Bluetooth headsets). Web Receivers should always appear under the\nCast dialog, and never under another dialog, menu, or control.\n\n### [Introduce Cast to users](#prompting)\n\nIntroducing the Cast button helps existing users know that the sender app now supports Casting\nand also helps users new to Google Cast.\n\n\n**Required**\n\n\nA Show a Cast introduction screen the first time\nWeb Receivers are available. For iOS senders, show a Cast introduction\nscreen the first time the Cast button appears.\n\n\nB Visually highlight the Cast button by circling the\nbutton)\n\n\nC Explain how the Cast button works (for example,\ndisplaying a message such as \"Touch to cast videos to your TV\") \n\n### Android\n\nCast introduction \nCast home screen \n\n### iOS\n\nCast introduction \nCast home screen \n\n### Chrome\n\nCast introduction \nCast home screen \n\n### [Cast button availability](#sender-cast-icon-available)\n\n\n**Required**\n\n\nA The Cast button must\nbe visible from every screen where there is playable content, and located in a consistent position\nwhile browsing or playing content. It will also appear in Chrome's header for global control.\n\n\nB In Chrome, the Cast button can be hidden\nwhen Web Receivers aren't available. For Android and iOS senders,\nthe Cast button should always display when the device is on Wi-Fi, so proper help can be given\nif the user has turned off local network access and devices become undiscoverable as a result\n(see [iOS Permissions and Discovery](/cast/docs/ios_sender/permissions_and_discovery)\nfor more details).\n\n\nC In mobile apps, the Cast button should be on the right\nside.\n\n\nD In Chrome, the Cast button should be on the right side in\nthe content media controls (for example, see embedded video). If the media controls contain a fullscreen\nbutton, place the Cast button to the left of it.\n\n**Note**\n\nGoogle Cast employs a multi-tasking model, which allows users to browse the sender app and\nother apps while casting. The Cast button must be visible from every screen where there is\nplayable content, so the user doesn't have to hunt to find where to pause or stop the content\nplaying on TV. \n\n### Android\n\nSender disconnected \nCast home screen \n\n### iOS\n\nSender disconnected \nCast home screen \n\n### Chrome\n\nSender disconnected \nCast home screen \n\n### [Cast button states](#sender-cast-icon-states)\n\n\n**Required**\n\n\nA Disconnected: When Web Receivers are available, the\nCast button appears\n\n\nB Connecting: When the Web Receiver is connecting, the\nCast button animates the waves in the icon progressively (for details, see note below)\n\n\nC Connected: When this app is connected to the Cast\nWeb Receiver, its Cast button appears with a filled frame shape\n\n\n**Best practices**\n\n\nFor each of the button states, use colors that match the style of other UI\nelements of your app. Using a distinct highlight color (such as yellow) for the ON / Connected\nstate is optional.\n\n\n**Notes**\n\n- The Cast icon displays on Chrome, Android, and iOS to provide access to the Cast extension regardless of the availability of Cast devices.\n- The Connecting (animated) state appears when the connection to the Cast API takes longer than expected (the Android and Chrome SDK's will automatically animate the Cast icon). Once connected, the Web Receiver app launches.\n- The ON / Connected state of the Cast icon has been updated and now uses a solid fill within the icon frame. The new Cast icon and icon templates are available [here](/cast/docs/get-started#download_cast_icons_optional).\n\n\u003cbr /\u003e\n\n### Android\n\nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### iOS\n\nSender, Cast unavailable \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### Chrome\n\nSender, Cast unavailable\n\nThe Cast icon displays in Chrome to provide access to the Cast extension regardless of the connection state. \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
