El reproductor perfecto con react-native-video + react-native-vlc-media-player
Si estas intentando hacer tu propio reproductor multimedia en react-native has llegado al artículo adecuado, ya que a continuación te explicare como combinar las dos librerías más utilizadas para este propósito consiguiendo así el reproductor más estable de react-native.
¡Empecemos!
La librería react-native-video es la más utilizada para desarrollar reproductores en react-native y esto es gracias a las funciones que ofrece y la facilidad con que se puede implementar. Una de las habilidades más especiales que tiene, por faltar en otras librerías, es la de obtener las pistas de audio, video y subtítulos que llevan algunos formatos de video como el mkv. Además permite seleccionarlas por lo que podemos cambiar de audio en el reproductor siempre y cuando el video lo permita.
Pero react-native-video también tiene sus defectos, como el hecho de que no acepta varios tipos de pistas tanto de audio como de video y ahí es donde entra react-native-vlc-media-player.
La libreria react-native-vlc-media-player utiliza el motor de VLC Player lo que le permite poder reproducir una mayor cantidad de tipos de audio y video. ¿Pero cual es su defecto? que no tiene soporte para multipista de audio, video y subtítulos. Así que combinaremos las dos librerías para crear el reproductor más completo desarrollado con react-native.
Lo primero que haremos será instalar las dos librerías y importarlas en nuestro componente donde generaremos el reproductor y añadimos el componente <Video> de react-native-video con los hooks para controlar las pistas de audio, video y subtítulos, que configuraremos por default el hook del video con el valor ‘auto’ y el hook del audio con el valor ‘system’. También contiene el hook y la función para guardar los metadatos del video donde contiene la información de las pistas de video, audio y subtítulos.
Se puede observar que configuramos una función para controlar los errores llamada playerError. Esta función sera muy importante porque sera la que indica cuando pasaremos del componente de react-native-video al componente de react-native-vlc-media-player. Añadimos el hook donde controlaremos este paso
Y esta seria la función de playerError donde pasaremos al componente de react-native-vlc-media-player cuando recibamos un error de NO_UNSUPPORTED_TYPE por parte del componente de react-native-video
Ahora añadiremos el componente de react-native-vlc-media-player quedando el código de la siguiente manera
¡Ya lo tenemos!
Con este código podrás empezar a desarrollar el reproductor más completo de react-native.
Ya sabes que si te ha gustado el artículo me puedes invitar a un café ;-)
Recuerda seguir la siguiente publicación para más artículos sobre React Native con Expo
