javascript - Ionic 2 uygulamasında Youtube'u gösterme

Bir Ionic 2 uygulaması içinde Youtube videolarını görüntülemeye çalışıyorum, URL’ler ise bir JSON veri beslemesinden çekiliyor.

Ayrıntı sayfasında Youtube URL'si yapıcıda ayarlandığında bireysel videolar görüntülenebilir, ancak ben ayrıntı sayfasının JSON beslemesindeki her bir video için videoları görüntülemesini istiyorum.

İşte bir bireysel Youtube videosunun detail.ts ve detail.html içinde Ionic 2'de nasıl görüntülenebileceği:

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 ince ayarı

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

İhtiyacım olan, herhangi bir Youtube URL'sine izin vermek için detail.ts dosyasında bazı kod ayarlamaları yapmak mı?

İşte detay sayfasında bir Plunker içinde gösterilen Youtube http://plnkr.co/edit/Ar2whVFCmBAbE7fxA3nf?p=preview

Gördüğüm bir çözüm aşağıda, ancak çalıştırmayı başaramıyorum:

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

Cevap #1

Bunu yanlış yapıyorsun. Ionic uygulamana gömülü YouTube çerçeveleri kullanmamalısın.

Ionic Youtube Eklentisini kullanmalısınız

Kurmak için, komut satırında Ionic projenize gidin:

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

Temel Kullanım:

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

constructor(private youtube: YoutubeVideoPlayer) { }

this.youtube.openVideo('myvideoid');

Elbette 'myvideoid', bir dize olarak geçirilen YouTube video kimliğinizdir.

Cevap #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>

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

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

}

CSS (Duyarlı Video Gömme İçin):

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

İlgili makaleler