2017-05-23 4 views
1

私はionic 2でモバイルアプリをコーディングしています。私のアプリのページの1つはFacebookのファッションのニューススレッドです。いくつかのメッセージ、写真、ビデオを表示しています...私の問題は、私は表示できませんビデオ。私はすでにその問題に対する多くの答えを見てきましたが、それは私のためには機能しませんでした(おそらくイオン1の解決策でした)。ionic 2に動画のリストを挿入するにはどうすればよいですか?

私はYoutubeビデオを表示したいと思います。私はHTMLで次のコードを記述します。

<ion-item *ngFor="let Video of VideoList"> 
    <video src="http://www.youtube.com/embed/{{Video.Link}}" frameborder="0" width="560" height="300"></video> 
</ion-item> 

は私も「IFRAME」タグを試みたが、それはまた、動作しませんのでご注意ください。 そして、私の活字体のコードで:URLを表示するには、ビデオのリストを含む、私はJSONの配列を取得するために使用するリンク、(だけでなく、私の問題に関連していない他のもの)がある

VideoList: Array<any>; 

constructor(public navCtrl: NavController, public http:Http, public navParams: NavParams) { 
    http.get(URL).toPromise().then((response) => { 
    this.VideoList= response.json(); 
    }); 
} 

。プライバシーの理由から私はちょうどここに実際のURLを書いたくありませんでした。

私のコードは他の種類のデータでも機能するので、コードはいいと思っています。私はそれらのビデオをホワイトリストに登録する必要があると思いますが、それをすることはできません。誰でも私の問題を解決する方法を知っていますか?

ありがとうございました

+0

エラーログを投稿できますか? – hrdkisback

+0

あなたは '[src]'で試しましたか? –

+0

'baseUrl'を定義してこのように変更しようとしました' src = {{baseUrl + Video.Link}} ' – hrdkisback

答えて

0

だから、しばらくしてからsoutionが見つかりました。それは実際にそれほど難しくはなく、単にそれを行う方法を知る必要があります。あなたはapp.module.tsファイル内のプロバイダとしてそれを宣言する必要はありません

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

注:typescriptファイルの開始時に は、あなたが「消毒剤」をインポートする必要があります。

あなたは、コンストラクタでそれを追加する必要がありますが:次に

constructor(private sanitizer: DomSanitizer) 

どこか.TS内のファイル:あなたはプロパティvideoUrlを宣言するbeforehandsが必要もちろん

this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/your_Youtube_key'); 

<iframe width="560" height="315" [src]="videoUrl"></iframe> 

そして、それは動作します。そして、あなたは自分のhtmlでvideoUrlを呼び出す必要があります!とにかく助けてくれてありがとう。

関連する問題