如何在離子2中插入視頻列表？

我正在編寫一個關於離子2的移動應用程序。我的應用程序的一個頁面是一個新聞主題，以一種Facebook時尚，顯示一些消息，照片，視頻......我的問題是，我無法顯示視頻。我已經看到很多關於這個問題的答案，但它對我來說並不奏效（他們可能是離子1的解決方案）。如何在離子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」標籤試圖爲好，它也不起作用。在我的打字稿代碼：

VideoList: Array<any>; 

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

凡URL是一個鏈接，我用它來得到一個JSON數組，其中包含的視頻列表中顯示（以及其他的東西，我的問題不相關）。出於隱私原因，我只是不想在這裏寫下真實的網址。

我很確定我的代碼是好的，因爲它適用於其他類型的數據，不適用於視頻。我想我需要將這些視頻列入白名單或「消毒」，但我無法做到這一點。任何人都知道如何解決我的問題？

謝謝

來源

2017-05-23 ntyss

你可以發佈你的錯誤日誌嗎？ – hrdkisback

你用'[src]'試過了嗎？ –

嘗試定義一個'baseUrl'並且像這樣改變'src = {{baseUrl + Video.Link}} – hrdkisback

所以，我在一段時間後發現了soution。其實並不難，只需要知道如何去做。在打字稿文件的開頭，你需要導入「消毒」：

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

請注意，您不需要將其聲明爲在app.module.ts文件的供應商。

雖然你需要將其添加在構造函數中：

constructor(private sanitizer: DomSanitizer)

然後在某處你的.ts文件：

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

當然，你需要beforehands申報財產videoUrl。然後，你只需要調用videoUrl在您的HTML：

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

和它的作品！無論如何，感謝您的幫助。

來源

2017-05-26 08:22:32 ntyss

如何在離子2中插入視頻列表？

回答

相關問題