HTML5 - Video rewind without acceleration or delay

Question

What I need

I need a script (Javascript, jQuery, etc.) to rewind a video after clicking. We used a script that we found in some forums, but it is rewound in video with acceleration, which causes an action of your search to become full / strange. It would have to be at the same speed.

What I have

//[Rewind]  

var video = document.getElementById('video');
var intervalRewind;
jQuery(video).on('play',function(){
        video.playbackRate = 1.0;
        clearInterval(intervalRewind);
});
jQuery(video).on('pause',function(){
        video.playbackRate = 1.0;
        clearInterval(intervalRewind);
});
jQuery("#btnVoltar").click(function() { // button function for rewind
     intervalRewind = setInterval(function(){
             video.playbackRate = 1.0;
             if(video.currentTime == 0){
                     clearInterval(intervalRewind);
                     video.pause();
             }
             else{
                     video.currentTime += -.1;
             }
                        },30);
});

Answer 1

I had better results by calculating values for the interval and the time subtraction based on the frames-per-second. The interval for one frame is calculated in milliseconds (1000 / fps) and the time subtraction for one frame is calculated in seconds (1 / fps).

I also set the playbackRate to zero when playing in reverse, since the playhead position is set manually.

var video = document.getElementById('video');
var intervalRewind;
var fps = 30;

$(video).on('play', function() {
  clearInterval(intervalRewind);
  video.playbackRate = 1.0;

});
$(video).on('pause', function() {
  clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 4x fast speed forward
  clearInterval(intervalRewind);
  video.playbackRate = 4.0;
  video.play();
});
$("#negative").click(function() { // button function for rewind
  video.playbackRate = 0;
  clearInterval(intervalRewind);
  intervalRewind = setInterval(function() {
    if (video.currentTime == 0) {
      clearInterval(intervalRewind);
      //video.pause();
    } else {
      video.currentTime -= (1 / fps);
    }
  }, (1000 / fps));
});

video {
  height: 400px;
}

button {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 6px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" controls="controls">
 <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
 <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
 <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>

Also see:
Playing HTML5 Video Backwards @ nicbell.net.

Alternatively, you might consider controlling the frames-per-second by using requestAnimationFrame. See Controlling fps with requestAnimationFrame?

---

Per your request, here is a version that accommodates multiple videos on a page by using classes instead of IDs. I also used the requestAnimationFrame method by markE described here: Controlling fps with requestAnimationFrame.

var fps = 30;
var fpsInterval = 1000 / fps;

jQuery('.video_block').each(function(i, $thisBlock) {

  var thisVideo = this.querySelector('video');

  jQuery('.video', $thisBlock).on('play', function() {
    thisVideo.reverse_stop = true;
    thisVideo.playbackRate = 1.0;
  }).on('pause', function() {
    thisVideo.reverse_stop = true;
  });

  jQuery('.btn_fast', $thisBlock).on('click', function() {
    thisVideo.reverse_stop = true;
    thisVideo.playbackRate = 4.0;
  });

  jQuery('.btn_reverse', $thisBlock).on('click', function() {
    thisVideo.playbackRate = 0;
    thisVideo.reverse_stop = false;
    startReverse(fps, thisVideo);
  });

});


function startReverse(fps, video) {
  video.playbackRate = 0;
  video.reverse_stop = false;
  video.then = Date.now();
  animateReverse(video);
}

function animateReverse(video) {

  // stop playing in reverse
  if (video.reverse_stop) {
    return;
  }

  // request another frame
  requestAnimationFrame(function() {
    animateReverse(video);
  });

  // calculate elapsed time since last loop
  var now = Date.now();
  var elapsed = now - video.then;

  // if enough time has elapsed, draw the next frame
  if (elapsed > fpsInterval) {

    video.then = now - (elapsed % fpsInterval);

    // if we reach the beginning, stop playing in reverse.
    // otherwise, move backward.
    if (video.currentTime <= 0) {
      video.reverse_stop = true;
    } else {
      video.currentTime -= (1 / fps);
    }

  }
}

.video {
  height: 400px;
}

.btn {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 6px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="video_block">
  <video class="video" controls="controls">
   <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
   <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
   <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
  </video>
  <button class="btn btn_fast">Fast Forward</button>
  <button class="btn btn_reverse">Reverse</button>
</div>


<div class="video_block">
  <video class="video" controls="controls">
   <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
   <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
   <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
  </video>
  <button class="btn btn_fast">Fast Forward</button>
  <button class="btn btn_reverse">Reverse</button>
</div>