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.
How to Rewind a "video" element 2-seconds with JS:
How to Fast Forward a "video" element 2-seconds with JS: