@prolina

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

Нужно реализовать воспроизведение видео только тогда, когда доскроллили до него (Ангуляр 2+). В проекте используется youtube api
<section class="al-video-section">
	<div class="al-video-wrapper">
		<div class="al-video-wrapper-overlay">
			<div  id="player" style="margin-top: -400px; border: none"></div>
		</div>
	</div>
</section>


import {AfterViewInit, Component, OnInit} from '@angular/core';

declare global {
	interface Window {
		YT: {
			Player(id: string, options: object): void,
		};

		onYouTubeIframeAPIReady?(): void;
	}
}

@Component({
	selector: 'al-video-section',
	templateUrl: './video-section.component.html',
	styleUrls: ['./video-section.component.less'],
})
export class VideoSectionComponent implements OnInit, AfterViewInit {
	public player: HTMLIFrameElement;
	constructor() {
	}

	// tslint:disable-next-line:no-any
	public onPlayerReady(event: any): void {
		event.target.playVideo();
	}

	// tslint:disable-next-line:no-any
	public onPlayerStateChange(event: any): void {
		if (event.target.getPlayerState() === 0) {
			event.target.seekTo(3, false);
		}
	}
	public ngAfterViewInit(): void {
		const playerApiScript: HTMLScriptElement = document.createElement('script');
		playerApiScript.type = 'text/javascript';
		playerApiScript.src = 'https://www.youtube.com/iframe_api';
		document.body.appendChild(playerApiScript);
	}

	public ngOnInit(): void {
		window.onYouTubeIframeAPIReady = () => {
			this.player = new window.YT.Player('player', {
				videoId: 'videoID',
				height: '1300px',
				width: '100%',
				events: {
					onReady: event => {
						if (window.pageYOffset >=
							event.target.a.parentNode.offsetParent.offsetTop - 200) {
							this.onPlayerReady(event);
						}
					},
					onStateChange: event => {
						this.onPlayerStateChange(event);
					},
				},
				playerVars: {
					controls: 0,
					modestbranding: 1,
					rel: 0,
					showInfo: 0,
					mute: 1,
					loop: 1,
					playlist: 'videoID',
					enablejsapi: 1,
				},
			});
		};
	}
}

Сейчас видео воспроизводится только, если при обновлении странички сразу же опуститься вниз, где видео расположено.
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ответы на вопрос 1
dollar
@dollar
Автовоспроизведение видео - зло.
Дайте пользователю самому решать, в какой момент начать просмотр.
Кнопки "Play" будет достаточно.

spoiler
Это не является ответом на вопрос формально. Но зато является реальным ответом на вопрос по существу. Ведь вряд ли автор хочет отпугивать пользователей агрессивной подачей контента, понижать конверсии и т.д. А если действительно хочет, то, пожалуй, лучше отдельно это объяснить в вопросе.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы