Проигрывать ютуб видео только тогда, когда до него доскроллили?

от
prokoding.ru > Angular > Проигрывать ютуб видео только тогда, когда до него доскроллили?

Для проигрывания ютуб-видео только при доскролливании до него в Angular, вы можете использовать элемент <iframe> для встраивания видео на вашей странице. Когда пользователь доскролливает до нужного места на странице, вы можете создать и встроить <iframe> с заданным видео.

Вот шаги, которые нужно выполнить, чтобы реализовать это:

1. Включите скрипт YouTube API в вашем проекте. Вы можете сделать это, добавив следующую строку в <head> вашего index.html файла:

<script src="https://www.youtube.com/iframe_api"></script>

2. Создайте компонент Angular, который будет отображать видео и управлять его проигрыванием. Можно назвать его YoutubePlayerComponent.

ng generate component YoutubePlayer

3. В YoutubePlayerComponent определите свойства, которые будут отвечать за идентификатор видео и зоны, до которой нужно доскролливать для автоматического воспроизведения.

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-youtube-player',
  templateUrl: './youtube-player.component.html',
  styleUrls: ['./youtube-player.component.css']
})
export class YoutubePlayerComponent implements OnInit, OnDestroy {
  @ViewChild('playerContainer', { static: true }) playerContainer: ElementRef;

  videoId = 'VIDEO_ID';
  scrollZone = 200;
  player: YT.Player;

  ngOnInit() {
    window.addEventListener('scroll', this.checkScrollZone);
  }

  ngOnDestroy() {
    window.removeEventListener('scroll', this.checkScrollZone);
  }

  checkScrollZone = () => {
    const { top } = this.playerContainer.nativeElement.getBoundingClientRect();
    const windowHeight = window.innerHeight;

    if (top < windowHeight - +this.scrollZone) {
      this.playVideo();
    } else {
      this.pauseVideo();
    }
  }

  playVideo() {
    if (this.player) {
      this.player.playVideo();
    }
  }

  pauseVideo() {
    if (this.player) {
      this.player.pauseVideo();
    }
  }
}

4. В youtube-player.component.html разместите элемент <div> для встроенного видео и зону прокрутки, которую необходимо достичь для автоматического воспроизведения.

<div #playerContainer>
  <div id="player"></div>
</div>

5. В youtube-player.component.css добавьте стили для контейнера видеоплеера.

#player {
  width: 100%;
  height: 400px;
}

6. Инициализируйте YouTube Player API в index.html вашего проекта.

<body>
  <app-root></app-root>
  <script>
    function onYouTubeIframeAPIReady() {
      const player = new YT.Player('player', {
        videoId: 'VIDEO_ID',
        events: {
          // События, которые можно добавить, чтобы получить информацию о состоянии плеера
        }
      });
     }
   </script>
</body>

7. Используйте YoutubePlayerComponent в нужной части вашего приложения.

<app-youtube-player></app-youtube-player>

В результате, видео будет проигрываться, когда пользователь достигнет определенной зоны доскролливания. Когда пользователь покидает эту зону, видео будет приостановлено.