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>
Благодаря тегу audio появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере - метод canPlayType
AJAX - инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. Как видно из аббревиатуры, основным элементом AJAX является язык программирования JavaScript. На нем-то мы и реализуем возможность загрузки контента без перезагрузки страницы.
Ключевое слово this в JavaScript, так же, как и во многих других языках программирования, используется подобно местоимению в естественном языке. Так же, как в естественном языке, с помощью местоимений мы указываем на определенного человека, животное, предмет, в JavaScript мы можем использовать this для указания на определенный объект.