Question

我是新的Angular 2，我正在尝试构建视频播放列表。我以表格格式显示我最喜欢的视频，当我点击一行时，我想播放视频。现在我点击

传递youtube链接的视频类

export class PlaylistComponent {
    onSelect(vid:Video){
    //play video
    };
}

视频对象有

export class Video{
    id:number;
    title:string;
    videoCode:string;
    desc:string;

    constructor(id:number,title:string, videoCode:string,desc:string){
            this.id = id;
            this.title = title;
            this.videoCode = videoCode;
            this.desc = desc;
        }
    }

我点击了视频代码。我想使用类似的东西：

<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

</body>

如何将此绑定到click事件？

Answer 1

由于你使用的是角度2，我建议在iframe上使用html5视频元素，而角度2则需要html5。

要绑定到click事件，您可以使用角度模板绑定。

<div>
  <div class="row" *ngFor="let video of videos" (click)="onSelect(video)>
    {{video.title}}
  </div>
</div>

要选择视频，您可以使用onSelect方法

执行此类操作

public onSelect(video: Video): void {
  this.activeVideoUrl = video.url;
}

然后你将网址连接到像这样的视频元素

<video>
  <source [src]="activeVideoUrl"></source>
</video>

Angular 2视频播放器

1 个答案: