Youtube in einer Ionic 2 App anzeigen

Question

Ich versuche, Youtube-Videos in einer Ionic 2-Anwendung anzuzeigen, wobei die URLs aus einem JSON-Datenfeed stammen.

Einzelne Videos können angezeigt werden, wenn die Youtube-URL im Konstruktor auf der Detailseite festgelegt ist, aber ich brauche die Detailseite, um Videos für jedes der Videos im JSON-Feed anzuzeigen.

Hier ist, wie ein einzelne Youtube Video in der Lage ist, Ionic 2 innerhalb detail.ts und detail.html anzuzeigen:

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

videoUrl: SafeResourceUrl; 

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

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

ios zwicken

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

Was ich brauche einige Code Zwicken in detail.ts ist jede Youtube-URL zu ermöglichen?

Hier ist die Youtube in einem Plunker angezeigt auf der Detailseite http://plnkr.co/edit/Ar2whVFCmBAbE7fxA3nf?p=preview

Eine Lösung, die ich unten gesehen habe, aber kann nicht scheinen, um es arbeiten:

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

Answer 1

Sie tun es falsch. Sie sollten keine eingebetteten Youtube-Frames in Ihrer ionischen App verwenden.

müssen Sie verwenden die Ionic Youtube Plugin

es zu installieren, gehen Sie zu Ihrem Ionic Projekt in der Befehlszeile:

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

Grundsätzliche Verwendung:

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

constructor(private youtube: YoutubeVideoPlayer) { } 

this.youtube.openVideo('myvideoid'); 

Natürlich 'myvideoid' ist Ihre Youtube-Video-ID wurde als Zeichenfolge übergeben.