Как сделать чтобы при нажатии на 1 кнопку, видео менялись по очереди?
Здравствуйте, такой вопрос, у менять есть 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; }) |
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; })
Дополнительно:
Библиотека слайдера -> видео по слайдам-> зациклить прокрутку -> оставить только next кнопку для прокрутки.
Чтобы решить любую задачу нужно начать с разбития её на последовательность простых шагов.
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 }) |
// Кнопка 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 })
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы реализовать смену видео по нажатию на одну кнопку, можно воспользоваться JavaScript. Вот пример кода, который позволит вам это сделать:
```html
const videos = ['video1.mp4', 'video2.mp4', 'video3.mp4'];
let currentVideo = 0;
function changeVideo() {
const videoPlayer = document.getElementById('videoPlayer');
videoPlayer.src = videos[currentVideo];
currentVideo = (currentVideo + 1) % videos.length;
}
```
В этом примере у нас есть видео элемент `
Просто добавьте все ваши видео файлы в массив `videos` и убедитесь, что они доступны по указанным путям. При нажатии на кнопку видео будут меняться поочередно.