Búsqueda de sitios web

angular - Capturar eventos de videos incrustados de YouTube en una app de ionic 3

En mi aplicación Ionic he listado videos incrustados de YouTube de la siguiente manera:

<iframe allowfullscreen frameborder="0" height="200" width="100%" [src]="video.url">
      </iframe>

la url del video se genera a partir de la función siguiente

generateVideoUrl(videoId) {
    return this.sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/" + videoId + "?rel=0&amp;showinfo=0");
  }

Funciona bien, pero también quiero capturar eventos como que un video de YouTube se pause, termine o comience a reproducirse, etc. Intenté importar esto http://brandly.github.io/angular-youtube-embed/#/ y usarlo con mi app de ionic3, pero da el error 'angular no está definido'. Ionic sí usa Angular, pero puede ser que lo use de manera diferente, por lo que se genera el error de 'angular no está definido'.

Gracias por tu ayuda.

Respuesta #1

No necesitas usar marcos de Youtube incrustados en tu aplicación Ionic. Puedes usar el plugin nativo de reproductor de video de Youtube.

Reproducir videos de YouTube en un reproductor de video nativo en Android e iOS

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

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

.ts

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

constructor(private youtube: YoutubeVideoPlayer) { }

this.youtube.openVideo('myvideoid');

En app.module.ts, también "importa" YoutubeVideoPlayer y agrégalo en la sección de "providers".

Este es el repositorio de Git. Por favor, revise este enlace para más instrucciones, incluyendo cómo agregar una clave de API de YouTube.

Artículos relacionados