如何在打字稿中更改 iframe src 属性答案

【问题标题】：how to change iframe src attribute in typescript如何在打字稿中更改 iframe src 属性
【发布时间】：2017-04-27 21:41:07
【问题描述】：

我正在创建一个 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 函数时，它就会将视频URL 更新为变量this.videoUrl。到目前为止一切都很好。但是当我在 iframe 中使用这个变量 videoUrl 时。它不会加载该视频。

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

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

【问题讨论】：

标签： javascript video iframe youtube ionic2

【解决方案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>

【讨论】：