Тема: Youtube start/stop
Показать сообщение отдельно
  #7 (permalink)  
Старый 22.04.2019, 12:02
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,304

Сообщение от mak200
Как бы изменить скрипт (при этом он очевидно упростится) чтобы это работало для стандартного способа встраивания:
Можно добавить атрибут data-assign, чтобы указать к какой переменной привязать проигрыватель... а всё остальное автоматизировать!


<iframe data-assign="player" width="560" height="315" src="https://www.youtube.com/embed/oRSijEW_cDM" frameborder="0" allowfullscreen></iframe>
<form>
	<input type="button" value="Пауза" onclick="player.pauseVideo()">
	<input type="button" value="Продолжить" onclick="player.playVideo()">
</form>

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

const youtubeAPIReady = new Promise(function(resolve) {
	window.onYouTubeIframeAPIReady = resolve;
});

for(const player of document.querySelectorAll('iframe[src*="youtube.com"][src*="embed"]')) {
	const url = new URL(player.src);
	url.searchParams.set("enablejsapi", "1");
	player.src = url.href;
	
	youtubeAPIReady.then(function() {
		window[player.dataset.assign] = getYouTubePlayer(player);
	});
}

function getYouTubePlayer(element) {
	return new YT.Player(element, {
		events: {
			onReady: onPlayerReady,
			onStateChange: onPlayerStateChange
		}
	});

	function onPlayerReady(event) {
		event.target.playVideo();
	}

	var done = false;
	
	function onPlayerStateChange(event) {
		if (event.data === YT.PlayerState.PLAYING && !done) {
			done = true;
		}
	}
}

</script>

Последний раз редактировалось Malleys, 22.04.2019 в 16:30.
Ответить с цитированием