プレイ

Question

は、私が10本のまたは100の動画があるかもしれない動画タグ

<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> 

を持っています。それは大丈夫ですが、今私はこの制限があります：

ユーザーは同時に複数のビデオを再生できません。ビデオを再生すると、他のすべてのビデオが一時停止されます。

どうすれば実装できますか？独自のコンポーネントにビデオ要素を包むか、video要素のためのディレクティブを作成：

は、私は2つのオプションがありますHTTP GETと私は、ユーザー

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

Answer 1

ごとsessionIdを持って使用してそのデータを取得しています。以下では、例として最初のものを示します。

はここ

ビデオコンポーネント自体が、私は要素をクリックするとビデオの再生をトリガーすると仮定している次の例

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

ビデオコンポーネントは、再生を開始するよう要求します。しかし、再生を開始するタイミングを決定するために、親コンポーネントに任せます。一般に、複数の兄弟コンポーネントがあり、相互にやりとりする必要がある場合は、親コンポーネントを経由します。