Hiển thị Youtube trong ứng dụng Ionic 2

Question

Tôi đang cố gắng hiển thị video Youtube trong ứng dụng Ionic 2, với URL được lấy từ nguồn cấp dữ liệu JSON.

Video riêng lẻ có thể được hiển thị khi url Youtube được đặt trong hàm tạo trên trang chi tiết, nhưng tôi cần trang chi tiết để hiển thị video cho từng video trong nguồn cấp JSON.

Sau đây là cách một video Youtube cá nhân là khả năng hiển thị trong Ionic 2 trong detail.ts và detail.html:

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

videoUrl: SafeResourceUrl; 

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

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

ios tinh chỉnh

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

Những gì tôi cần là một số tinh chỉnh mã trong detail.ts để cho phép bất kỳ Youtube url?

Đây là Youtube hiển thị trong một Plunker trên trang chi tiết http://plnkr.co/edit/Ar2whVFCmBAbE7fxA3nf?p=preview

Một giải pháp tôi đã thấy là dưới đây, nhưng dường như không thể làm cho nó làm việc:

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

Answer 1

Bạn đang làm sai. Bạn không nên sử dụng khung youtube được nhúng trên ứng dụng ionic của mình.

Bạn phải sử dụng Ionic Youtube Plugin

Để cài đặt nó, hãy vào dự án Ionic của bạn trong dòng lệnh:

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

Cách sử dụng cơ bản:

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

constructor(private youtube: YoutubeVideoPlayer) { } 

this.youtube.openVideo('myvideoid'); 

Dĩ nhiên 'myvideoid' là ID video youtube của bạn được chuyển thành chuỗi.