Índice de contenido
Te voy a mostrar los pasos necesarios para incrustar un video de YouTube en tu aplicación móvil. Aunque en la demo me encontré con algunos errores de conexión (posiblemente por restricciones de la API de YouTube o permisos específicos del video), el procedimiento técnico es el que te explicaré a continuación.
Anteriormente vimos el uso del Acelerómetro en Android Studio
1. Configuración de Dependencias (Gradle)
Incrustar un reproductor de YouTube no es una funcionalidad nativa del núcleo de Android, por lo que necesitamos instalar dependencias adicionales. Para este proyecto, utilicé la ayuda de una IA para identificar las librerías más estables.
Debes dirigirte al archivo build.gradle y agregar las dependencias necesarias. Es muy importante que verifiques las versiones; por ejemplo, yo tenía la versión 2.1, pero el sistema me advirtió que ya estaba disponible la 13.0. Siempre te recomiendo sincronizar tu proyecto con las versiones más recientes para evitar problemas de compatibilidad.
app/build.gradle.kts
Agrega y configura el paquete
dependencies {
implementation("com.pierfrancescosoffritti.androidyoutubeplayer:core:13.0.0")
implementation("androidx.lifecycle:lifecycle-runtime-compose:2.10.0")
}
El cambio para variar lo hice mediante la IA de Gemini integrada en Android Studio:
Okay, I'll help you with that. I will add and configure the necessary package to play YouTube videos in your Android application. First, I need to modify the build.gradle file.
Got it. Now I'll read the build.gradle.kts file to add the new dependency.
I've added the YouTube player dependency to your build.gradle.kts file. Now I will sync the project.
build.gradle.kts
+1
implementation(libs.androidx.compose.ui.tooling.preview)
implementation(libs.androidx.compose.material3)
implementation("com.pierfrancescosoffritti.androidyoutubeplayer:core:13.0.0")
implementation(libs.androidx.material3
Al igual que en Flutter usamos paquetes de pub.dev, en Android recurrimos a repositorios como Maven para obtener estas funcionalidades que no vienen por defecto en Material 3.
Aunque lo puedes hacer de manera manual.
2. Permisos de Internet y Manifiesto
Como es lógico, para reproducir contenido de YouTube necesitamos acceso a la red. Debes abrir el archivo AndroidManifest.xml y agregar el siguiente permiso:
<uses-permission android:name="android.permission.INTERNET" />A diferencia de los permisos de galería o ubicación (que requieren aprobación del usuario en tiempo de ejecución desde Android 8), el permiso de internet se configura de manera básica en el manifiesto y se concede automáticamente al instalar la app.
3. Implementación del Composable y Ciclo de Vida
YouTube no tiene un "Composable" oficial nativo para Jetpack Compose, así que debemos usar una librería de terceros y envolverla en un AndroidView (un esquema legacy que permite usar vistas antiguas en Compose):
@Composable
fun YoutubeVideoPlayer(videoId: String) {
val context = LocalContext.current
val lifecycleOwner = LocalLifecycleOwner.current
// Usamos remember para mantener la misma instancia de la vista
val playerView = remember {
YouTubePlayerView(context).apply {
// Añadimos el observador del ciclo de vida
lifecycleOwner.lifecycle.addObserver(this)
addYouTubePlayerListener(object : AbstractYouTubePlayerListener() {
override fun onReady(youTubePlayer: YouTubePlayer) {
// Cargamos el video inicial
youTubePlayer.loadVideo(videoId, 0f)
}
})
}
}
// Limpieza: Cuando el composable sale de la pantalla, quitamos el observador
DisposableEffect(lifecycleOwner) {
onDispose {
lifecycleOwner.lifecycle.removeObserver(playerView)
playerView.release()
}
}
AndroidView(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
.clip(RoundedCornerShape(12.dp)),
factory = { playerView }
)
}Puntos clave del código
- Manejo del Ciclo de Vida: Al ser un componente "pesado" (como el Media Player o el Acelerómetro), es crucial gestionar el ciclo de vida. Si el usuario cambia de aplicación o cierra la pantalla, debemos liberar los recursos.
- Remember: Utilizamos remember para evitar que la variable del reproductor se reinicie cada vez que el Composable se recomponga.
- DisposableEffect: Aquí es donde ocurre la magia de la limpieza. Cuando el componente sale de la pantalla, ejecutamos el método release() para detener el video y liberar la memoria.
- YouTubePlayerView: Configuramos el reproductor pasándole el ID del video (el código alfanumérico que aparece en la URL de YouTube).
Consideraciones Finales
Si el video no carga y te muestra un error en pantalla (como me sucedió inicialmente), puede deberse a que el dueño del video ha desactivado la opción de "permitir incrustación" en sitios externos.
Asegúrate siempre de utilizar librerías que tengan mantenimiento activo. Si ves que un paquete no ha sido actualizado en años, es mejor buscar una alternativa para evitar fallos cuando Google lance nuevas versiones de Android.
¿Cuál es su función principal?
En Android, el "Ciclo de Vida" (Lifecycle) gestiona cuándo una pantalla se abre, se pausa o se cierra. Antes de esta librería, conectar Compose con el ciclo de vida era manual y propenso a errores (fugas de memoria).
El paquete anterior introduce herramientas que permiten a tus componentes @Composable observar el estado de la aplicación (si está en primer plano o en el fondo) de forma automática.
Al agregar esta dependencia, pudiste usar:
- LocalLifecycleOwner.current: Es la línea que te permite saber qué actividad o fragmento está sosteniendo tu video en ese momento. Sin esta librería, a veces el compilador no reconoce la referencia o no te permite acceder a .lifecycle.addObserver().
- LifecycleResumeEffect / LifecycleEventEffect: (Opcionales) Son funciones modernas que reemplazan al DisposableEffect para ejecutar código justo cuando el usuario vuelve a ver la app o cuando la minimiza.
Siguiente paso, ¿Cómo mostrar páginas web con WebView en Android?