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