如何在Ionic 2 Framework上的Angular 2中从Youtube频道获取视频?

时间:2017-02-27 05:17:12

标签: android angular ionic-framework youtube ionic2

我是Angular 2和Ionic 2的新手,所以我不知道如何为我的Angular 2安卓应用程序获取和显示视频。

.component.js文件

export class HomePage implements OnInit {
 private videoListArr = [];
 private title = [];
 private objArr;
 baseUrl: string = 'https://www.youtube.com/embed/';
 private homes = [];
 constructor(private sanitizer: DomSanitizer, public navCtrl: NavController, private _homeService: HomeService) { }
 ngOnInit() {
 this._homeService.getHome()
  .subscribe(response =>this.homes.push(JSON.parse(JSON.stringify(response))),
  error => alert(error),
  () => {
    this.objArr = this.homes;
    this.objArr[0].items.forEach(element => {
      var url = element.snippet.resourceId.videoId;
      this.title.push(element.snippet.title);
      this.videoListArr.push({
        videoUrl: this.sanitizer.bypassSecurityTrustResourceUrl(this.baseUrl + url),
        videoTitle: element.snippet.title,
        videoDesc: element.snippet.description
      });

    });

  }
  )
 }

  }

1 个答案:

答案 0 :(得分:1)

您可以使用<iframe>在您的应用中嵌入YouTube视频。

说出您的YouTube网址为:https://www.youtube.com/watch?v=a6KGPBflhiM

您的嵌入代码将是:

<iframe width="560" height="315" src="http://www.youtube.com/embed/a6KGPBflhiM" frameborder="0" allowfullscreen></iframe>

注意:您必须像我一样更换网址。

另外,在发布任何问题之前,请先进行基本搜索。 :)