Как разбить и воспроизвести видео по частям?

Question

[Slava]

<video class="dices__video">
      <source src="tutor.mp4" type="video/mp4">
      <source src="tutor.webm" type="video/webm">
      Your browser does not support the video tag.
</video>
<button class="btn_1">1</button>
<button class="btn_2">2</button>
<button class="btn_3">3</button>

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

Answer 1

[slava_brezovsky]

var vid = document.getElementById('dices__video'); 

document.getElementById('btn_1').addEventListener('click', () => {
  vid.currentTime = 0;
  vid.play();
});
document.getElementById('btn_2').addEventListener('click', () => {
  vid.currentTime = 10;
  vid.play();
});
document.getElementById('btn_3').addEventListener('click', () => {
  vid.currentTime = 20;
  vid.play();
});

UPD: рабочий codepen

Comments

[Slava]

Пишу

var video = $('.dices__video source').get(0);
$('.btn_2').on('click', function () {
video.currentTime = 5;
video.play();
}

Воспроизведение начинает сначала...

[slava_brezovsky]

Slava, оно запущено до этого?
Предположительно его запустить сначала нужно (кодом), потом время выставить

Посмотри этот пример, может поможет https://codepen.io/ollieRogers/pen/lfeLc/?editors=1111

[ProjectSoft]

Slava, c пятой секунды

[Slava]

А тормозить в определенном моменте так корректно?

setTimeout(() => {
    vid.pause()
  }, 10000)