在Ionic 2应用程序中显示Youtube

Question

我试图在Ionic 2应用程序中显示Youtube视频,并从JSON数据源中提取URL.

在详细信息页面上的构造函数中设置Youtube网址时,可以显示单个视频,但我需要详细信息页面才能显示JSON Feed中每个视频的视频.

以下是单个Youtube视频如何在详细信息中显示在Ionic 2中.ts和detail.html:

1

import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';

2

videoUrl: SafeResourceUrl;

constructor(private domSanitizer: DomSanitizer, public navCtrl: NavController) {
this.videoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/DuwXCFyo4-w')
}

3

<iframe width="100%" height="315" [src]="data.youtube" frameborder="0" allowfullscreen></iframe>

ios调整

<allow-navigation href="https://*youtube.com/*"/>

我需要的是一些代码调整细节.允许任何 Youtube网址？

以下是详细信息页面上的 Plunker中显示的Youtube http://plnkr.co/edit/Ar2whVFCmBAbE7fxA3nf?p=preview

我见过的一个解决方案如下,但似乎无法使其正常工作:

transform(videoId: string): SafeResourceUrl {
return this.domSanitizer.bypassSecurityTrustResourceUrl(
https://www.youtube.com/embed/${videoId});
}

Answer 1

你做错了.您不应该在离子应用程序上使用嵌入式youtube框架.

您必须使用Ionic Youtube插件

要安装它,请在命令行中转到Ionic项目:

ionic plugin add https://github.com/Glitchbone/CordovaYoutubeVideoPlayer.git
npm install --save @ionic-native/youtube-video-player

基本用法:

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

constructor(private youtube: YoutubeVideoPlayer) { }

this.youtube.openVideo('myvideoid');

当然'myvideoid'是以字符串形式传递的youtube视频ID.