Cuando se transmite contenido a un receptor web, el usuario siempre debe poder controlarlo desde la app emisora.
Nota: De acuerdo con las Condiciones del Servicio Adicionales para Desarrolladores del SDK de Google Cast, una aplicación de transmisión de contenido multimedia debe usar las APIs de control de reproducción (mensajes de reproducción multimedia) definidas para el SDK a fin de controlar la reproducción de contenido multimedia en el receptor web.
Las apps emisoras deben proporcionar controles de transmisión en las siguientes áreas:
- Diálogo de transmisión, durante la transmisión
- Controles de volumen del remitente
- Control expandido del remitente
- Minicontrolador de remitente
- Notificación del remitente
- Pantalla de bloqueo del remitente
El estado de reproducción de transmisión de la app emisora y los controles en estas áreas deben estar sincronizados con los cambios de reproducción que se producen en el receptor web, incluso cuando la app emisora no los origine. Esto permitirá el manejo adecuado de los comandos de varios emisores y el control de reproducción proveniente de los controles remotos, los botones, etc. del dispositivo.
Android
Controles del diálogo de transmisión
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-active1.png?authuser=3&hl=es-419)
Minicontrolador
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control1.png?authuser=3&hl=es-419)
Controles de notificaciones
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-notification1.png?authuser=3&hl=es-419)
Bloquear controles de pantalla
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-lockscreen1.png?authuser=3&hl=es-419)
iOS
Controles del diálogo de transmisión
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-active1.png?authuser=3&hl=es-419)
Minicontrolador
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control1.png?authuser=3&hl=es-419)
Chrome
Controles del diálogo de transmisión
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-menu-active1.jpg?authuser=3&hl=es-419)
Minicontrolador
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control1.jpg?authuser=3&hl=es-419)
Controles de volumen del remitente
La app emisora debe permitir que los usuarios controlen el volumen del contenido que se reproduce en la TV o las bocinas con los botones de volumen del hardware o el control deslizante del volumen del software del dispositivo que envía el contenido. Controlan cualquiera de los siguientes elementos:
- El nivel de audio enviado a la TV para dispositivos Google Cast, como Chromecast.
- El volumen real de las bocinas y TVs nativas de Google Cast TVs, TVs con Android TV integrado y bocinas inteligentes.
Obligatorio
A La app emisora debe permitir que los usuarios controlen el volumen del contenido que se reproduce en la TV o las bocinas mediante los botones de volumen del hardware o el control deslizante de volumen del software del dispositivo emisor.
- Android: Es obligatorio admitir los botones de hardware y el control deslizante de volumen del software.
- iOS: El control deslizante del volumen del software es obligatorio.
- Web/Chrome: Se requiere compatibilidad con el control deslizante de volumen del software.
B En el dispositivo móvil, el control deslizante de volumen del software debe estar disponible en el diálogo de transmisión durante la transmisión.
C El control deslizante de volumen de la app emisora debe sincronizarse con el volumen actual de Web Receiver después de conectarse a esta y permanecer sincronizado.
D El control deslizante de volumen de la app emisora debe reflejar los cambios de volumen que realizaron otras emisoras o el control remoto de la app de Chromecast.
E Las apps que envían las apps nunca deben establecer el volumen en un nivel predefinido, solo deben pasar cambios de volumen iniciados por el usuario.
F Solo para Android: Cuando se usen los botones de hardware para cambiar el nivel de volumen del Receptor web, debe aparecer un control deslizante de volumen visual (con un ícono de transmisión a la izquierda) cuando se presionen los botones de volumen del hardware. Nota: En Android Gingerbread (versión 2.3), el ícono para transmitir no aparece.
Prácticas recomendadas
- Incrementos de volumen:
- Android: El framework aumenta el volumen automáticamente.
- iOS y Chrome: En el caso de los botones de volumen del hardware, usa incrementos de menos o igual al 5% del rango de volumen completo del dispositivo receptor web para dispositivos de audio y video, y incrementos iguales al 2% del rango de volumen completo del dispositivo receptor web para dispositivos que solo tengan audio.
Control expandido del remitente
La app emisora debe proporcionar un control expandido para el contenido que se transmite.
Obligatorio
A Para identificar el contenido que se transmite, muestra su título o material gráfico.
B Antes de comenzar la reproducción, muestra un indicador de carga y el título o la portada del contenido.
C Cuando se inicie el contenido, identifica el estado de Web Receiver.
D Proporciona los controles relevantes.
E En el extremo izquierdo de la barra deslizante, muestra el tiempo de reproducción actual.
En el extremo derecho, muestra la duración total de la transmisión si se conoce y si no es una transmisión en vivo.
F Ocultar los controles que no son relevantes para la transmisión
G No desconectes ni detengas la transmisión cuando los usuarios salgan del control expandido.
H Proporciona una manera fácil de regresar al control expandido cuando los usuarios salen de la página.
Prácticas recomendadas
- Proporciona un control deslizante de la posición de reproducción para las transmisiones de contenido multimedia.
- No muestres otro material gráfico y metadatos significativos relacionados con el contenido.
- Identifica el tiempo transcurrido y la duración del contenido para las transmisiones de contenido multimedia.
Android
Cargando el contenido del remitente
![Cargando el contenido del remitente](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements1_a.png?authuser=3&hl=es-419)
Cargando contenido del receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1.gif?authuser=3&hl=es-419)
Se está reproduciendo el contenido del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements2_a.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
iOS
Cargando el contenido del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements1_a.gif?authuser=3&hl=es-419)
Cargando contenido del receptor web
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1.gif?authuser=3&hl=es-419)
Se está reproduciendo el contenido del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements2_a.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
Chrome
Cargando el contenido del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements1_a.gif?authuser=3&hl=es-419)
Cargando contenido del receptor web
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1.gif?authuser=3&hl=es-419)
Se está reproduciendo el contenido del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements2_a.jpg?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
Minicontrolador del remitente
Durante la transmisión, debería aparecer un pequeño control persistente conocido como minicontrolador cuando el usuario salga de la página de contenido actual o del control expandido a otra vista dentro de la app emisora. El minicontrolador es un recordatorio visible de la transmisión actual y proporciona acceso instantáneo a ella.
Obligatorio
A Una barra o cuadro que muestra lo que se está transmitiendo aparece cerca de la parte inferior de la app emisora. Estos controles se mantienen mientras el usuario explora otro contenido o secciones de la app.
B Los controles funcionan mejor cuando son simples y comunican lo que se está transmitiendo.
C Está disponible en todas las pantallas de la app (excepto en la página del control expandida).
D Si presionas el área de contenido, se abrirá el control expandido.
E Proporciona cualquier otro control relevante para la acción inmediata.
Prácticas recomendadas
Para obtener la mejor experiencia del usuario, incluye controles en el diálogo de transmisión, además del minicontrolador.
Android
Minicontrolador del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control1_a.png?authuser=3&hl=es-419)
Se pausó el contenido del receptor web
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
iOS
Minicontrolador del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control1_a.png?authuser=3&hl=es-419)
Se pausó el contenido del receptor web
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
Chrome
Minicontrolador del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control1_a.jpg?authuser=3&hl=es-419)
Se pausó el contenido del receptor web
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
Notificación del remitente
Obligatorio (solo para Android)
A Usa el ícono de la app (no el ícono de transmisión) para la notificación de la barra de estado.
B Identifica el contenido que se está transmitiendo. Por ejemplo, muestra el título o el material gráfico del contenido.
C Identifica qué receptor web está transmitiendo contenido.
D Proporciona controles de contenido básicos.
E Proporciona una "X" para detener la transmisión y desconectarte del receptor web en la fila de acciones.
F Si presionas el logotipo de la app, el título del contenido o el material gráfico, se debería abrir el control expandido de la app emisora.
Notas
- Solo para Android: No es posible implementar notificaciones en iOS ni en Chrome.
- En Android Gingerbread (versión 2.3), las notificaciones solo mostrarán el ícono y el texto de la app, no reproducir, pausar ni detener contenido.
- Para obtener más información, consulta cómo agregar controles multimedia a las notificaciones.
Android
Ícono de notificación del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-notification1_a.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
Controles de notificaciones del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-notification2_a.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
Pantalla de bloqueo del remitente
Obligatorio (solo para Android)
A Identifica el contenido que se transmite mediante el título o el material gráfico del contenido.
B Identifica qué receptor web está transmitiendo contenido. Ten en cuenta que esto no es obligatorio para las apps de música.
C Proporciona los controles de reproducción.
D Proporciona acceso al control de volumen mediante botones de hardware.
Obligatorio para Android 4.4 KitKat y versiones posteriores:
- Ícono de la app
- Material gráfico (por ejemplo, la portada de un álbum)
- Identificar en el texto qué contenido se transmite (por ejemplo, "Lágrimas de acero")
- Identifica qué receptor web está transmitiendo contenido (por ejemplo, "Sala de estar")
Obligatorio para Android 4.3 Jelly Bean:
- Material gráfico (por ejemplo, la portada de un álbum)
- Identificar en el texto qué contenido se transmite (por ejemplo, "Lágrimas de acero")
- Identifica qué receptor web está transmitiendo contenido (por ejemplo, "Sala de estar")
Notas
- Solo para Android: No es posible implementar notificaciones en iOS ni en Chrome.
- Los controles de la pantalla de bloqueo son obligatorios para Android 4.1 y versiones posteriores.
- Hay diferentes controles disponibles para las distintas versiones del sistema operativo Android, y la pantalla de bloqueo solo puede admitir campos de texto. Por lo general, los gráficos y la iconografía describen el contenido de manera más inmediata que el texto.
- Los botones de hardware de control de volumen deben ajustar el volumen de la app emisora cuando el teléfono está bloqueado.
- El control debe usar el componente de framework:
MediaSession
oMediaSessionCompat
(para las versiones 4.4 y 4.3) oNotification
(para 5.0 y versiones posteriores).
Android
Controles de pantalla de bloqueo del remitente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-lockscreen1_a.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
El remitente reanuda la transmisión.
Una app emisora conectada debe restablecer su estado conectado después de una desconexión implícita (como una caída de red, un dispositivo en suspensión o la batería agotada).
Obligatorio
A Si la app emisora se desconecta de manera implícita (el usuario no detuvo la transmisión ni se desconectó de manera explícita), el contenido de transmisión debería seguir reproduciéndose en el receptor web. Cuando se reinicia la app o la conexión, la app emisora debe restablecer la conexión con Web Receiver, siempre y cuando la sesión de Web Receiver esté actualizada.
B El botón para transmitir debería restablecerse al estado conectado.
C Si el usuario presiona el botón para transmitir antes de que la emisora se vuelva a conectar, se mostrará la lista de dispositivos receptores web. Cuando el usuario seleccione el receptor web que está transmitiendo, debería aparecer un control mini o expandido en la app emisora.
Notas
Es posible que la app del receptor web también se desconecte y deje de ejecutarse debido a un corte de energía o a alguna otra interrupción fuera de contexto. Esto se considera como un final de sesión común, como se describe en El remitente detiene la transmisión.
Android
Cómo seleccionar la app
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-resume1_a.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
Se restableció la conexión de transmisión
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-resume2_a.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
iOS
Cómo seleccionar la app
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-resume1_a.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
Se restableció la conexión de transmisión
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-resume2_a.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
El remitente detiene la transmisión.
El contenido que se transmite a una TV continúa reproduciéndose hasta que un usuario elige Detener transmisión o hasta que un emisor transmite algo nuevo. Cuando se conectan varios remitentes al mismo Receptor web, cada app remitente debe tener un botón Desconectar (en lugar de un botón Detener la transmisión) en el cuadro de diálogo de transmisión.
Obligatorio
A Cuando se conectan varios remitentes a un Receptor web, cuando presionas Detener la transmisión desde una app emisora, no se realiza ningún cambio al Receptor web, y se quitan los controles y las notificaciones de transmisión de ese dispositivo. Los demás dispositivos emisores conectados permanecerán conectados con los controles de transmisión disponibles.
B Cuando una app emisora se desconecta de manera implícita (por ejemplo, se agota la batería del dispositivo emisor o se pierde la conexión de red del dispositivo emisor con el receptor web), no se envía nada al receptor web y se quitan los controles y las notificaciones de ese dispositivo. La app emisora debe realizar un seguimiento de las desconexiones implícitas y tratar de volver a conectarse a un receptor web cuando se vuelva a abrir la app emisora.
Android
Diálogo de transmisión, botón para desconectar
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-end1.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
iOS
Diálogo de transmisión, botón para desconectar
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-end1.png?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
Chrome
Diálogo de transmisión, botón para desconectar
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-end1.jpg?authuser=3&hl=es-419)
El receptor web está reproduciendo contenido
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=3&hl=es-419)
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