Angular2，PrimeNG。带有自动播放 youtube 视频的灯箱

Question

我已将 lightbox 与 youtube 视频一起使用，如示例中所示:
我希望一旦点击链接就会开始播放视频，我已经添加了一些能够做到这一点的东西。

<p-lightbox type="content" id="pl">
    <a class="group" href="#" (click)="playVideo()">
        Watch Video
    </a>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen>    </iframe>
</p-lightbox>

现在 ts 文件:

videoSrc = "('#video')[0].src";
playVideo() {
    this.videoSrc += "&autoplay=1";
}

我没有任何错误，但它不起作用......

你能帮我写代码吗？

Answer 1

所以这解决了我在我的html中的问题我有这个代码

div *ngIf="videoData">
    <ul>
      <li id="videoList" *ngFor="let videoData of videoDatas.SopVideo"><a (click)="playVideo(videoData)" href="javascript: void(0)">{{videoData.Name|extension}}</a></li>
    </ul>
  </div>
  <div id="videoPlayer" [hidden]="hiddenVideo">
    <video width="800" id="video1" height="600" controls [src]="sopVideoUrl" [autoplay]="sopAutoPlay">
    </video>

当他们点击他们想看的视频时，我调用 playvideo 方法并传入有关该视频的所有数据。然后我将 src 和自动播放绑定(bind)到我的类型脚本中的变量。

public sopVideoUrl: String;
public sopAutoPlay = false;
playVideo(id: Sop) {
    this.hiddenVideo = false;
    this.sopAutoPlay = true;

    this.deleteButton = false;
    this.strVideoName = id.Name;
    this.sopVideoUrl = `./dist/videos/${this.strVideoName}`;

这会自动播放我的视频并获取用户点击的正确视频。