Rewind HTML5 video after clicking without acceleration or lag

Question

Rewind HTML5 video after clicking without acceleration or lag

Navigation

#1 by (0 votes)

0

What I need

I need a script (Javascript, jQuery, etc.) to rewind a video after clicking. I used a script I found in some forums, but it rewinds the video with acceleration, which makes the animation look bad / strange. It would need 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);
});

javascript jquery html5 video

asked by anonymous 17.08.2018 / 17:06

1 answer

I'm trying to read and write an XLS with Apache POI How to split the files of a folder into zip files of 2 mb

score 0 · Answer 1

So acceleration happens because where you copied , that seems to me to be the goal. If you want a rewind as a "reverse play" you need to match the size of the range with the subtraction factor. And also note other details like the framerate and upload of the video to deliver a better experience.

//[Rewind]  
$(document).ready(function() {

  var video = document.getElementById('video');
  var intervalRewind;
  $("#video").on('play', function() {
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
    //console.log('playing');
  });
  jQuery(video).on('pause', function() {
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
  });
  jQuery("#btnVoltar").click(function() { // button function for rewind
    clearInterval(intervalRewind);
    
    
    intervalRewind = setInterval(function() {
      
     // video.playbackRate = 1.0;
      if (video.currentTime <= 0) {
        video.pause();
        clearInterval(intervalRewind);
         
      } else {        
         video.currentTime -= .06;
         
      }
     // console.clear();
     //console.log(video.currentTime);
    }, 60);
    
  });
  
  video.pause();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><videoid="video" controls width="50%">
	<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"type="video/mp4">
	<p>Your browser does not support H.264/MP4.</p>
</video>

<button id="btnVoltar">Voltar</button>