Cómo agregar controles de reproducción a tu app

Una app que reproduce contenido multimedia requiere componentes de la interfaz de usuario para mostrar contenido multimedia y controlar la reproducción. La biblioteca de Media3 incluye un módulo de IU que contiene varios componentes de IU. Para depender del módulo de IU, agrega la siguiente dependencia:

Kotlin

implementation("androidx.media3:media3-ui:1.3.1")

Groovy

implementation "androidx.media3:media3-ui:1.3.1"

El componente más importante es PlayerView, una vista para las reproducciones de contenido multimedia. PlayerView muestra el video, los subtítulos y la imagen del álbum durante la reproducción, así como los controles de reproducción.

PlayerView tiene un método setPlayer para conectar y desconectar (pasando null) instancias del jugador.

Vista del reproductor

PlayerView se puede usar para reproducciones de video y audio. Renderiza video y subtítulos en el caso de la reproducción de video, y puede mostrar material gráfico incluido como metadatos en archivos de audio. Puedes incluirlo en tus archivos de diseño como cualquier otro componente de la IU. Por ejemplo, se puede incluir un PlayerView con el siguiente XML:

<androidx.media3.ui.PlayerView
    android:id="@+id/player_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:show_buffering="when_playing"
    app:show_shuffle_button="true"/>

En el fragmento anterior, se ilustra que PlayerView proporciona varios atributos. Estos atributos se pueden usar para personalizar el comportamiento y la apariencia de la vista. La mayoría de estos atributos tienen métodos set correspondientes, que se pueden usar para personalizar la vista en el tiempo de ejecución. El Javadoc de PlayerView enumera estos atributos y métodos set con más detalle.

Una vez que se declara la vista en el archivo de diseño, se puede buscar en el método onCreate de la actividad:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  // ...
  playerView = findViewById(R.id.player_view)
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  // ...
  playerView = findViewById(R.id.player_view);
}

Cuando se inicializa un reproductor, se puede adjuntar a la vista llamando a setPlayer:

Kotlin

// Instantiate the player.
val player = ExoPlayer.Builder(context).build()
// Attach player to the view.
playerView.player = player
// Set the media item to be played.
player.setMediaItem(mediaItem)
// Prepare the player.
player.prepare()

Java

// Instantiate the player.
player = new ExoPlayer.Builder(context).build();
// Attach player to the view.
playerView.setPlayer(player);
// Set the media item to be played.
player.setMediaItem(mediaItem);
// Prepare the player.
player.prepare();

Elige un tipo de superficie

El atributo surface_type de PlayerView te permite establecer el tipo de superficie que se usa para la reproducción de video. Además de los valores spherical_gl_surface_view (que es un valor especial para la reproducción de video esférico) y video_decoder_gl_surface_view (que es para la renderización de videos con procesadores de extensiones), los valores permitidos son surface_view, texture_view y none. Si la vista es solo para la reproducción de audio, se debe usar none para evitar tener que crear una superficie, ya que puede ser costoso.

Si la vista es para la reproducción de video normal, se debe usar surface_view o texture_view. SurfaceView tiene una serie de beneficios en comparación con TextureView para la reproducción de video:

• Consumo de energía mucho más bajo en muchos dispositivos.
• Latencia de fotogramas más precisa, lo que da como resultado una reproducción de video más fluida
• Compatibilidad con salida de video HDR de mayor calidad en dispositivos compatibles.
• Compatibilidad con salida segura cuando se reproduce contenido protegido por DRM.
• La capacidad de renderizar contenido de video en la resolución completa de la pantalla en dispositivos Android TV que mejoran la capa de la IU

Por lo tanto, se debe preferir SurfaceView en lugar de TextureView siempre que sea posible. Solo debes usar TextureView si SurfaceView no satisface tus necesidades. Un ejemplo es cuando se requieren animaciones fluidas o desplazamiento de la superficie de video antes de Android 7.0 (nivel de API 24), como se describe en las siguientes notas. En este caso, es preferible usar TextureView solo cuando SDK_INT es inferior a 24 (Android 7.0) y SurfaceView en el caso contrario.

Nota: El procesamiento de SurfaceView no se sincronizó correctamente con las animaciones de vistas hasta Android 7.0 (nivel de API 24). En versiones anteriores, esto podía provocar efectos no deseados cuando se colocaba un SurfaceView en un contenedor de desplazamiento o cuando estaba sujeto a animaciones. Estos efectos incluyen que el contenido de la vista aparece con un retraso ligeramente detrás de donde debe mostrarse y que la vista se vuelve negra cuando se lo somete a animación. Para lograr una animación o un desplazamiento fluidos del video antes de Android 7.0, es necesario usar TextureView en lugar de SurfaceView.

Nota: El ciclo de vida de la superficie de un SurfaceView está vinculado a la visibilidad de la vista, mientras que el ciclo de vida de la superficie de TextureView está vinculado al acoplamiento y desconexión de ventanas. Por lo tanto, en las IU de desplazamiento que usan SurfaceView, iniciar la reproducción puede llevar más tiempo porque la superficie de salida estará disponible un poco más tarde. A partir de Android 14, PlayerView usa SurfaceView.setSurfaceLifecycle(SURFACE_LIFECYCLE_FOLLOWS_ATTACHMENT) para evitar este comportamiento. Si tu app usa SurfaceView directamente (sin PlayerView), te recomendamos que habilites este modo. Antes de Android 14, es posible trabajar alrededor de la superficie que se destruye traduciendo las vistas fuera de la pantalla cuando se reciclan.

Nota: Algunos dispositivos Android TV ejecutan su capa de la IU a una resolución inferior a la resolución completa de la pantalla y la escalan para mostrarla al usuario. Por ejemplo, la capa de la IU se puede ejecutar en 1080p en una pantalla 4K de Android TV. En esos dispositivos, se debe usar SurfaceView para renderizar contenido en la resolución completa de la pantalla. Se puede consultar la resolución completa de la pantalla (en su modo de visualización actual) con Util.getCurrentDisplayModeSize. La resolución de la capa de la IU se puede consultar con la API de Display.getSize de Android.

Navegación con pad direccional en Android TV

El control remoto de Android TV tiene un pad direccional que envía comandos que llegan como eventos clave a dispatchKeyEvent(KeyEvent) de tu Activity. Estos deben delegarse a la vista del jugador:

Kotlin

override fun dispatchKeyEvent(event: KeyEvent?): Boolean{
  return playerView.dispatchKeyEvent(event!!) || super.dispatchKeyEvent(event)
}

Java

@Override
public boolean dispatchKeyEvent(KeyEvent event) {
  return playerView.dispatchKeyEvent(event) || super.dispatchKeyEvent(event);
}

Solicitar el enfoque de la vista del reproductor es importante para navegar por los controles de reproducción y omitir anuncios. Considera solicitar el enfoque en onCreate de Activity:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  // ...
  playerView.requestFocus()
  // ...
}

Java

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...
    playerView.requestFocus();
    // ...
}

Si usas Compose en Android TV, debes hacer que AndroidView se pueda enfocar y delegar el evento pasando el parámetro modificador a AndroidView según corresponda:

AndroidView(
  modifier = modifier
    .focusable()
    .onKeyEvent { playerView.dispatchKeyEvent(it.nativeKeyEvent) },
  factory = { playerView }
)

Anula elementos de diseño

Precaución: No garantizamos que las personalizaciones que se describen en la siguiente sección sigan funcionando en versiones futuras de la biblioteca. Los IDs de los recursos pueden cambiar el nombre o algunos se pueden borrar por completo. Esto se indica mediante los IDs de recursos marcados como "privados".

PlayerView usa PlayerControlView para mostrar los controles de reproducción y la barra de progreso. Los elementos de diseño con los mismos nombres definidos en tu aplicación pueden anular los elementos de diseño que usa PlayerControlView. Consulta el Javadoc de PlayerControlView para obtener una lista de elementos de diseño de control que se pueden anular.

Mayor personalización

Cuando se requiera una personalización más allá de la descrita anteriormente, se espera que los desarrolladores de apps implementen sus propios componentes de IU en lugar de usar los que proporciona el módulo de la IU de Media3.