Всем привет. Подскажите пожалуйста, как можно сделать поочередное нажатие на кнопки?
Имеется цикл for
, выводил поочередно 10 input type="button"
, при нажатии на кнопку, отображается видео (на каждой кнопке свое видео, с ютюба).
Как можно на JS/JQ сделать так, что бы после окончания видео нажималась следующая по счету кнопка и запускалось следующее видео?
Заранее спасибо, за любую помощь!
Есть такое событие у видео/аудио, называется 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;
, тогда получим бесконечное воспроизведение видео.
вот такой принцип там должен быть:
<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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Делаю форму обратной связи, сам скрипт и обработчик для формы нашел на просторах интернетаВот они:
Прошу помощи связывании в последовательном связывании ajax запросов(пример ниже работает некорректно)
Как передать document , ajax запросом , и обработать его (вывести на экран , сохранить в файле , что угодно)