I got the fast forward playbackRate work fine. Now I try with the rewind part with negative number but it doesn't work. The w3school say to use negative number to rewind it. .asp Anyone can tell me what I did wrong?

Here my javascript worked code for fast forward,

$("#speed").click(function() { // button function for 3x fast speed forward
    video.playbackRate = 3.0;
});

Then here not success rewind code,

$("#negative").click(function() { // button function for rewind
    video.playbackRate = -3.0;
});

I got the fast forward playbackRate work fine. Now I try with the rewind part with negative number but it doesn't work. The w3school say to use negative number to rewind it. http://www.w3schools./tags/av_prop_playbackrate.asp Anyone can tell me what I did wrong?

Here my javascript worked code for fast forward,

$("#speed").click(function() { // button function for 3x fast speed forward
    video.playbackRate = 3.0;
});

Then here not success rewind code,

$("#negative").click(function() { // button function for rewind
    video.playbackRate = -3.0;
});

• javascript
• jquery
• html
• html5-video

• 1 Side note: do NOT use w3schools... read this. – Dom Commented Apr 16, 2013 at 20:30
• I am surprised that w3schools is no good. Now I will have to blame my university for forcing me to use w3schools way. – StudentIT Commented Apr 17, 2013 at 15:20

3 Answers 3

Sample Fiddle

Doesn't look like there is plete browser support for the playback rate option as far as rewind is concerned. You can fake it by using setinterval and subtracting the currentTime of the video.

var video = document.getElementById('video');
var intervalRewind;
$(video).on('play',function(){
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$(video).on('pause',function(){
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 3x fast speed forward
    video.playbackRate = 3.0;
});
$("#negative").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);
});

I also added some extra listeners for the play and pause button to clear the interval. Might want to look into doing some toggling feature on the fast foward and rewind buttons as well.

• Make sure you test in a supported browser. I only found it to work on IE10 (though it's quite sloppy)

• Trying to set a negative value in IE9 causes the video to pause (sets it to 0)

• It's supposed to work in chrome according to w3schools, but I haven't had luck there

• Should work on Safari too, though I haven't tested

  example

This is, yet another, example of w3school. providing false information. They forgot to point out that:

When the element has a current media controller, the playbackRate attribute is ignored and the current media controller's playbackRate is used instead.

Source: http://www.w3/TR/html5/embedded-content-0.html#playing-the-media-resource

After some testing using this demo, it turns out, when the media controller is present, playbackRate must be greater than or equal to 0. If video.playbackRate < 0, it simply won't play.

This means you cannot "rewind" using playbackRate when the media controller is present. However, you can rewind the video by doing something like :

var _el = document.getElementById("video"); 
_el.currentTime -= 5;

DEMO: http://jsfiddle/dirtyd77/sZVAq/3/

or

<button onclick='video.currentTime-=5'>Rewind</button>

DEMO: http://jsfiddle/dirtyd77/sZVAq/2/