HTML5 Video: воспроизводите несколько временных отметок одного и того же видео источника один за другим

Question

У меня есть данные, т.е. время воспроизведения, подобное этому "time_stamp": [ "2-5", "6-10" ], и я хочу воспроизвести один и тот же источник в зависимости от диапазона клипа, предоставленного один за другим.Например, если я играю видео, сначала видео начинается с 2 секунды и останавливается через 5 секунд.затем снова начинается с 6 сек.и остановитесь на 10 секунд для того же источника.

Здесь я использовал свой атрибут data-play-interval="2-5,6-10" в своей кнопке и откуда я отправляю и обрабатываю значения внутри функции jumpTime(start, stop).

Надеюсь, я правильно объяснил о своей проблеме.

Заранее спасибо.

var vid = $("#vid").get(0);


$(document).on("click", "#start-play", function() {
  var clip_play_time = $(this).data("play-interval");
  var new_play_time = clip_play_time.split(",");


  //alert(new_play_time);
  segments = [];
  for (var i = 0; i < new_play_time.length; i++) {
    segments.push({
      "from": (new_play_time[i].split("-"))[0],
      "to": (new_play_time[i].split("-"))[1]
    });
  }



  if (vid.paused) {
    vid.load();
    jumpTime(segments[0].from, segments[0].to);

  } else
    vid.pause();

});


function jumpTime(start, stop) {
  vid.currentTime = start;
  vid.play()

  vid.addEventListener("timeupdate", function() {
    if (vid.currentTime >= stop) {
      vid.pause();
    }
  }, false);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button id="start-play" data-play-interval="2-5,6-10">
Play 2-5,6-10
</button>
</div>
<br>


<video width="320" height="240" controls="" id="vid">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>