Как сделать чтобы при нажатии на 1 кнопку, видео менялись по очереди?

Question

[syeta_126r]

Здравствуйте, такой вопрос, у менять есть 1 кнопка, при нажатии на которую нужно чтобы видео менялись по очереди, тобишь с самого начала на сайте играет 1 видео, нажимаем на кнопку, видео меняется на 2, еще раз на неё нажимаем видео меняется на 3, после 3 видео чтобы снова менялось на 1 видео
Пытался сделать, но получилось сделать только чтобы видео менялись рандомно, особо в js не силен, учусь только
Много что перепробывал, перерыл интернет и везде только если несколько кнопок получается менять видео по порядку, но с одной кнопкой информации не нашел

Мой JS код с рандом видео

const nextvideo = document.getElementById('nextvideo');

nextvideo.addEventListener('click', function () {
    var vids = ["../assets/img/web_1.mp4",
                "../assets/img/web_2.mp4",
                "../assets/img/web_3.mp4"
            ];
    var randomVideo = vids[Math.floor(Math.random()*vids.length)];
    var videoElement = document.getElementById("video");
    videoElement.src = randomVideo;
})

Comments

[Александр Васильев]

Библиотека слайдера -> видео по слайдам-> зациклить прокрутку -> оставить только next кнопку для прокрутки.

Answer 1

[Вадим]

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

// Кнопка
const nextvideo = document.getElementById('nextvideo');
// Видео элемент
const videoElement = document.getElementById("video");
// Массив путей
const vids = [
  "../assets/img/web_1.mp4",
  "../assets/img/web_2.mp4",
  "../assets/img/web_3.mp4"
];
// Счётчик
let idx = 0;
// Устанавливаем первый урл как первое видео.
videoElement.src = vids[0]
// Совмещаем всё вместе в обработчике клик
nextvideo.addEventListener('click', function () {
  // Цикличность счётчика:
  // Если следующее значение выходит за длину массива минус 1 (выражено знаком "меньше"), 
  // то обнуляем, в противном случае увеличиваем на 1.
  idx = idx + 1 < vids.length ? idx + 1 : 0; 
  const nextVideoUrl = vids[idx];
  videoElement.src = nextVideoUrl
})