4

我正在尝试开发一个离子应用程序，我将把它部署为 pwa，我想在其中嵌入 Youtube 视频并将它们显示在网格中。视频链接、标题和简要说明由我的 Cloud Firestore 对象提供。

现在的问题是，当我尝试在具有单个 url 的 ionic 应用程序中使用 iframe 时，例如：

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

然后它正在工作，但是当我将它绑定到我的数据库视频 URL 时，它就不起作用了。控制台显示 URL 不是安全 URL。

现在，我知道它可以通过使用 DomSanitizer 来修复，但我不知道如何将它用于包含所需链接的对象数组。

4

2 回答 2

13

尝试这个，

    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 url：

<allow-navigation href="https://*youtube.com/*"/>
于 2018-10-08T12:12:13.350 回答
0

我会更喜欢使用友好的名字并修复错误

    <iframe
      *ngFor="let trustedLink of trustedVideoUrlArray"
      width="100%"
      height="315"
      [src]="trustedLink"
      frameborder="0"
      allowfullscreen
    ></iframe>

import { Component, OnInit } from '@angular/core';
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-help',
  templateUrl: './help.page.html',
  styleUrls: ['./help.page.scss'],
})
export class HelpPage implements OnInit {
  trustedVideoUrlArray: SafeResourceUrl[] = [];
  youtubeUrlsArray = [
    {
      link: "https://www.youtube.com/embed/ytLZo1RBS5U"
    },
    {
      link: "https://www.youtube.com/embed/ytLZo1RBS5U"
    }
  ]

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

  ngOnInit() {
    for (let item of this.youtubeUrlsArray) {
      this.trustedVideoUrlArray.push(this.domSanitizer.bypassSecurityTrustResourceUrl(item.link));
    }
  }

}
于 2021-03-24T17:16:31.607 回答