Блог

У меня есть несколько видео на одной странице приложения 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>
 

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