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

视频组件请求开始播放。但是，我将其留给父组件来决定何时开始播放。通常，当您有多个兄弟组件并且需要彼此交互时，您将浏览父组件。

同时只播放一个视频

1 个答案: