Una app que reproduce contenido multimedia requiere componentes de interfaz de usuario para mostrar contenido multimedia y controlar la reproducción. La biblioteca Media3 incluye un módulo de IU que contiene una serie de componentes de IU. Para depender del módulo de IU, agrega lo siguiente dependencia:
implementation("androidx.media3:media3-ui:1.5.1")
implementation "androidx.media3:media3-ui:1.5.1"
El componente más importante es PlayerView, una vista para las reproducciones de contenido multimedia.
PlayerView muestra el video, las imágenes, los subtítulos y la imagen del álbum durante la reproducción.
y los controles de reproducción.
PlayerView tiene un método setPlayer para adjuntar y desconectar (de
pasando null) instancias del reproductor.
PlayerView
PlayerView se puede usar para la reproducción de video, imagen y audio. Renderiza el video y los subtítulos en el caso de la reproducción de video, los mapas de bits para la reproducción de imágenes 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, un objeto PlayerView
se pueden incluir 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 de la vista, como
así como su apariencia. La mayoría de estos atributos tienen métodos setcorrespondientes, que se pueden usar para personalizar la vista durante el tiempo de ejecución. El
PlayerView Javadoc enumera estos atributos y métodos set en
en 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:
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... playerView = findViewById(R.id.player_view) }
@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:
// 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()
// 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 plataforma
El atributo surface_type de PlayerView te permite establecer el tipo de superficie
que se usa para la reproducción de videos. Además de los valores spherical_gl_surface_view (que es un valor especial para la reproducción de videos esféricos) y video_decoder_gl_surface_view (que es para la renderización de videos con renderizadores 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 hacerlo puede ser costoso.
Si la vista es para la reproducción de video normal, entonces surface_view o texture_view.
que se debe usar. SurfaceView tiene varios beneficios por sobre TextureView para
reproducción de video:
- Disminuye significativamente el consumo de energía 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.
TextureView solo debe usarse si SurfaceView no satisface tus necesidades. Un ejemplo es cuando se requieren animaciones fluidas o el desplazamiento de la superficie de video antes de Android 7.0 (nivel de API 24), como se describe en las siguientes notas. Para
En este caso, es preferible usar TextureView solo cuando SDK_INT es menor
a la 24 (Android 7.0) y, de lo contrario, SurfaceView.
Navegación con pad direccional en Android TV
El control remoto de Android TV tiene un pad direccional que envía comandos que
llegar como evento clave a la(s) dispatchKeyEvent(KeyEvent) de la Activity. Estos
deben delegarse a la vista de reproductor:
override fun dispatchKeyEvent(event: KeyEvent?): Boolean{ return playerView.dispatchKeyEvent(event!!) || super.dispatchKeyEvent(event) }
@Override public boolean dispatchKeyEvent(KeyEvent event) { return playerView.dispatchKeyEvent(event) || super.dispatchKeyEvent(event); }
Solicitar el enfoque para la vista del reproductor es importante para navegar por los controles de reproducción y omitir anuncios. Solicita el enfoque en onCreate de las
Activity:
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... playerView.requestFocus() // ... }
@Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); // ... playerView.requestFocus(); // ... }
Si usas Compose en Android TV, debes hacer que AndroidView
enfocable y delegue el evento pasando el parámetro modificador al
AndroidView según corresponda:
AndroidView(
modifier = modifier
.focusable()
.onKeyEvent { playerView.dispatchKeyEvent(it.nativeKeyEvent) },
factory = { playerView }
)
Anula elementos de diseño
PlayerView usa PlayerControlView para mostrar los controles de reproducción y la barra de progreso. Los elementos de diseño que usa PlayerControlView se pueden reemplazar por elementos de diseño con los mismos nombres definidos en tu aplicación. Consulta la página de Javadoc de PlayerControlView para obtener una lista de elementos de diseño de control que se pueden anular.
Más personalización
Cuando se requiera una personalización más allá de la que se describió anteriormente, esperamos que los desarrolladores de apps implementen sus propios componentes de IU en lugar de usar los que proporciona el módulo de IU de Media3.