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

尝试一下

library(rvest)
library(tidyverse)


scr<-function(n){
  url<-paste0("http://www.cvk.gov.ua/pls/vnd2014/WP040?PT001F01=910&pf7331=",n)

 df=read_html(url)%>%
    html_table(fill = TRUE)%>%
    .[[8]]%>%
    data.frame()
 colnames(df)<-df[1,] 
 df<-df[-1,]
 }

res<-11:13%>%
  map_df(.,scr)
write.csv2(res,"odin_tyr.csv")

并在您的HTML中

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

为了使这项工作继续进行，我们还需要做另外一件事 iOS，我们需要允许在config.xml中导航到YouTube网址文件添加以下行：

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

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

}

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

2 个答案: