Question

我正在创建一个ionic2应用程序。在这个应用程序中，我正在调用youtube API来从我的频道中获取视频。响应来的时候，它包含了我频道的所有视频ID。我想制作一个视频列表，当用户点击任何视频时，它将在列表上方创建的iframe上播放。到目前为止我的代码看起来像这样。

            <ion-item *ngFor="let video of videosListItems"> 
                 <button ion-button (click)="playVideo($event, video)">{{video.snippet.title}}</button>
            </ion-item>

上面的代码会生成一个视频列表。当用户点击任何列表项时，调用playVideo函数。

playVideo(event, video){
  let playableUrl = 'https://www.youtube.com/watch?v='+video.id.videoId;
  this.videoUrl = playableUrl;
}

videoUrl是存在playVideo函数的类的数据成员。现在，只要调用了playVideo函数，它就会将视频网址更新为变量this.videoUrl。到目前为止一切都很好。但是当我在iframe中使用这个变量videoUrl时。它确实加载了该视频。

    <ion-card class="youtube">
        <iframe width="560" height="315" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>
    </ion-card>

我该怎么做？任何帮助将不胜感激。

Answer 1

尝试一下：

playVideo(event, video){
      let playableUrl = 'https://www.youtube.com/watch?v='+video.id.videoId;
      this.videoUrl = playableUrl;
     (<HTMLIFrameElement>document.getElementById('videoIframe')).src = this.videoUrl;
}

在html中：

 <ion-card class="youtube">
        <iframe width="560" height="315" id="videoIframe" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>
    </ion-card>

如何在typescript

1 个答案: