Поочередное нажатие на кнопки JS

299
25 апреля 2017, 08:03

Всем привет. Подскажите пожалуйста, как можно сделать поочередное нажатие на кнопки?

Имеется цикл for, выводил поочередно 10 input type="button", при нажатии на кнопку, отображается видео (на каждой кнопке свое видео, с ютюба).

Как можно на JS/JQ сделать так, что бы после окончания видео нажималась следующая по счету кнопка и запускалось следующее видео?

Заранее спасибо, за любую помощь!

Answer 1

Есть такое событие у видео/аудио, называется HTML Audio/Video DOM ended Event, видимо оно как раз вам и пригодится.

К примеру, есть у вас такой код:

<video width="320" height="240">
  <source src="***" type="video/mp4">
</video>

Список наших батонов сделаем немного обобщенным, через класс input-video, это нам пригодится в дальнейшем.

В JavaScript напишем обработку:

var btns = document.getElementsByClassName('input-video'); // наши кнопки
var currentIndex = 0; // текущий индекс из массива кнопок
$(document).ready(function(){
    $('video').on('ended',function(){
       if(currentIndex < btns.length){
         btns[currentIndex].click();
         currentIndex = currentIndex + 1; // currentIndex++
       }
    });
  });

Если видео отображаются в одном блоке video и по нажатию на кнопку будет либо меняться видео, либо запускаться заново - будет работать.

Пример имитации нажатия кнопок:

var btns = document.getElementsByClassName('input-video');  
 
$(document).ready(function() { 
  for (var index = 0; index < btns.length; index++) { 
    btns[index].click(); 
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" class="input-video" onclick="alert(1);" /> 
<input type="button" class="input-video" onclick="alert(2);" /> 
<input type="button" class="input-video" onclick="alert(3);" />

В первоначальном коде нажатие кнопки будет происходить после завершения видео. Причем индекс кнопки будет увеличиваться на единицу, для перехода к следующей. Можно, к примеру, на последнюю кнопку, в обработчик ее нажатия прописать присвоение currentIndex = 0;, тогда получим бесконечное воспроизведение видео.

Answer 2

вот такой принцип там должен быть:

<video width="200" height="200" controls id="myVideo1" onended="document.getElementById('myVideo2').play()"> 
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
Your browser does not support the video tag. 
</video>  
<video width="200" height="200" controls id="myVideo2" onended="document.getElementById('myVideo1').play()"> 
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
Your browser does not support the video tag. 
</video> 

READ ALSO
Проблема со скриптом для формы обратной связи

Проблема со скриптом для формы обратной связи

Делаю форму обратной связи, сам скрипт и обработчик для формы нашел на просторах интернетаВот они:

234
Последовательные ajax запросы

Последовательные ajax запросы

Прошу помощи связывании в последовательном связывании ajax запросов(пример ниже работает некорректно)

277
Передача ajax , обьекта

Передача ajax , обьекта

Как передать document , ajax запросом , и обработать его (вывести на экран , сохранить в файле , что угодно)

243