Rewind Video Effect

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>

#controls{
display:flex;
justify-content:center;
}

#controls button{
margin:0 2px;
}

#box{
display:inline-block;
position:absolute;
left:50%;
transform:translate(-50%);
}

#range{
width:0;
height:3px;
background-color:red;
display:block;
}

#video{
width:900px;
}


</style>
</head>
<body>

<div id='box'>
<video id='video'>
<source src="https://neanderthal-emergen.000webhostapp.com/video1.mp4" type="video/mp4"></video>
<span id='range'></span>

<br>
  <div id='controls'>
  <button onclick='play()'>Play</button>
  <button onclick='pause()'>Pause</button>
   <button onclick='forward()'>Forward</button>
  <button onclick='rewind()'>Rewind</button>
</div>
</div>


<script>

video.onloadedmetadata=function(){
w=900;
f=video.duration;
frange=w/f;          }

video.ontimeupdate=function(){
range.style.width=video.currentTime*frange+'px';     }


video.onended=()=>{
video.currentTime=0;       }


function play(){
  video.play();
  cancelAnimationFrame(xd);
  cancelAnimationFrame(x);     }


function pause(){
  video.pause();
  cancelAnimationFrame(xd);
  cancelAnimationFrame(x);         }


function forward(){
   video.pause();
   a=video.currentTime;
xd=requestAnimationFrame(forward);
   a=a+0.1;
   video.currentTime=a;
     if(a >= video.duration){
        video.currentTime=0;
        cancelAnimationFrame(xd);
     }
  }


function rewind(){
  video.pause();
  i=video.currentTime;
x=requestAnimationFrame(rewind);
   i=i-0.1;
   video.currentTime=i;
     if(i <= 0){
        cancelAnimationFrame(x);
   }
  }


</script>
</body>
</html>