Меню ×
Youtube несколько видео на странице и стоп проигрывания предыдущего видео.

Youtube несколько видео на странице и стоп проигрывания предыдущего видео.

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего?
На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

	
<div class="mVideos"></div>

<script>
	// Массив с id видео
	var videos = [{id: "GEPIsgsnAuE"}, {id: "ymXnKNbv5Es"}, {id: "dN_Km7zyDVo"}, {id: "d55fuDZy-q8"}];

	var tag = document.createElement('script');
	var players = [];

	tag.src = "https://www.youtube.com/iframe_api";
	
	var firstScriptTag = document.getElementsByTagName('script')[0];
	
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	var pVideo = document.querySelector(".mVideos");

	for(var i = 0; videos.length > i; i++) {
		// Создаем дочерние элементы с id
		var newDiv = document.createElement("div");
		newDiv.setAttribute("id", videos[i].id);
		
		// Добавление элементов видео в родительских контейнер        
		pVideo.appendChild(newDiv);

		item = document.querySelector("#"+videos[i].id).getAttribute("id");
		var player;
		players.push(item);
	}

	function onYouTubeIframeAPIReady() {
		for(var k = 0; players.length > k; k++) {
			players[k] = new YT.Player(players[k], {
								height: '360',
								width: '640',
								videoId: players[k],
								events: {
									'onReady': onPlayerReady,
									'onStateChange': onPlayerStateChange
							}
						});
		}
	}

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


	function onPlayerStateChange(event) {
		if (event.data == YT.PlayerState.PLAYING) {
				var temp = event.target.getVideoUrl();
				for (var i = 0; i < players.length; i++) {
						if (players[i].getVideoUrl() != temp) players[i].stopVideo();
				}
		}
	}
</script>
	

Похожие материалы

Для шаринга в социальных сетях с громоздким исходным кодом, и сложной детальной кастомизацией, решение которое однажды написал неизвестный, но однозначно добрый программист.

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

Принципы, о которых пойдет речь, являются фундаментальными для этого языка и будут оставаться таковыми независимо от того, какой фреймворк вы используете. Более того, понимание этих концепций окажется бесценным бонусом, когда вы решите изучить или использовать какую-либо популярную библиотеку или фреймворк из арсенала JavaScript.

наверх