Drag Slider Through Video


#1

I want to have a slider over a video and the user can drag back and forth through the time of the video. The controls that come with Hype have that capability, but we want our own controller to drag.
How do I do this? Not afraid of JavaScript if that’s what it takes.
Thanks for any help.


(strmiska) #2

there´s a ready video player to download. you can cange this for your needs.


#3

Thanks for the Video Controller. Unfortunately it’s a bit of a bulldozer when I need a shovel. I just need to control the video completely via dragging the slider… in other words it’s not jumping to a point in the video, but the whole video becomes a series of photos that you can drag through. Deadline is looming.
Thanks again for the help @strmiska!


(Hans-Gerd Claßen) #4

make a slider with a timelineduration as long as the video is

control the timeline with drag, choose setting of speed that fits your needs

run js on drag

yourVideoElement.currentTime = hypeDocument.currentTimeInTimelineNamed('yourTimeLineName')


#5

THANK YOU! I had that exact language, but with 2 equal signs! Woops. Thanks for the help @h_classen

Answer is…
Slider is on separate timeline named, “sliderTime” tweening from beginning to end
Video is on Main Timeline named, "theVideo"
On Drag for the slider add “Control Timeline” “sliderTime” first
2nd Run JavaScript…

hypeDocument.getElementById(‘theVideo’).currentTime = hypeDocument.currentTimeInTimelineNamed(‘sliderTime’);

works like a charm!


(Joe Zeff) #6

Can someone share a Hype document where this is working? I’ve set up a document based on what’s above, and not getting any love. Thanks in advance!


(Hans-Gerd Claßen) #7

the other way round :slight_smile:
you share a document with first approach and the forum offers help :slight_smile:

mostly win win!


(Joe Zeff) #8

I can do that. Here’s the file I’m trying to rig up . . .

http://joezeff.design/360test.zip

Thanks in advance!

Joe


#9

360_video-vDBear.zip (740.0 KB)


(Joe Zeff) #10

Thanks DBear! Much appreciated.

Still trying to wrap my head around this.

Here’s another file, even simpler. All I want to do is control the playback via drag.

Can anyone explain?

Thanks
Joe

scrub.zip (1.4 MB)


#11

You could use Hype’s built in API that gets the state of where the mouse position is (on the x axis) when the drag starts and while it’s moving and reset it at end.

Then create a counter that grows by a specific amount or shrinks by a similar amount based on the mouse movement. This code is placed in an on Drag event linked to the video.

scrub-vDBear.zip (740.0 KB)


(Joe Zeff) #12

Thanks again, DBear. You rock!


(kari) #13

Dbear -

any idea why this is not working with iPad / iPhone? The slider shows but the vid does not play.


#14

Apologies, been away.

Probably because the events in the above document that are being listened to are mouse events rather than touch. Off the top of my head.