Jump to content

How to make video-time-based cursors?

Winston

By Winston
in CSS

 Share

Recommended Posts

Ingolme w3schools Guru

Ingolme

Posted
Posted

The scripts I provided already synchronizes the cursor with the video timeline without resetting. If that's not working it's probably because a different script is interfering with it.

Link to comment
Share on other sites
  • 3 weeks later...
Winston Newbie

Winston

Posted
  • Author
Posted (edited)

Some people online say that negative numbers in "playbackRate" would play backwards. Others say it doesn't work. More say it is only certain browsers that supports it. If you have the problem, and if it helps anyone, here is a reverse video player (Even though it glitches a little, similar to how a rewinding DVD glitches); 

<!DOCTYPE html>
<html>
<head>
<video id="theVideo">
  <source src="example/video.mp4" type="video/mp4" id="theVideo">
</video><br>
<button id="" class="backpoint" onmousedown="setReverse()" onmouseup="setForward()" ondrag="setForward()">Hold me to reverse/Release me to forward</button>
<script>

var vid = document.getElementById("theVideo"); 

function setReverse() {  
vid.pause();
myVar = setInterval(function() {
    vid.currentTime = vid.currentTime - 0.025;
}, 25);
}

function setForward() { 
    vid.play(); 
    clearInterval(myVar);
} 
</script>
</head>
</html>

When you hold the button, it plays in reverse, and when you release the button, resumes forward. Just replace "example/video.mp4" with your video location. However, the video will be muted because it thinks it's paused, but jumps backward repeatedly to appear in reverse.

If this gets moved, please tell me where it is moved to.

Edited by Winston
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...