Hi there,
So I have what I think is a pretty simple challenge. I want to have a video (or image sequence) that scrubs through the timeline as the user drags left or right. I have the timeline set up so that the user can drag left or right to go back and forth on the timeline, but I cant figure out the best way to get the video (or image sequence) in there. When I drop the video on the timeline, it just shows up on the first frame, with video controls (which I don’t want). Thoughts?
Thanks in advance!
Tim
You could assign an image to each frame, and then a drag could be used to control the timeline.
Yeah. I did something like that, but with 60 images, it is a real pain to manually drag, drop, and reposition. Is there an easy way to drop in an image sequence?
Well, there is an easier way to do it, but it involves coding. Basically, a draggable timeline would be created. Then, based on the current frame in the timeline, a specific image would be shown. The Hype JavaScript API would be used to get the current frame. That value probably would need to be rounded though.
Oh. Interesting. I will have to look into that. My temporary solution is ok for now, but I know I am going to have to do more things like this, so it would be better to learn that. So am I crazy thinking it is strange that there is not a way to import something as an image sequence? I come from an animation background, so I don’t really understand all the limitations of html.
@timlitos, you might have to resort to JavaScript to do this. The example below has multiple videos that get loaded depending on which is selected in the menu. Each is of a different length, but the same timeline with a scrubber is used for playback.
As a good example, under “Troubleshooting & Maintenance,” select “Bill Acceptor Cleaning”:
As the scrubber is moved, I use JS to calculate how far along the timeline the scrubber is, as a percent. I then multiplied that percent times the current video’s total length, which gives the .currentTime of the video. I then move the video to that .currentTime . In this project, I also wanted to stop the videos periodically at certain cue points because simulated interactive touchscreen shows up on the left. But the user can drag the scrubber back and forth to whatever point they want, then click the play button to continue.
Note that the video doesn’t show every frame as you scrub because I had a pretty small horizontal area for dragging (due to the screen layout). On the longer videos you jump more video frames for each Hype frame you advance.
The JS for this project is pretty long so I won’t post it here but let me know if you need more details. ~ John