3

I have a video I need to show on a website. I can't allow user's to fast forward it, but they need to be able to rewind it. I've modified the example here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_controller

to the following:

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" width="320" height="176" onclick="playOrPause();" oncontextmenu="return false;" controls >
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<div>
    
<input type="button" id="btnRewind" name="btnRewind" value="Rewind" onclick="rewindVideo();" />
<input type="button" id="btnPlay" name="btnPlay" value="Play" onclick="playVideo();" />
<input type="button" id="btnPause" name="btnPause" value="Pause" onclick="pauseVideo();" />
</div>

<script>
    var video = document.getElementById("myVideo");
    
    function playOrPause() {
        if (video.paused) {
            playVideo();
        } else {
            pauseVideo();
        }
    }
    
    function playVideo() {
        video.play();        
    }
    
    function pauseVideo() {
        video.pause();
    }
    
    function rewindVideo() {
        //video.currentTime -= 0.5;
        video.playBackRate = -2;
        video.play();
    }    

</script> 

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Is there a simple way to rewind the video from the current position? I'd like to avoid using an entire library for a rewind function. jQuery would be fine though.

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
CaptonMike
  • 31
  • 5
  • If by "rewind" you mean "skip back a few seconds" then your code works fine (if you uncomment `video.currentTime -= 0.5;` (I changed it to 1/2 second just to test when adding the video urls) – freedomn-m Oct 29 '20 at 15:19
  • If by "rewind", you mean "play in reverse" - then highly unlikely. – freedomn-m Oct 29 '20 at 15:20
  • Yeah, I did mean play in reverse. I believe you are correct. – CaptonMike Oct 29 '20 at 22:26
  • It is possible, but it is not easy. I found a working example here:https://www.elstel.org/html5video/Html5VideoScripting.html.en – CaptonMike Nov 02 '20 at 18:13

1 Answers1

1

How to Rewind a "video" element 2-seconds with JS:

function Rewind() { 
var myVideo = document.getElementById("myVideo");
myVideo.currentTime = myVideo.currentTime -2; }

How to Fast Forward a "video" element 2-seconds with JS:

function FastForward() { 
var myVideo = document.getElementById("myVideo");
myVideo.currentTime = myVideo.currentTime +2; }
חִידָה
  • 259
  • 1
  • 2
  • 14
  • 1
    Thanks for this solution, it does move the video back (or forward) a few frames, but I was hoping to get a solution that would act more like rewind on a dvr or dvd. – CaptonMike Oct 29 '20 at 22:30