JSFiddle - React, Tailwind, and code Playground

by Galen Gidman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css">
<video id="video" src="http://lab.galengidman.com/desk.mp4" preload></video>
 
<div id="scrubber" class="range-slider" data-slider data-options="start: 0; end: 2000;">
  <span class="range-slider-handle" role="slider" tabindex="0"></span>
  <span class="range-slider-active-segment"></span>
  <input id="scrubber-val" type="hidden">
</div>
    
<button id="play">Play</button>

CSS

body {
    padding: 1em;
}

video {
    max-width: 100%;
}

JavaScript

$(document).foundation();

var video        = document.getElementById('video');
var $scrubber    = $('#scrubber');
var $scrubberVal = $('#scrubber-val');
var $play        = $('#play');

function changePos(pos) {
    video.currentTime = video.duration / 2000 * pos;
    video.pause();
}

function playFromBeginning() {
    video.currentTime = 0;
    video.play();
}

$scrubber.on('change.fndtn.slider', function() {
    changePos($scrubberVal.val());
});

$play.on('click', function() {
    playFromBeginning();
});