As a good example, under “Troubleshooting & Maintenance,” select “Bill Acceptor Cleaning”:
As the scrubber is moved, I use JS to calculate how far along the timeline the scrubber is, as a percent. I then multiplied that percent times the current video’s total length, which gives the
.currentTime of the video. I then move the video to that
.currentTime . In this project, I also wanted to stop the videos periodically at certain cue points because simulated interactive touchscreen shows up on the left. But the user can drag the scrubber back and forth to whatever point they want, then click the play button to continue.
Note that the video doesn’t show every frame as you scrub because I had a pretty small horizontal area for dragging (due to the screen layout). On the longer videos you jump more video frames for each Hype frame you advance.
The JS for this project is pretty long so I won’t post it here but let me know if you need more details. ~ John