播放视频应停止 html、角度应用程序中的所有其他视频答案

【问题标题】：playing a video should stop all other videos in html, angular application播放视频应停止 html、角度应用程序中的所有其他视频
【发布时间】：2017-09-23 15:34:58
【问题描述】：

我有一个 Angular 应用程序，正在加载一些带有 html5 视频标签的视频，我一次只需要播放一个视频。

【问题讨论】：

标签： html angular html5-video

【解决方案1】：

这是我在 Angular2 应用程序中的做法。

在组件 HTML 中，绑定一个事件 (playing)="onPlayingVideo($event)"，以便稍后在类组件中处理逻辑。

    `<div *ngFor='let video of videoList; let i=index' class="video">
        <div class="video_player">
            <video (playing)="onPlayingVideo($event)" controls>
                <source src="{{video.url}}" type="video/mp4">
            </video>
        </div>
    </div>

在组件类中：定义一个属性来保存当前播放的视频currentPlayingVideo: HTMLVideoElement;。并定义您的事件侦听器方法，在我的情况下您将处理逻辑，我称之为onPlayingVideo(event)。简单地说，每次用户播放新视频时，只需暂停旧视频并播放新选择的视频。所以你的类应该如下所示：

        export class VideoListComponent implements OnInit {
            
            currentPlayingVideo: HTMLVideoElement;
            
            constructor() { }
            ngOnInit() { }
            
            onPlayingVideo(event) {
                event.preventDefault();
                // play the first video that is chosen by the user
                if (this.currentPlayingVideo === undefined) {
                    this.currentPlayingVideo = event.target;
                    this.currentPlayingVideo.play();
                } else {
                // if the user plays a new video, pause the last 
                // one and play the new one
                    if (event.target !== this.currentPlayingVideo) {
                        this.currentPlayingVideo.pause();
                        this.currentPlayingVideo = event.target;
                        this.currentPlayingVideo.play();
                    }
                }
            }
        }

希望这很清楚:)

谢谢，法迪

【讨论】：