Question

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

在详细信息页面的构造函数中设置Youtube网址时，可以显示各个视频，但我需要详细信息页面才能显示JSON Feed中每个视频的视频。

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

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 tweak

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

我需要的是一些代码调整细节。允许任何 Youtube网址？

以下是详情页面上 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

你做错了。您不应该在离子应用程序上使用嵌入式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%;
    }
}

在Ionic 2应用程序中显示Youtube

2 个答案: