Как организовать автоматическое изменение видео при нажатии на одну кнопку?

Question

Мавлюда

javascript

Как организовать автоматическое изменение видео при нажатии на одну кнопку?

Как сделать так, чтобы при нажатии на одну кнопку видео менялись поочередно, начиная с первого, затем второго, третьего и снова на первое? Мой текущий JavaScript код использует рандомный выбор видео при нажатии на кнопку, но мне нужно, чтобы видео менялись по порядку с одной кнопки.

28 декабря 2023 г. 18:17

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для организации автоматического изменения видео по порядку при нажатии на одну кнопку, вам необходимо хранить массив ссылок на видео и индекс текущего видео. При каждом нажатии на кнопку, вы будете увеличивать индекс на 1 и выводить видео с этим индексом. Если индекс выходит за пределы массива, вы вернетесь к первому видео.

Ниже приведен пример кода, который выполняет указанное:

```html
<!DOCTYPE html>
<html>
<body>

<button onclick="changeVideo()">Изменить видео</button>
<video id="myVideo" width="320" height="240" controls>
  <source id="videoSource" src="" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
var videos = [
  "video1.mp4",
  "video2.mp4",
  "video3.mp4"
];
var index = 0;

function changeVideo() {
  if (index >= videos.length) {
    index = 0;
  }
  
  var video = document.getElementById("myVideo");
  var source = document.getElementById("videoSource");
  
  source.setAttribute("src", videos[index]);
  video.load();
  video.play();
  
  index++;
}
</script>

</body>
</html>
```

В этом примере у вас должно быть три видео: "video1.mp4", "video2.mp4" и "video3.mp4". При каждом нажатии на кнопку "Изменить видео" будет выводиться следующее видео в порядке массива. Если видео достигнет последнего элемента в массиве, оно вернется к первому видео.

Answer 2

Чтобы решить любую задачу нужно начать с разбития её на последовательность простых шагов. 
 1) Сделать кнопку 
 2) Сделать массив адресов видео 
 3) Сделать цикличный счётчик от 0 до длина массива из п2 минус один, т.к. индексация в массивах с нуля. 
 4) Всё совместить - доставать урл на видео по индексу-значению счетчика.