javascript - Displaying Youtube within an Ionic 2 app - Stack Overflow

admin管理员组

文章数量:1287626

I am trying to display Youtube videos within an Ionic 2 application, with the URLs pulled in from a JSON data feed.

Individual videos can be displayed when the Youtube url is set in the constructor on the detail page, but I need the detail page to display videos for each of the videos in the JSON feed.

Here is how an individual Youtube video is able to display in Ionic 2 within detail.ts and 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('')
}

3

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

ios tweak

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

What I need is some code tweaking in detail.ts to allow any Youtube url?

Here is the Youtube displayed in a Plunker on the detail page

One solution I have seen is below, but can't seem to get it working:

transform(videoId: string): SafeResourceUrl {
return this.domSanitizer.bypassSecurityTrustResourceUrl(
/${videoId});
}

I am trying to display Youtube videos within an Ionic 2 application, with the URLs pulled in from a JSON data feed.

Individual videos can be displayed when the Youtube url is set in the constructor on the detail page, but I need the detail page to display videos for each of the videos in the JSON feed.

Here is how an individual Youtube video is able to display in Ionic 2 within detail.ts and 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./embed/DuwXCFyo4-w')
}

3

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

ios tweak

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

What I need is some code tweaking in detail.ts to allow any Youtube url?

Here is the Youtube displayed in a Plunker on the detail page http://plnkr.co/edit/Ar2whVFCmBAbE7fxA3nf?p=preview

One solution I have seen is below, but can't seem to get it working:

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

• javascript
• angular
• typescript
• ionic2

Share Improve this question Follow edited Mar 27, 2017 at 20:48 me9867 asked Mar 15, 2017 at 10:21 me9867me9867 1,59755 gold badges2626 silver badges5454 bronze badges 1

• Have you seen this? stackoverflow./questions/39059601/… – ipinak Commented Mar 15, 2017 at 10:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +50

You are doing it wrong. You shouldn't be using embedded youtube frames on your ionic app.

You must use the Ionic Youtube Plugin

To install it, go to your Ionic project in the mand line:

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

Basic Usage:

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

constructor(private youtube: YoutubeVideoPlayer) { }

this.youtube.openVideo('myvideoid');

Of course 'myvideoid' is your youtube video ID passed as a string.

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>

TypeScript:

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./embed/' + id + '?rel=0&showinfo=0';
        return this.sanitizer.bypassSecurityTrustResourceUrl(dangerousVideoUrl);
    }

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

}

CSS (For Responsive Video Embedding):

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

本文标签： javascriptDisplaying Youtube within an Ionic 2 appStack Overflow