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?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo puedes reproducir videos desde de tu aplicación hecha en Ionic.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización 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.

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.

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

Algo más que quizás te interesa

Mira... conseguir más descargas para tu app significa ganar más dinero con ella. Pues bien, para ayudarte con esto, hemos creado esta herramienta para que evalues, optimices y mejores tu logo de manera constante y consigas aumentar tus descargas. A parte, también podrás investigar los logos de la competencia. No te espoileo más, entra en el enlace.

Y ya solo queda despedirse hasta el siguiente artículo. Hasta entoces ¡que vaya bien!