在Angular 9中滚动时在单个页面上一个接一个地播放多个视频

Question

我在Angular应用程序的一个页面中有多个视频

我想在视频元素到达元素时播放视频，并暂停其他视频。

即

<div class="video_content left">
<span style="font-weight:bold">1</span>
<video  width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">2</span>
<video  width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">3</span>
<video  width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">4</span>
<video  width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>

Answer 1

@HostListener('window:scroll', ['$event'])
scroll(event: any) {
console.log(window.pageYOffset);
var demo_video: any = document.getElementById("demo_video");
var how_to_video: any = document.getElementById("how_to_video");
if (window.pageYOffset > 400 && window.pageYOffset < 1000) {
demo_video.muted = true;
demo_video.pause();
how_to_video.play();
}
}
ngOnInit(): void {
var demo_video: any = document.getElementById("demo_video");
demo_video.muted = false;
demo_video.play();
window.addEventListener('scroll', this.scroll, true);
}