如何在 Ionic 4 应用程序中嵌入 Youtube 视频

Question

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

现在的问题是，当我尝试在带有单个 url 的离子应用程序中使用 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 修复它，但我不知道如何将它用于包含所需链接的 objects 数组。

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>

There is one more thing we need to do in order to make this work on iOS, we need to allow navigation to YouTube urls in our config.xml file by adding the below line:

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

Answer 2

我更愿意使用友好的名称并修复错误

    <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));
    }
  }

}

如何在 Ionic 4 应用程序中嵌入 Youtube 视频

how to embed Youtube videos in a Ionic 4 app

typescript

ionic-framework

ionic4

angular-dom-sanitizer