抓住youtube在离子3应用程序中嵌入视频事件

Question

在我的离子应用程序中,我列出了youtube嵌入视频如下:

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

video.url是从以下函数生成的

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

它工作正常,但我也想捕获像youtube视频暂停,结束或开始播放等事件.我试图导入这个http://brandly.github.io/angular-youtube-embed/#/并使用它与我的ionic3应用程序,但这给出错误'角度未定义'.Ionic确实使用了角度,但可能会使用不同的角度来生成角度未定义的误差.

谢谢你的帮助.

Answer 1

您不需要在 ionic 应用程序上使用嵌入式 YouTube 框架。您可以使用本机 Youtube 视频播放器插件。

在 Android 和 iOS 上的本机视频播放器中播放 Youtube 视频

ionic cordova 插件添加 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');

在 app.module.ts 中，还“导入”YoutubeVideoPlayer 并将其添加到“providers”部分。

这是Git 存储库。请查看此链接以获取更多说明，包括添加 YouTube API 密钥。