0

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

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

2 ответа 2

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;, тогда получим бесконечное воспроизведение видео.

1
  • 1
    Ставлю класс вашему ответу, но по-моему его можно было бы сократить до одного слова - onended :D Commented 5 июл. 2019 в 0:15
0

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

<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> 

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.