Drag controller linked with a video

Animation
,
1

Hello everyone
I am trying to use a drag element to control a video here is the sample I have copied the function for JS but still no work I have been hitting my head because of this please help

drag-video.hype.zip (980.5 KB)

2

I’m using an iPad right now, so here’s some general information about creating something like a jog shuttle / time control button.

  1. I find HTML video easier to control when it is manually loaded into Hype. In other words, I don’t use Hype’s video element. I use a rectangle.
  2. JavaScript can be used to move a video to a specific point. In particular, it’s the current time property… https://www.w3schools.com/jsref/prop_video_currenttime.asp
  3. You can use an addEventListener “input” on a slider to move the video around… https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event …or for more freedom, a draggable element can work. The trick here is compare the range of your slider to the length of the video. That’s not too hard to do when you know the duration of the video… https://www.w3schools.com/jsref/prop_video_duration.asp

Anyway, that’s just theoretical, but maybe helpful info.

3

Thanks for taking time to reply but I don't think that's what I need I have a drag button and I want this button to be the controller of the video like a slider in the video player itself when you go forward or backward but with customized hype button here is the code for it:
hypeDocument.getElementById('theVideo').currentTime = hypeDocument.currentTimeInTimelineNamed('sliderTime');

4

OK, so that’s bullet point #2… the currentTime Property… it looks like you’re trying to set it with the time in the “sliderTime” timeline.

Going back to bullet point #1… it looks like you’re using Hype’s video element. That’s this part… hypeDocument.getElementById('theVideo')

I’m still using the iPad, so my information is more in the abstract. Two things to check… are you even getting a value from hypeDocument.currentTimeInTimelineNamed('sliderTime') …you could use something like this to check…

console.log(hypeDocument.currentTimeInTimelineNamed('sliderTime'))

The other thing to check is the ID of the video. Does it match your code? Is there even an ID assigned to the video?

1 Like
5

Yessss I didn't set an ID. Much appreciate thanks a lot problem solved

1 Like
6

One more thing please! I am trying to make the video fully interactive, let's say I have 10 sec video what should I do to make the drag controller "we discussed before" control just the first 5 sec and have another controller let's say a button or something control/continue the rest of the video without any interference, I hope you get my point

7

You could do a couple of things. The first would be to use an HTML Input Range, and then just make the range stay within the values you want.

The following is not about controlling a video, but it is using a slider to control elements in the scene...

https://photics.com/free-template-tuesday-5-tumult-hype-pythagorean/

The other option is to use Math.min, which would take the smaller of two values.

Again, theoretical / hypothetical, but I'm thinking it would look something like this...

hypeDocument.getElementById('theVideo').currentTime = Math.min(hypeDocument.currentTimeInTimelineNamed('sliderTime'), 5);

...but then you'd have the problem of fixing the slider animation. It would keep going while the video would not. That's why I'd probably use an HTML Input or perhaps a different method entirely.