播放 HTML 5 视频并阻止其他视频

Question

我有一个使用HTML5的页面中显示的视频列表，但我想要的是当我播放一个视频时，其他视频应该停止/暂停。

我正在使用 Angular 2 TypeScript。

<video controls (click)="toggleVideo()" #videoPlayer>
<source class="embed-responsive-item" src="{{ video.url }}" type="video/mp4" />
Browser not supported
</video>

@ViewChild('videoPlayer') videoplayer: any;
toggleVideo(event: any) {
this.videoplayer.nativeElement.play();
}

Answer 1

使用@ViewChildren装饰器查询页面上的所有视频。单击时，暂停所有视频并播放单击的视频(就像您已经在做的那样(。

要查询所有视频，请使用选择器'video'创建一个虚拟指令。然后使用此指令作为参数进行@ViewChildren并确保读取ElementRef而不是指令实例(这将是默认值(。

@ViewChildren(VideoDirective, {read: ElementRef})
public videos: QueryList<ElementRef>