как встраивать Youtube видео в приложение Ionic 4 - PullRequest
Новая
       40

как встраивать Youtube видео в приложение Ionic 4

0 голосов
/ 08 октября 2018

Я пытаюсь разработать ионное приложение, которое я буду развертывать как pwa, в которое я хочу встроить Youtube видео и отображать их в виде сетки.Ссылки на видео, их заголовки и краткие описания предоставляются объектами Cloud Firestore.

Теперь проблема в том, что когда я пытаюсь использовать iframe в ионном приложении с одним URL-адресом, например: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/6kqe2ICmTxc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

, он работает, но когда я связываю его с моей базой данных Видео URLтогда это не работает.Консоль показывает, что URL не является безопасным URL.

Теперь я знаю, что это можно исправить с помощью DomSanitizer, но я не знаю, как использовать его для массива объектов, который содержит необходимые ссылки.

1 Ответ

0 голосов
/ 08 октября 2018

Попробуйте, 

    trustedVideoUrl: SafeResourceUrl;
    array_of_objects = [{vid_link:"https://youtube.com/lalla"},{vid_link:"https://youtube.com/lalla"}]


    constructor(public navCtrl: NavController,
                private domSanitizer: DomSanitizer) {}

    ionViewWillEnter(): void {
      for(let i of array_of_objects){
        i.trustedVideoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(i.vid_link);
      }
    }

и в вашем HTML, 

 <iframe *ngFor="let i of array_of_objects" width="100%" height="315" [src]="i.trustedVideoUrl" frameborder="0" allowfullscreen></iframe>

Еще одна вещь, которую нам нужно сделать, чтобы эта работа работала на iOS,нам нужно разрешить переход к URL-адресам YouTube в нашем файле config.xml, добавив следующую строку: 

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