Angular 2视频播放器

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

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>

我该如何将它绑定到点击事件？

来源

2016-12-08 funkadelic

由于您使用的是角度2，因此我建议在iframe上使用html5视频元素，而角度2无论如何都需要html5。

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

<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; 
}

然后你挂钩的URL视频元素这样

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

来源

2016-12-08 23:56:09 Joatin

Angular 2视频播放器

回答

相关问题