JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

HTML

<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>

JavaScript

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);
    }