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視頻播放器

回答

相關問題