javascript - 在 Ionic 2 应用程序中显示 Youtube

Question

我正在尝试在 Ionic 2 应用程序中显示 Youtube 视频，其中的 URL 从 JSON 数据提要中提取。

在详细信息页面的构造函数中设置 Youtube url 时可以显示单个视频，但我需要详细信息页面来显示 JSON 提要中每个视频的视频。

以下是单个 Youtube 视频如何在 detail.ts 和 detail.html 中显示在 Ionic 2 中:

1

import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';

2

videoUrl: SafeResourceUrl;

constructor(private domSanitizer: DomSanitizer, public navCtrl: NavController) {
this.videoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/DuwXCFyo4-w')
}

3

<iframe width="100%" height="315" [src]="data.youtube" frameborder="0" allowfullscreen></iframe>

ios 调整

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

我需要在 detail.ts 中调整一些代码以允许 任何 Youtube url？

这是在详情页面的 Plunker 中显示的 Youtube http://plnkr.co/edit/Ar2whVFCmBAbE7fxA3nf?p=preview

下面是我见过的一种解决方案，但似乎无法正常工作:

transform(videoId: string): SafeResourceUrl {
return this.domSanitizer.bypassSecurityTrustResourceUrl(
https://www.youtube.com/embed/${videoId});
}

Answer 1

你做错了。你不应该在你的 ionic 应用程序上使用嵌入式 youtube 框架。

您必须使用 Ionic Youtube Plugin

要安装它，请在命令行中转到您的 Ionic 项目:

ionic plugin add https://github.com/Glitchbone/CordovaYoutubeVideoPlayer.git
npm install --save @ionic-native/youtube-video-player

基本用法:

import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player';

constructor(private youtube: YoutubeVideoPlayer) { }

this.youtube.openVideo('myvideoid');

当然，“myvideoid”是您作为字符串传递的 YouTube 视频 ID。