Ionic 2アプリ内にYoutubeを表示

Question

Ionic 2アプリケーション内にYoutubeビデオを表示しようとしていますが、URLはJSONデータフィードから取得しています。

詳細ページのコンストラクタでYoutube URLが設定されている場合、個別の動画を表示できますが、JSONフィードの各動画の動画を表示するには詳細ページが必要です。ここ

は、個々のYoutubeビデオをdetail.tsとdetail.html内イオン2に表示することができる方法である：

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私は必要なの任意の YouTubeのURLを許可するdetail.tsでいくつかのコードの微調整である

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

微調整？

はYouTubeで私が見た http://plnkr.co/edit/Ar2whVFCmBAbE7fxA3nf?p=preview

一つの解決策は以下の通りです詳細ページにPlunkerに表示されているが、それは働いて得るように見えることはできません。

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

Answer 1

あなたは間違っています。あなたはあなたのイオンアプリに埋め込まれたYouTubeフレームを使用すべきではありません。

あなたは、コマンドラインであなたイオンプロジェクトに行き、それをインストールするにはIonic Youtube Plugin

を使用する必要があります。

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は文字列として渡されます。