меню

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 and JQuery 1.8.3 решение проблемы с функцией attr() на примере генератора пароля

Совсем недавно решил написать генератор пароля с возможностью просмотра генерированного пароля под звездочками. Для работы выбрал JQuery 1.8.3 и нативный JavaScript. При написании самого скрипта столкнулся с проблемой в JQuery 1.8.3 с функцией attr().

Использование HTML5-элемента audio в JavaScript

Благодаря тегу audio появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере - метод canPlayType

Вывод последнего дня текущего месяца на Javascript

Попалась интересная задачка, на баннере нужно было выводить «Акция действует до (тут последний день месяца)», решил сделать это на Javascript, ну чтоб не лазить каждый раз в код для правок, вот что получилось

Собственные социальные share-кнопки

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

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту