Video Player Ionic | ¡Reproduce vídeo en tus apps desde ya!

¿Quieres reproducir videos dentro de tu aplicación hecha en Ionic? O, quizás ya sabes cómo se hace con el componente Video Player Ionic, pero te falta conocer algún campo o función para hacerlo funcionar cómo tu quieres ¿verdad?

Si has respondido que sí, que es lo que estás buscando, tranquilo. No eres el primero, ni serás el último, que pasa por aquí a intentar dar respuesta a estas preguntas.

Te digo más, hasta los que somos un poco más expertos, tenemos que necesidad de acudir a estos artículo cuando vamos a utilizar algo que no hemos usado nunca, o que llevamos mucho sin hacerlo.

Por si no me conoces aún, mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo te voy a enseñar cómo puedes mostrar videos dentro de tu aplicación hecha en Ionic.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

Instalación de Video Player Ionic

Pues cómo en cada componente desacoplado del core del sistema, tenemos que hacer una instalación previa. Para ello vamos a utilizar las dos siguientes líneas de código:

 

$ ionic cordova plugin add https://github.com/moust/cordova-plugin-videoplayer.git 
$ npm install @awesome-cordova-plugins/video-player

 

La primera instalará el plugin en nuestra app para la comunicación nativa con el dispositivo. La segunda instalará el código necesario para que nos podamos comunicar desde el nuestro con el plugin.

 

Configuración de Video Player para Ionic

En esta parte vamos a hacer un inciso. Si estás usando Angular 4 o posterior, y utilizas el módulo NGX de las librerías, no es necesario que agregues a los providers de tus módulos la clase.

De lo contrario, sí que es necesario, y se hace de la siguiente manera:

 

...

import { VideoPlayer } from "@awesome-cordova-plugins/video-player/ngx"

...

providers: [
...,
VideoPlayer,
...
]

...

 

Nota: Recuerda que es recomendable no incluir en el AppModule de nuestra app nuestros servicios. Solo en caso de que sepamos con certeza de que se van a usar en la mayoría de los componentes de nuestra app. Es mucho mejor incluirlo solo en los modules de los componentes que sepamos que lo vayan a usar.

 

Plataformas soportadas

Las plataformas soportadas son bastante escasas. Es más, menos de las que estás pensando.

• Android

Si, solo está disponible para Android.

 

Cómo se usa Video Player con Ejemplo

La verdad que no tiene gran misterio. Es una clase que tiene poca chicha, pero primero vamos a ver un ejemplo:

 

import { VideoPlayer } from '@awesome-cordova-plugins/video-player/ngx';

constructor(private videoPlayer: VideoPlayer) { }

...

// Reproducimos el vídeo

this.videoPlayer.play('file:///android_asset/www/movie.mp4').then(() => {

 console.log('video completed');

}).catch(err => {

 console.log(err);

});

 

1. En primer lugar, importamos la clase “VideoPlayer” en nuestro componente.
2. Posteriormente inyectamos una instancia de la clase a través del constructor.
3. Y para terminar llamamos al método “play” que recibirá una cadena con el directorio donde se encuentra el archivo de vídeo que queremos reproducir.
4. Controlamos la promesa que se resolverá cuando el vídeo haya terminado de reproducirse y listo. Ya está hecha la implementación del ejemplo.

Cómo has podido ver, algo súper, pero súper, sencillito de usar e implementar.

 

Métodos y funciones de Video Player

Ahora le toca el turno a las funciones y métodos de la clase. La verdad que son poquitas, por no decir que son dos. Recuerda que son las funciones propias y no del padre. Las de los padres, en caso de que los tenga, las veremos cuando le toque el turno a este.

play(fileUrl, options)

• Esta función es la que se encarga de poner a reproducir el vídeo.
• Parámetros:
  • fileUrl -> string -> Será la ruta local de donde está el archivo que queremos reproducir.
  • options -> VideoOptions -> Será la interface que contiene la configuración que le queremos dar al reproductor. Veremos más abajo los campos.
• Retorna una promesa que tenemos que controlar. Esta promesa se resolverá cuando haya terminado de reproducirse el vídeo.

 

close()

• Esta función hace que el reproductor deje de reproducir inmediatamente.

 

Interfaces de clase

En este caso, solo hemos visto una, y es la siguiente:

 

VideoOptions

• Esta será la interface que recibe cómo parámetro el método “play” para decirle cuales son los parámetros con los que tiene que reproducir el vídeo.
• Campos:
  • volumen -> number -> Será el volumen inicial con el que se empezará a reproducir el vídeo. En un rango desde el 0,0 hasta el 1,0. Siendo, por ejemplo, 0,30 un 30% del volumen.
  • scallingMode -> number -> El sistema nos pone a disposición dos constantes para tal fin:
    • SCALE_TO_FIT: Que se escalará hasta que rellene todo el espacio disponible.
    • SCALE_TO_FIT_WITH_CROPPING: Que se escalará hasta que rellene el contenido. Lo hará aun teniendo que cortar el vídeo.

 

Más contenidos del curso

 

Y el tutorial en vídeo, cómo siempre 🙂

Pues eso ha sido todo por hoy. Ya solo me queda despedirme y decirte que nos vemos en el siguiente artículo. Hasta entonces, que vaya bien…