Play только один видео одновременно

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 видео. он работает нормально, но теперь у меня есть это ограничение:

Пользователи не могут одновременно воспроизводить более одного видео. Воспроизведение видео должно приостанавливать все остальные видео.

Как это реализовать?

Я получаю эти данные, используя 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(); 
    } 
} 

Видеокомпонент запрашивает воспроизведение для запуска. Однако я оставляю его до родительского компонента, чтобы решить, когда начать воспроизведение. В общем случае, когда у вас есть несколько родственных компонентов, и они должны взаимодействовать друг с другом, вы проходите через родительский компонент.