JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<video width="800" controls id="videotag">
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
	<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
	<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
 Your browser does not support HTML5 video.
</video>
    <div><button id="backwards">BACKWARDS</button><button id="forwards">FORARDS</button></div>
      <div id="console"></div>

JavaScript

var video = document.getElementById('videotag');
var log = document.getElementById('console');
var intervalRewind;
//var startSystemTime;
//var startVideoTime;

$(video).on('play',function(){
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$(video).on('ended',function(){
    // this only happens when t=duration (not t==0)
    video.playbackRate = 1.0;
    video.currentTime = 0.0;
    clearInterval(intervalRewind);
});
$(video).on('pause',function(){
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});


$("#backwards").click(function() {
   rewind(3.0);
});

$("#forwards").click(function() {
   video.play();
});

function rewind(rewindSpeed) {    
   clearInterval(intervalRewind);
   var startSystemTime = new Date().getTime();
   var startVideoTime = video.currentTime;
   
   intervalRewind = setInterval(function(){
       video.playbackRate = 1.0;
       if(video.currentTime == 0){
           clearInterval(intervalRewind);
           video.pause();
       } else {
           var elapsed = new Date().getTime()-startSystemTime;
           log.textContent='Rewind Elapsed: '+elapsed.toFixed(3);
           video.currentTime = Math.max(startVideoTime - elapsed*rewindSpeed/1000.0, 0);
       }
   }, 30);
}