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.com/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;
});
Sample Fiddle
Doesn't look like there is complete 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With