Cómo agregar el reproductor de video de YouTube en Ionic 5 Angular

En este tutorial de implementación de video de YouTube de Ionic 5, compartiremos cómo reproducir videos de YouTube en la aplicación Native Ionic Angular utilizando Cordova y el complemento de reproductor de video Ionic Native YouTube.https://imasdk.googleapis.com/js/core/bridge3.504.0_en.html#goog_1617297477

Hoy en día, no se puede vivir sin YouTube, y es un popular sitio de transmisión de video donde puede disfrutar de cualquier tipo de contenido de video. Pero, ¿sabes que también puedes reproducir videos de YouTube en la aplicación Ionic usando la identificación de video de YouTube?

Bueno, lo escuchaste bien; Este tutorial rápido, paso a paso, describe cómo reproducir videos de YouTube en una aplicación nativa de Ionic. Sin más preámbulos, comencemos a implementar el reproductor de YouTube en la aplicación Ionic.

Empezar

Asegúrese de haber instalado correctamente la última versión de Ionic CLI en su máquina de desarrollo antes de comenzar.

npm install -g @ionic/cli

Ahora estás listo para crear el nuevo proyecto Ionic Angular:

ionic start ionic-youtube-player blank --type=angular

Después de instalar la aplicación, ingrese a la carpeta del proyecto:

cd ionic-youtube-player

Agregar complemento de reproductor de video de YouTube

Abra el tipo de terminal que se muestra a continuación con los comandos en el símbolo del sistema y comience a instalar el paquete de reproductor de video nativo de YouTube cordova e Ionic. Esto le permite integrar YouTube Video Player en la aplicación Ionic sin esfuerzo de manera simple.

ionic cordova plugin add cordova-plugin-youtube-video-player

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

A continuación, abra el archivo config.xml y agregue la propiedad de preferencia al archivo. Asegúrate de pasar la API de YouTube a la propiedad value.

<preference name="YouTubeDataApiKey" value="[YOUR YOUTUBE API]" />

Importar YoutubeVideoPlayer en el módulo de la aplicación

Abra el archivo app.module.ts, en la sección superior importe YoutubeVideoPlayer desde ‘@ionic-native/youtube-video-player/ngx’ y agregue YoutubeVideoPlayer a la matriz de proveedores.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player/ngx';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    YoutubeVideoPlayer,
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Agregar reproductor de video de YouTube en Ionic

En la página HTML iónica, cree un botón con el atributo ion-button, defina el evento click y enlace la función personalizada, que abre el reproductor de vídeo de YouTube e invoca el vídeo en la vista de la aplicación.

Actualizar archivo home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic YouTube Video Player
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  
  <ion-button (click)="openYouTubeVedio()">Start Video</ion-button>

</ion-content>

La API youtubeVideoPlayer proporciona los métodos útiles que necesita para registrarse en el método constructor, y le permitirá reproducir los videos utilizando una función personalizada.

Actualizar archivo home.page.ts:

import { Component } from '@angular/core';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  constructor(
    private youTube: YoutubeVideoPlayer
    ) {}

  openYouTubeVedio(){
    this.youTube.openVideo('youtube-video-id');
  }  

}

Inicio proyecto Ionic

Eventualmente podemos reproducir el video de YouTube en la aplicación iónica, pero debe agregar la plataforma antes de eso.

ionic cordova platform add ios

ionic cordova platform add android

A continuación, genere la compilación ejecutable:

ionic cordova build ios

ionic cordova build android

Por último, ejecute la aplicación en el dispositivo o emulador:

ionic cordova run ios -l

ionic cordova run android -l

Conclusión

Creamos un reproductor de video fundamental que reproduce videos de YouTube con la ayuda de la identificación de video de YouTube junto con el complemento del reproductor de video Ionic Native y Cordova. Le dará una gran idea sobre el meollo del reproductor de video avanzado en una aplicación del mundo real. Así que esto fue todo, en última instancia, el ejemplo del reproductor de YouTube Ionic 5 se completa; asegúrate de compartirlo con los demás.