меню

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>
  

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

Семь необходимых операторов RxJS

Как front-end разработчик вы знаете, что управление асинхронными данными - это не легкая задача. Иногда кажется, что нужна целая команда клоунов, чтобы держать все эти мячи в воздухе! Но в этом и заключается сила библиотеки RxJS. Она помогает легко манипулировать потоками асинхронных данных.

Повышение уровня мастерства в JavaScript ES6

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

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

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

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

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

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

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

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

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

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

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

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