Question

我在离子2上编写了一个移动应用程序。我的应用程序的一个页面是一个新闻主题，以一种Facebook的方式，显示一些消息，照片，视频...我的问题是，我可以＆＃39 ; t显示视频。我已经看到了很多问题的答案，但它对我没有用（它们可能是离子1的解决方案）。

所以，我想要显示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>

请注意，我尝试使用＆＃34; iframe＆＃34;标签也是如此，它也不起作用。在我的TypeScript代码中：

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数组的链接，包含要显示的视频列表（以及与我的问题无关的其他内容）。出于隐私原因，我只是不想在这里写真实的URL。

我非常确定我的代码是好的，因为它适用于其他类型的数据，而不适用于视频。我想我需要将白名单或＆＃34;消毒＆＃34;那些视频，但我没有设法做到这一点。任何人都知道如何解决我的问题？

由于

Answer 1

所以，我在一段时间后找到了这个消息。实际上并不那么难，只需要知道如何去做。在TypeScript文件的开头，您需要导入＆＃34;清洁剂＆＃34;：

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

当然，您需要事先声明属性videoUrl。然后，您只需要在html中调用videoUrl：

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

它有效！无论如何，谢谢你的帮助。

如何在离子2中插入视频列表？

1 个答案: