Header Ads Widget

Ticker

6/recent/ticker-posts

Reproducción de videos con el complemento Ionic 5 y Cordova Video Player

 En este tutorial, veremos cómo reproducir videos en nuestras aplicaciones Ionic 5. Vamos a utilizar el complemento de reproductor de video Ionic 5 y Cordova, así que comencemos.

Generando un nuevo proyecto Ionic 5

Abra su símbolo del sistema o terminal y escriba lo siguiente para generar un nuevo proyecto de Ionic 5:

ionic start ionic-video-player blank 
Estoy usando Ionic CLI v3 +, si está usando la versión anterior de CLI, debe agregar --v2 para crear un nuevo proyecto Ionic 2 / Ionic 3.
También hay algunos cambios en la forma en que usamos otros comandos de Ionic CLI, por lo que si ve algún comando cambiado y todavía está usando el CLI anterior, simplemente use los equivalentes o, mejor aún, actualice a CLI v3.

Agregar el reproductor de video Cordova

A continuación, navegue dentro de su nuevo proyecto generado y agregue el complemento de reproductor de video Cordova:

cd ionic-video-player 
ionic cordova plugin add https://github.com/moust/cordova-plugin-videoplayer --save

Agregar el complemento Ionic Native 5 para el reproductor de video

A continuación, instale el complemento Ionic Native 5

npm install --save @ionic-native/video-player

Abra su proyecto con su editor de texto preferido o IDE. Estoy usando Visual Studio Code

code .

Uso del complemento de reproductor de video Ionic 5

A continuación, debemos agregar el complemento del reproductor de video Ionic a la lista de proveedores, así que abra src / app / app.module.ts y luego agregue:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { VideoPlayer } from '@ionic-native/video-player';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
declarations: [
    MyApp,
    HomePage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    VideoPlayer,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Ahora debería poder inyectar VideoPlayer en cualquier componente y comenzar a usarlo.

Abra src / pages / home / home.ts, luego importe VideoPlayer e inyéctelo:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { VideoPlayer } from '@ionic-native/video-player';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController,private videoPlayer : VideoPlayer) {

}

} 

Después de inyectar videoPlayer en el constructor de componentes, ahora podemos usar diferentes API de este complemento para reproducir o detener la reproducción de videos.

Agreguemos dos métodos, uno para reproducir un video y otro para detener la reproducción del video:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { VideoPlayer ,VideoOptions } from '@ionic-native/video-player';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
videoOpts : VideoOptions ;
constructor(public navCtrl: NavController,private videoPlayer : VideoPlayer) {

}

public playVideo(){
    this.videoOpts = {volume : 1.0};
    this.videoPlayer.play('file:///android_asset/www/movie.mp4').then(() => {
    console.log('video completed');
    }).catch(err => {
    console.log(err);
    });    
}
public stopPlayingVideo(){
    this.videoPlayer.close();
}

}

Puede reproducir un video de su sistema de archivos o una URL de video en línea.

Ahora abra src / pages / home / home.html y agregue dos botones para reproducir y deje de reproducir nuestro video:

<ion-header>
<ion-navbar>
    <ion-title>
    Video Player Demo
    </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button (click)="playVideo()">Play Video</button>
    <button ion-button (click)="stopPlayingVideo()">Stop playing Video</button>
</ion-content>

Conclusión

Esta es una demostración simple que le muestra cómo usar el complemento de reproductor de video Cordova con Ionic 5, Angular e Ionic Native 5 para reproducir videos dentro de sus aplicaciones pero, por supuesto, puede desarrollarlo más para crear una aplicación móvil completa para Android. .

Publicar un comentario

0 Comentarios