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>