Video scrub controller

Elements Audio & Video
2

There are many different ways to do this (and might even have some already on the forums). Here’s the basic steps I’d use:

  1. Add a Unique Element ID to the video in the Identity Inspector (mine is “myvideo”)
  2. Create an element that acts as your scrubber (a knob and a background) and make sure it is contained in a group which will be the “touch” area.
  3. Make a new timeline (I call mine “Scrubber”) that has a linear animation representing the movement of the knob using a linear timing function. The movement should be 100px per second. So if the knob is 50px, the background group is 450px, then the total movement will be 400px. Thus the duration of the animation would be 4s.
  4. On the group for the slider, add an On Drag action that Controls the scrubber Timeline. The default values should be fine, but uncheck “Continue after drag”. (fyi the speed of 100% is what corresponds to the 100px/second in step 3)
  5. Chain a JavaScript action after the Control Timeline action with code block [1]. This will make the scrubber changes affect the video.
  6. Add a On Scene Load action (in the Scene Inspector) that runs javascript in block [2]. This will make changes of the video affect the scrubber position.

block 1:

	var percentComplete = (hypeDocument.currentTimeInTimelineNamed("Scrubber") / hypeDocument.durationForTimelineNamed("Scrubber"));
	var videoElement = hypeDocument.getElementById("myvideo");
	videoElement.currentTime = (videoElement.duration * percentComplete);

block 2:

	var videoElement = hypeDocument.getElementById("myvideo");
	videoElement.ontimeupdate = function () {
		var percentComplete = videoElement.currentTime / videoElement.duration;
		hypeDocument.goToTimeInTimelineNamed((hypeDocument.durationForTimelineNamed("Scrubber") * percentComplete), "Scrubber");
	}

Here’s a sample document:
VideoScrubber.hype.zip

2 Likes