El botón para transmitir abre un diálogo para conectarte, controlar y desconectarte de los receptores web.
Consulta Íconos para transmitir a fin de descargar las plantillas de botones para transmitir.
Ten en cuenta que el botón para transmitir no es específico de Google Cast; se puede usar para representar tanto a receptores web como a otros que no lo son (como auriculares Bluetooth). Los receptores web deben aparecer siempre debajo del diálogo de transmisión y nunca debajo de otro cuadro de diálogo, menú o control.
Presenta la transmisión a los usuarios
La incorporació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 a la transmisión la primera vez que
están disponibles los receptores web. Para remitentes de iOS, muestra una pantalla de introducción a Transmitir la primera vez que aparece el botón para transmitir.
B Destaca visualmente el botón para transmitir marcándolo en un círculo)
C Explica cómo funciona el botón para transmitir (por ejemplo, mostrar un mensaje como "Tocar para transmitir videos a la TV")
Android
Introducción a la transmisión
![Introducción a la transmisión](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/prompting1_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
iOS
Introducción a la transmisión
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/prompting1_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Chrome
Introducción a la transmisión
![Introducción a la transmisión](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/prompting1_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![Transmitir pantalla principal](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Disponibilidad del botón para transmitir
Obligatorio
A El botón para transmitir debe ser visible desde todas las pantallas en las que haya contenido que se pueda reproducir y debe estar ubicado en una posición coherente mientras se navega o se reproduce contenido. También aparecerá en el encabezado de Chrome para lograr un control global.
B En Chrome, el botón para transmitir se puede ocultar cuando los receptores web no están disponibles. En el caso de remitentes de iOS y Android, el botón para transmitir siempre debe aparecer cuando el dispositivo está conectado a Wi-Fi, de modo que se puede brindar la ayuda adecuada si el usuario desactivó el acceso a la red local y, como resultado, los dispositivos se vuelven indetectables (consulta Permisos y descubrimiento de iOS para obtener más información).
C En las apps para dispositivos móviles, el botón para transmitir debería estar del lado derecho.
D En Chrome, el botón para transmitir debería estar en el lado derecho de los controles de contenido multimedia (por ejemplo, en el de video incorporado). Si los controles multimedia contienen un botón de pantalla completa, colócalo a la izquierda.
Nota
Google Cast emplea un modelo de multitarea, que permite a los usuarios navegar por la app emisora y otras apps durante la transmisión. El botón para transmitir debe estar visible en todas las pantallas en las que haya contenido que se pueda reproducir, 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
![Se desconectó el remitente](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
iOS
Se desconectó el remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Chrome
Se desconectó el remitente
![Se desconectó el remitente](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Estados del botón para transmitir
Obligatorio
A Desconectado: Cuando están disponibles los receptores web, aparece el botón
para transmitir
B Conectando: cuando el receptor web se conecta, el
botón para transmitir anima las olas de forma progresiva (para obtener más detalles, consulta la nota a continuación)
C Conectado: cuando la app se conecta a la forma de transmisión
web rellenada con un receptor web, su botón
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 la app. El uso de un color de resaltado distinto (como amarillo) para el estado ACTIVADO / Conectado es opcional.
Notas
- El ícono de Cast se muestra en Chrome, iOS y Android para brindar acceso a la extensión de Cast, independientemente de la disponibilidad de los dispositivos de transmisión.
- El estado de conexión (animada) aparece cuando la conexión a la API de Cast demora más de lo esperado (los SDK de Android y Chrome animarán automáticamente el ícono de Cast). Una vez que te conectes, se iniciará la app de Web Receiver.
- Se actualizó el estado ACTIVADO / Conectado del ícono de transmisión y ahora usa un relleno sólido dentro del marco del ícono. Las nuevas plantillas de íconos y de íconos para transmitir están disponibles aquí.
Android
Remitente; transmisión desconectada
![Remitente; transmisión desconectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=7&hl=es)
Transmitir pantalla principal
![Transmitir pantalla principal](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Remitente, conexión de transmisión
![Remitente, conexión de transmisión](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=7&hl=es)
Transmitir pantalla principal
![Transmitir pantalla principal](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Remitente, transmisión conectada
![Remitente, transmisión conectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=7&hl=es)
Cargando la app del receptor web
![Cargando la app del receptor web](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=7&hl=es)
Remitente, transmisión conectada
![Remitente, transmisión conectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=7&hl=es)
App de receptor web cargada / inactiva
![App de receptor web cargada / inactiva](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=7&hl=es)
iOS
Remitente; la transmisión no está disponible
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Remitente; transmisión desconectada
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Remitente, conexión de transmisión
![Remitente, conexión de transmisión](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Remitente, transmisión conectada
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=7&hl=es)
Cargando la app del receptor web
![Cargando la app del receptor web](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=7&hl=es)
Remitente, transmisión conectada
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=7&hl=es)
App de receptor web cargada / inactiva
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=7&hl=es)
Chrome
Remitente; la transmisión no está disponible
![Remitente; la transmisión no está disponible](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=7&hl=es)
El ícono de Cast aparece en Chrome para brindar acceso a la extensión de Cast, independientemente del estado de la conexión.
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Remitente; transmisión desconectada
![Remitente; transmisión desconectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Remitente, conexión de transmisión
![Remitente, conexión de transmisión](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=7&hl=es)
Transmitir pantalla principal
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=es)
Remitente, transmisión conectada
![Remitente, transmisión conectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=7&hl=es)
Cargando la app del receptor web
![Cargando la app del receptor web](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=7&hl=es)
Remitente, transmisión conectada
![Remitente, transmisión conectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=7&hl=es)
App de receptor web cargada / inactiva
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=7&hl=es)
Las imágenes que se usan en esta guía de diseño son cortesía de Blender Foundation, y se comparten bajo los derechos de autor o una licencia Creative Commons.
- Elephant's Dream: (c) Copyright 2006, Blender Foundation / Países Bajos 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