Scrubber (with Images) on top of video

What I have is a conventional video. I want to permanently have a scrubber that is placed on top of the video in the same frame. This should act like a regular scrubber so that moving the cursor down to the far right moves the video to the last frame. The image displayed in the scrubber will be from another video the same length.

A cartoon is attached showing the zone.

This would be your general flow:

  1. Add a unique element ID to the video
  2. For the scrubber area, add an ‘On Drag’ action that is set to Run JavaScript
  3. Use the event['hypeGestureXPosition'] variable in conjunction with the scrubber width and video duration to determine the new time for the video
  4. set the hypeDocument.getElementById("videoID").currentTime property to this time.