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>
Помощь сайту
ЮMoney:
4100 1180 7209 833
Карта Сбербанк:
2202 2080 6183 7127
Перестаньте всё превращать в массивы (и работайте меньше)
Методы массивов в JavaScript: Исчерпывающий гид для разработчиков
Чистый код на JavaScript, 5 рекомендаций которые улучшат Ваш код.
Обработка ошибок в JavaScript. 10 примеров использования конструкции try...catch
Семь необходимых операторов RxJS
Зачем нам нужен TypeScript?
Как исправить ошибку «RangeError: Invalid time value» при вызове метода toISOString даты JavaScript?
Повышение уровня мастерства в JavaScript ES6
Введение в прототипы JavaScript
Сравнение методов require() и import() в JavaScript
Javascript array шпаргалка
Вырезаем изображение с помощью jQuery и PHP
Каррирование в JavaScript
Использование HTML5-элемента audio в JavaScript
Склонение окончаний в словах на Javascript
JavaScript - отслеживание изменения ориентации на мобильных устройствах
Четыре способа плавного скролла до элемента на JavaScript
Разрешаем только ввод цифр в поле input
Вывод последнего дня текущего месяца на Javascript
Понимание синхронного и асинхронного JavaScript с Async/Await
Youtube несколько видео на странице и стоп проигрывания предыдущего видео.
Семь важных функций JavaScript
Что такое ECMAScript и чем это отличается от JavaScript
Контекст выполнения функции в JavaScript
Область видимости в JavaScript
Замыкания в JavaScript
This в JavaScript
Объекты в JavaScript
Определение платформы устройства на javascript
Управление версиями Node.js с помощью nvm в Windows
Три способа понять промисы
Выделяем текущий пункт меню отдельным стилем на jQuery
Восемь типов данных и typeof
Собственные социальные share-кнопки
Как проверить с помощью jQuery и Javascript состояние checkbox
Велосипеды на Javascript и jQuery
Видео самоучитель jQuery от Envato
AJAX и JavaScript. Загрузка контента без перезагрузки страницы
Плавная кнопка "Наверх" на jQuery
Как отключить ввод текста по переключателю disabled
Как избежать повторной загрузки контента Jquery + Ajax + JSON
JavaScript and JQuery 1.8.3 решение проблемы с функцией attr() на примере генератора пароля
Возможно, вам будет интересно
Четыре способа плавного скролла до элемента на JavaScript
Разработаем следующее: после клика по ссылке будет происходить плавный скролл до элемента на JavaScript. Реализуем это без использования плагинов, сначала при помощи библиотеки jQuery, а затем на чистом JavaScript
Область видимости в JavaScript
Область видимости переменной — это часть контекста выполнения, в котором эта переменная существует. Область видимости определяет, есть ли у вас доступ к переменной в данном контексте выполнения.
Собственные социальные share-кнопки
Для шаринга в социальных сетях с громоздким исходным кодом, и сложной детальной кастомизацией, решение которое однажды написал неизвестный, но однозначно добрый программист.
AJAX и JavaScript. Загрузка контента без перезагрузки страницы
AJAX - инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. Как видно из аббревиатуры, основным элементом AJAX является язык программирования JavaScript. На нем-то мы и реализуем возможность загрузки контента без перезагрузки страницы.