Exoplayer Ionic | Qué es y cómo se utiliza e implementa

¿Necesitas reproducir un video en tu aplicación y no puedes, o no quieres, utilizar el reproductor nativo del sistema? O, quizás, ya sabes cómo se hace, pero te falta algo para hacer funcionar ExoPlayer en Ionic ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás, de una manera sencilla y rápida, como reproducir videos con el componente Exoplayer de Ionic en tu app sin tener que pasar por el reproductor del sistema.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

¿Qué es Exoplayer Ionic?

Si has caído aquí y aún no saber que es este componente (si lo sabes pasa de punto), déjame resumírtelo en una pocas líneas. Se trata de una biblioteca concebida como alternativa al reproductor de video nativo de Android.

Cómo intuirás, únicamente está disponible para Android y es mantenida por el propio Google, vamos que es un componente sacado de su repositorio de Github.

Bien, espero que te haya quedado más o menos claro.

Instalación de Exoplayer Ionic

Cómo cada componente externo al core de Ionic, debemos de instalarlo en nuestra aplicación. Para ello vamos a utilizar las siguientes dos líneas de consolas:

$ ionic cordova plugin add cordova-plugin-exoplayer
$ npm install --save @ionic-native/android-exoplayer@4

La primera de ellas instalará el plugin que permitirá la comunicación de nuestra app con la parte nativa del sistema.

La segunda instalará el código TS necesario para que hará de puente entre el código TS de nuestra app y el plugin.

Plataformas soportadas

Aunque si has leído el primer punto lo sabrás ya, la única plataforma soportada por el módulo Exoplayer Ionic es:

• Android

Era de esperar al ser un componente únicamente pensado para ella y desarrollado por el mismo Google.

Configuración del componente

Para hacer funcionar todo, debemos incluir la referencia de este en los providers de nuestra aplicación. Para ello vamos a dirigirnos al archivo app.module.ts y lo agregaremos dentro de nuestros providers.

...

providers:  [
...,
AndroidExoPlayer,
...
]

...

Recordemos que si únicamente lo vamos a utilizar en una página de la app, y no en el total de estas, es recomendable agregar dicha línea en el module.ts del componente al que haga referencia la página en la que vayamos a utilizarlo, válgame la redundancia.

Ejemplo de uso del módulo

Vamos a pasar a ver lo que, estoy seguro, más te interesa. Un ejemplo de uso de Exoplayer Ionic para después comentar el código debajo de dicho ejemplo, veamos:

import { AndroidExoPlayer } from '@ionic-native/android-exoplayer';

constructor(private androidExoPlayer: AndroidExoPlayer) { }

...

this.androidExoPlayer.show({url: 'http://www.youtube.com/api/manifest/dash/id/bf5bb2419360daf1/source/youtube'});

Bien, en la primera línea realizaremos un import de la clase "AndroiExoPlayer" que nos llega desde el paquete "@ionic-native/android-exoplayer".

Posteriormente inyectaremos una instancia a nuestra clase mediante el constructor de la app.

Y, para terminar con el ejemplo, llamaremos al método show (el encargado de mostrar el player), pasándole un objeto, que ahora veremos cómo se construye y cuáles son sus parámetros, con un atributo llamado "url" al que vamos a asociar la url del video que queremos mostrar en el player.

Si hiciésemos uso de esto ahora mismo, un reproductor adicional a nuestra app se abriría para reproducir el video que contiene dicha url, pruébalo si quieres y después regresas y continuas con el tutorial.

Funciones y campos de clase

Ahora pasaremos al profundizar un poquito en dicho paquete. Déjame recordarte que las funciones y campos que vamos a ver ahora corresponden únicamente al componente Exoplayer Ionic, aquí no encontrarás las de alguno de sus padres.

show(params)

Esta es la función que hemos visto en el ejemplo que muestra el reproductor.

• params -> Una instancia de la clase "AndroidExoPlayerParams" que veremos a posteriormente.

Retorna un observable al que tenemos que suscribirnos. Cada vez que sea llamado llevará en su interior una instancia de "AndroidExoPlayerState" que también veremos a continuación

setStream(url, controller)

Nos permite setear, o cambiar, la fuente del video sin necesidad de cerrar y abrir de nuevo el player.

• url -> La nueva URL del recurso que queremos reproducir.
• controller -> Una instancia de la clase "AndroidExoPlayerControllerConfig" que, cómo el resto, veremos en la parte de los campos de clase.

Retorna una promesa que tenemos que controlar si queremos conocer cuando todo ha terminado de configurarse.

playPause()

Cómo su nombre indica, nos permite cambiar entre el estado "play" y el estado "pause" de nuestro reproductor.

Devolverá una promesa que tenemos que controlar para saber cuándo ha terminado de completarse la acción.

seekTo(milliseconds)

Nos permite setear en la posición que nosotros queramos la reproducción del video.

• milliseconds -> number -> La nueva posición, en milisegundos, del video que estamos reproduciendo.

Retorna una promesa que tenemos que controlar, se resolverá cuando la acción se haya completado.

seekBy(milliseconds)

Permite salta X tiempo adelante, o atrás, desde la zona en la que se encuentre actualmente la línea de reproducción.

• milliseconds -> number -> La cantidad de milisegundos que queremos saltar (negativa si queremos ir atrás).

Devuelve una promesa que tenemos que controlar si quereos conocer cuando se ha completado la acción.

getState()

Nos retorna el estado actual del reproductor.

Retorna una promesa que tenemos que controlar y con ella llegará una instancia de "AndroidExoPlayerState" que contendrá la dicha información.

showController()

Fuerza a que se muestren los controles del reproductor.

Retorna una promesa que hay que controlar que se resolverá cuando los controles hayan sido mostrados.

hideController()

A diferencia de la función anterior, fuerza a esconder los controladores del reproductor.

Retorna una promesa que tenemos que controlar y que se resolverá cuando la acción haya finalizado.

setController(controller)

Nos permite cambiar la configuración del controlador del reproductor.

• controller -> AndroidExoPlayerControllerConfig -> Este objeto también será explicado ahora en la parte de campos.

Retorna una promesa que tenemos que controlar si queremos conocer cuando se ha completado la acción.

close()

Fuerza que el reproductor se cierre, debe ser usado antes de usar la función "destroy" para limpiar el objeto.

Ahora pasamos  a ver los campos de clase:

AndroidExoPlayerParams

• url -> string -> La URL que contendrá el recurso de video que queremos reproducir.
• userAgent -> string -> Será el user agent que queremos enviar en la petición al recurso de video.
• aspectRatio -> AndroidExoPlayerAspectRatio -> Nos permite definir que relación de aspecto tendrá el reproductor. Ahora veremos los campos que tiene esta interfaz.
• hideTimeout -> number -> Nos permite definir un tiempo, en milisegundos, para que los controles del reproductor se escondan pasado dicho tiempo desde la última vez que el usuario interactuó con el reproductor.
• autoPlay -> boolean -> Si es verdadero, el video comenzará a reproducirse sin necesidad de interacción con el usuario.
• seekTo -> number -> Define, en milisegundos, en qué momento del video queremos que el reproductor comience a reproducir dicho video.
• forwardTime -> number -> La cantidad, en milisegundos, que queremos pasar hacia adelante el video. Por defecto son 1000 que equivale a un segundo.
• rewindTime -> number -> La cantidad, en milisegundos, que queremos pasar hacia atrás el video. Por defecto son 1000 que equivale a un segundo.
• audioOnly -> boolean -> Si es verdadero, reproducirá de fondo el audio del video únicamente. Recuerda que para parar la reproducción de dicho audio tendrás que acceder al reproductor de nuevo y pararlo con los controles de este. Porque cuando se utiliza esta función, y el audio está de fondo, el reproductor no responde a el uso de botones, cómo el botón de retroceder.
• subtitleUrl -> string -> Url de los subtítulos del video. Únicamente soporta los formatos .srt y .vtt y no es soportado con todos los formatos de video.
• connectTimeout -> number -> El tiempo, en milisegundos, que el sistema espera para tener una respuesta del recurso. En caso de que no se haya recibido respuesta, lanzará una excepción (0 por defecto).
• readTimeout -> number -> El tiempo, en milisegundos, que el sistema espera para poder leer el recurso. En caso de que no se haya recibido respuesta, lanzará una excepción (0 por defecto).
• writeTimeout -> number -> El tiempo, en milisegundos, que el sistema espera para poder escribir sobre el recurso. En caso de que no se haya recibido respuesta, lanzará una excepción (0 por defecto).
• pingInteval -> number -> El tiempo, en milisegundos, del intervalo que el sistema utilizará para comprobar, mediante un ping, si la conexión sigue activa (por defecto 0 o deshabilitado).
• retryCount -> number -> Número de veces que el sistema intentará recuperar la conexión con el recurso una vez se haya perdido dicha conexión (3 por defecto).
• controller -> AndroidExoPlayerControllerConfig -> Será la configuración de los controles del reproductor. Si este objeto no existe en los parámetros, los controles no serán visibles.

AndroidExoPlayerState

La verdad, esta interfaz es un poco "rara". No se sabe muy bien para que se implementó dado que únicamente lleva el mensaje dentro y podría haberse tratado cómo una cadena. No tiene campos internos y se manejará cómo un disparador.

AndroidExoPlayerControllerConfig

• streamImage -> string -> Imagen en el controller
• streamTitle -> string -> Cómo su nombre indica, el título que aparecerá en el video en la parte superior.
• streamDescription -> string -> La descripción que llevará asociada al video.
• hideProgress -> boolean -> Si es verdadero no se mostrará la barra de progreso.
• hidePosition -> boolean -> Si la barra de progreso es visible, y este campo es true, ocultará la posición actual del reproductor.
• hideDuration -> boolean -> Si es verdadero, el reproductor no mostrará la duración del video.
• controlIcons -> object -> Podrás remplazar los iconos de los controles. Los campos son los siguientes:
  • exo_rew -> string -> El icono de rebobinar.
  • exo_play -> string -> El icono del play
  • exo_pause -> string -> El icono del pause
  • exo_ffwd -> string -> El icono de adelantar

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Y ya hemos terminado geniete. Espero haberte ayudado con tus dudas. Nos vemos en el siguiente artículo y hasta entonces ¡que vaya bien!