如何将YouTube视频嵌入Ionic 4应用程序

Question

我正在尝试开发一个离子型应用程序，该应用程序将作为pwa部署，我希望将其中嵌入YouTube视频并将其显示在网格中。我的Cloud Firestore对象提供了视频链接，其标题和简短描述。

现在的问题是，当我尝试在具有单个网址的离子应用程序中使用iframe时：

<iframe width="560" height="315" src="https://www.youtube.com/embed/6kqe2ICmTxc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

那么它就可以了，但是当我将它绑定到数据库的Video URL时，它就不起作用了。控制台显示URL不是安全的URL。

现在，我知道可以使用DomSanitizer对其进行修复，但是我不知道如何将其用于包含所需链接的对象数组。

Answer 1

尝试这个，

    trustedVideoUrl: SafeResourceUrl;
    array_of_objects = [{vid_link:"https://youtube.com/lalla"},{vid_link:"https://youtube.com/lalla"}]


    constructor(public navCtrl: NavController,
                private domSanitizer: DomSanitizer) {}

    ionViewWillEnter(): void {
      for(let i of array_of_objects){
        i.trustedVideoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(i.vid_link);
      }
    }  

在您的HTML中，

 <iframe *ngFor="let i of array_of_objects" width="100%" height="315" [src]="i.trustedVideoUrl" frameborder="0" allowfullscreen></iframe>

为了在iOS上实现此功能，我们还需要做一件事，我们需要通过添加以下行来允许在config.xml文件中导航至YouTube网址：

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