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

I Have multiple videos in single page of Angular Application

I want to play video while scrolling when video element come to element, and pause other videos.

i.e

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