同时播放一个视频

Question

我有视频标签

<div *ngFor="let video of videos">
 <video width="320" height="240" controls>
   <source [src]="video.url" type="video/mp4">
   Your browser does not support the video tag.
 </video>
</div>

可能有 10 或 100 个视频。它工作正常，但现在我有这个限制：

用户不能同时播放超过 1 个视频。播放视频应暂停所有其他视频。

我该如何实现呢？

我正在使用 http get 获取该数据，每个用户都有sessionId

this._http.get('videos?sessionId=' + sessionId).subscribe(x => { this.videos = x; });

Answer 1

有两种选择：将视频元素包装到自己的组件中或为视频元素创建指令。下面我以第一个为例。

使用以下示例中的逻辑扩展您的视图组件

@Component({
  selector: 'view',
  template: `
    <div *ngFor="let video of videos">
      <my-video [src]="video.url" (requestPlayback)="onVideoRequestPlayback($event)"></my-video>
    </div>
  `
})
export class MyViewComponent {
  @ViewChildren(MyVideoComponent) videoComponents: QueryList<MyVideoComponent>;

  onVideoRequestPlayback(targetVideo: MyVideoComponent) {
    this.videoComponents.forEach(video => video.pause());
    targetVideo.play();
  }
}

视频组件本身

在这里，我假设单击元素会触发视频播放。如果您有不同的方式来触发播放，则需要调整此解决方案。

@Component({
  selector: 'my-video',
  template: `
    <video #video width="320" height="240" controls>
      <source [src]="src" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  `
})
export class MyVideoComponent {
  @Output() requestPlayback: EventEmitter<MyVideoComponent> = new EventEmitter<MyVideoComponent>();
  @ViewChild('video') videoElement: ElementRef;
  @Input() src: string;

  @HostListener('click', ['$event']) onClick(event: Event) {
    if (this.videoElement.nativeElement.paused) {
      this.requestPlayback.emit(this);
    }
    event.preventDefault();
  }

  pause() {
    this.videoElement.nativeElement.pause();
  }

  play() {
    this.videoElement.nativeElement.play();
  }
}

视频组件请求开始播放。但是，我将它留给父组件来决定何时开始播放。一般来说，当你有多个同级组件并且它们需要相互交互时，你会通过父组件。