Как кнопкой сделать на сайте смену ролика на следующий?

Question

[Дмитрий Щербаков]

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

Answer 1

[Антон Спирин]

Примерно так:

var videos = [
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4'
];

var nextBtn = document.getElementById("next-btn");
var videoPlayer = document.getElementById("video-player");
var currentVideo = 0;

nextBtn.addEventListener("click", function() {
  currentVideo++;
  if (currentVideo === videos.length) currentVideo = 0;
  videoPlayer.src = videos[currentVideo];
  videoPlayer.play();
});

Comments

[Дмитрий Щербаков]

Извините, я ещё совсем зелёный. Можно парой слов пояснить написанное вами?

[Антон Спирин]

dsherbakov, спрашивайте.

[Дмитрий Щербаков]

Антон Спирин, Ну как я понял, мы создаём массив с src, которые будут меняться при нажатии на кнопку. А вот остальные переменные увы я не понимаю, как и суть работы функции. Потому что почти не знаю синтаксиса языка...(

[Антон Спирин]

dsherbakov, ну если хотите написать проигрыватель, изучайте. Либо фрилансера наймите.

[Дмитрий Щербаков]

Антон Спирин, Суть работы функции мне предельно ясна, просто подскажите, как её вставить в сам код, чтобы менялся конкретно мой src для тега video, если вам, конечно, не особо трудно это пояснить

[Антон Спирин]

dsherbakov, вам надо получить свой элемент video со страницы. Для этого ему можно назначить id.
<video id="video-player"></video>
и получить как писал выше:

var videoPlayer = document.getElementById("video-player");

Так же надо добавить и получить кнопку.

[Дмитрий Щербаков]

Антон Спирин, Ох, всё на самом деле очень даже просто. Спасибо вам большое!
Вы и вправду сильно выручили)