Меню ×
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>
	

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

Замыкание — это функция, объявленная внутри другой функции и имеющая доступ к переменным внешней (вмещающей) функции. Простыми словами замыкание — это функция, описанная внутри другой функции.

Как избежать повторной загрузки контента Jquery + Ajax + JSON. Для работы Front - End'а доступны были по ТЗ только таковы инструменты Java Script, JQuery, Ajax, JSON и конечно же HTML + CSS.

В этой статье вы узнаете о том, что такое синхронное и асинхронное программирование в JavaScript и как применяя эти знания, работать с Async/Await

наверх