在 Ionic 2 应用程序中显示 Youtube

Question

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

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

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

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。

Answer 2

HTML

<div class="videowrapper">
    <iframe [src]="updateVideoUrl(video_id)" frameborder="0" allowfullscreen
        width="640" height="550"
    ></iframe>
</div>
<button (click)="watch_on_youtube(video_id)" ion-button small color="danger">
    <ion-icon name="logo-youtube"></ion-icon>
    Or Watch On Youtube
</button>

打字稿：

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player';

@Component({
    selector: 'page-video-single',
    templateUrl: 'video-single.html',
})
export class VideoSinglePage {

    video_id: any;

    constructor(
        public sanitizer: DomSanitizer,
        public youtube: YoutubeVideoPlayer
    ) {
        this.video_id = 'your_video_id';
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad VideoSinglePage');
    }

    updateVideoUrl(id: string) {
        // Appending an ID to a YouTube URL is safe.
        // Always make sure to construct SafeValue objects as
        // close as possible to the input data, so
        // that it's easier to check if the value is safe.
        let dangerousVideoUrl = 'https://www.youtube.com/embed/' + id + '?rel=0&showinfo=0';
        return this.sanitizer.bypassSecurityTrustResourceUrl(dangerousVideoUrl);
    }

    watch_on_youtube( video_id ) {
        this.youtube.openVideo( video_id );
    }

}

CSS（用于响应式视频嵌入）：

page-video-single {
    .videowrapper {
        float: none;
        clear: both;
        width: 100%;
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
        background-color: #000000;
    }
    .videowrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}