меню

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>
  

Возможно, вам будет интересно

Как отключить ввод текста по переключателю disabled

В данном материале будет представлен самый простой способ включения и отключения ввода информации в текстовое поле INPUT=TEXT с помощью библиотеки jQuery и html атрибута disabled.

AJAX и JavaScript. Загрузка контента без перезагрузки страницы

AJAX - инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. Как видно из аббревиатуры, основным элементом AJAX является язык программирования JavaScript. На нем-то мы и реализуем возможность загрузки контента без перезагрузки страницы.

Youtube несколько видео на странице и стоп проигрывания предыдущего видео.

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

Разрешаем только ввод цифр в поле input

Часто возникает задача запрета ввода не цифровых значений в поле input. В этом материале разберем реализацию данного механизма на JavaScript.

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

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

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

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

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

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

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