Pause video using the timeline. Resume with button click

Elements Audio & Video
1

Hello Hypers!

I’m looking to control a video with the use of pausing at intervals and resuming playback with a button that I will animate in right before the pause then animate out after click.

Can I do this purely with the timeline or do I need to script this with Java?
I don’t seem to be able to pause the video by pausing the timeline with a Timeline Action.

The Plan

  1. The video would autoplay on timeline start
  2. Button would animate in
  3. Video pauses
  4. Video resumes on button click
  5. Repeat steps 2 - 5 several times

I could cut the video up into several clips and place one in each timeline but would be nice to just have 1 single video with controls.

Any Help/Advice GREATLY appreciated.
Cheers!

2

So I got this to work by adding Timeline Actions: run javascript: play | pause

hypeDocument.getElementById(‘video1’).play();
hypeDocument.getElementById(‘video1’).pause();

Now the only issue is that the keyframes in my timeline and the timestamps on the video don’t sync very well.
The 1st keyframe timestamp works well…the following ones occur earlier and earlier.

Once again any help would be brilliant.

3

Timelines act independently from video elements, so you would need to create a JavaScript function which controls that video as well. Check this page out: Creating Play & Pause Buttons for Video

Here’s a method for ensuring your timelines are synced accurately with videos: Sync animations to Video & Audio in Tumult Hype

4

Thanks!!
I’ll dive in and see what comes up.