Question

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

Answer 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)" width="100%" height="auto" 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();
            }
        }
    }
}

希望很清楚：）

感谢，法迪

播放视频应该停止html，角度应用程序中的所有其他视频

1 个答案: