Video scrub controller

Elements Audio & Video
#1

Does anyone have an Idea about how to create a video scrub controller in a banner ad (doubleClick).
Moving a toggle would make video scub forward or backwards.

Cheers I anyone can help.

Clinton

Play and reverse video buttons
#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
Slider to control frames in timeline?
Import multiple frames at once and sequence all of them in timeline
How do i make a timeline slider for my video
Drag in Time from video
#3

@jonathan

I don’t know if others have had this issue:

When I try to open the ZIP file above (“VideoScrubber.hype.zip”) I get an error… “Document Version Incompatibility” letting me know this file was created on a newer version of Hype. The “Check for Updates” button indicates I’m up to date. I’ve downloaded it twice just incase there was a transition error - same result.

I’m running 3.6.3 (584).

FYI

#4

Thanks Jonathan for the detail provided.
VideoScubber.hype.zip not opening for me too.

#5

Thanks - Working perfectly.

#6

@jonathan
Yep I get that on 584 . Seems the doc is listing as 599 in the plist?

But I may be looking at the wrong number since on my 584 v the plists show 574

Update.

I changed the 599 to 574 and the doc opens. ( Not recommended. This is just a confirmation of the problem )

#7

I updated his document. I think Jonathan is using Hype 5.0 already :slight_smile:

Until our server cache clears, the latest is here:
CloudApp

#8

Whaaat… :grin:

#9

Didn’t you get the email … I’m using 4.5 already. :smiley: :smiley:

1 Like
#10

Whoops, my bad. I think I made the doc in v3.6.3 and then accidentally opened it in Hype v12.3 before sending. Glad you got it :slight_smile:.

#11

“Great Scott!”