How do i make a timeline slider for my video

[jianshen98 (Lay Jian Shen)]

Hi Guys,
Im new to Tumult Hype as i just started using this software just a week ago. Im trying to create a draggle timeline slider that can control the timeline of my video, went through few of the forum discussion on this site but i still couldn’t figure out how to do it. Can anyone guide me through this?

Thanks,
Jian

[JimScott]

Hi Lay - Welcome to the Forum!

Were You thinking of a timeline slider for your video similar to the screen shot below?

[jianshen98 (Lay Jian Shen)]

Hi Jim,

Yes! Is something like this, but i don’t want to use the default slider that comes with the video, i kinda want to have a customise slider for my site.

[JimScott]

You might find this thread - by @MarkHunte - of interest:

Video Controller Symbol

After looking at html5 video buttons the other day I thought I would knock together a fully working Controller that could be added to any html video player. With Hype v3.5 came scaling Symbols. This means you can scale the whole symbol in one go to fit. [image] ( Notes: You can only run one controller in a project at the moment. I was hopping that just using classNames would allow for multi controllers but nope. ( thought I had used a className trick before to do similar !!). There ar…

[jianshen98 (Lay Jian Shen)]

I’ve tried going through this thread but i would like something simpler as this is a bit complicated.

i would like it to be as simple as this.

Cheers,
Jian

[h_classen (Hans-Gerd Claßen)]

no matter which UI different from the default you like, you’ve got to script it yourself.
no less, no more …

play, pause, stop (equals pause and timeresetting) should be easy to implement. progress is a bit advanced … there are a lot of examples in the forum …
some overview: https://www.w3schools.com/tags/ref_av_dom.asp

[MarkHunte]

@jonathan posted a simple example that I really like.

Video scrub controller

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: Add a Unique Element ID to the video in the Identity Inspector (mine is “myvideo”) 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. 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 …

But as @h_classen says you will need to do some coding and there are plenty of examples on the forum. Not all of the methods may be directly related to video. There initial intent will be just a behaviour or feed back for some other use. I.e timeline duration/ remaining

[jianshen98 (Lay Jian Shen)]

Thanks! @MarkHunte i got it to work by following the thread you sent!