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>

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

1 个答案: