Getting .mp4 to play on another timeline

Imported video will play on Main Timeline, but not on a created timeline. I’m trying to control stop and start of movie with buttons.

1 Like

Hi Cordes,

To control start and stop of the MP4 video you will need to use javascript.

control_html5video_with_javascript.zip (785.0 KB)

Here is a template to show you the method

D

2 Likes

DBear,

Thank you! That is perfect. The example file is above and beyond expected.

Cordes

After digging deeper into this, I’m still not able to stop the Main Timeline at a specific point. The movie plays through any action set on the Main Timeline.

You will have to manipulate the timeline using Javascript in order to sync the timeline and video / movie.

What do you want to do exactly?

D

Right, as of now the Timeline Actions are being ignored when the Main Timeline contains a movie. Example: Action: Pause Timeline, Timeline: Main Timeline, set at 00:03.00. Your Javascript works perfectly enabling the user control the start/stop, but I haven’t solved the movie stopping at specific point. Example: Movie plays for 3 sec. then stops (internal function). The user then has to hit “continue” to start the movie again. This continues until the end of the movie.

You’ll need to run @DBear’s JavaScript functions as timeline actions if you’d like to control the video alongside a timeline. The thumbnails in the main timeline which appear when you drag a video into your scene will only be 1-to-1 if your video and timeline start exactly at the same time, which is a bit tricky to do unless your video has already been played and is cached in memory.

This thread demonstrates how to sync videos to animations: Sync animations to Video & Audio

Hope that helps!

Thanks Daniel,

That should do it. Much appreciated.

Hi Cordes

Looks like Daniel’s helped you out there.

Here is a document I was working some while ago when designing a sort of quiz. It doesn’t really make sense (question wise) as they are just there for reference. But, it shows a lot of the code that is used to manipulate the video, etc

Maybe you’ll find it useful

videoandslide-sync.zip (418.7 KB)

1 Like

Sorry for the delay DBear. Thank you for the example. It’s time to jump into coding to really make this work.

Thank you, DBear:

This topic is perfect for my project!

I tried to add JavaScript in the Timeline Actions to pause my video, but it doesn't work.
I tried it with the project you shared and it worked for me. However, JavaScript does not work for my project.
What could it be? Can you give me some help?

I'm sharing my project:
Pause mp4 using Timeline Actions.zip (2.8 MB)

Thanks in advance!

The issue is that the main timeline runs automatically, so your video pause is happening 2/3 of a second after showing the page.

Since your video is not set to autoplay, and 2/3 of a second is too soon for a user to do anything, this pause is basically operating on an already paused video.

I'm not sure how you want to behave exactly, but it is likely that you just want to control this from a different timeline. I see you have one called "video" already. So your "play" button could start the video timeline. The video timeline could have an action at frame 0 to set the .currentTime of the video to 0 and also to .play() the video. Then you can have a your pause timeline action that would pause at the appropriate time.

Do note that Hype timelines do not guarantee a perfect sync with video. I'm not sure there's a 100% reliable way to stop on a given frame, but a more 'native' approach instead be to use javascript code to listen to the video's timeupdate event and try to pause when the time is what you want.

1 Like

Thanks @jonathan

I tried to add the video in the timeline called "video" but the video I can't see there. Therefore, I can't control the video.

You could move the action you have on the main timeline to the video timeline and place it at the same time frame. i.e 00:00.21

Then change the play() function to this.

document.getElementById('animation1').play();

hypeDocument.continueTimelineNamed('video', hypeDocument.kDirectionForward, false)

But as @Jonathan says. It's not clear what the real intent is. Can you explain the real goal.

Pause mp4 using Timeline Actions 2.zip (2.8 MB)

1 Like

Also,

Not sure how useful this is. But this example tries to know when the vide has reached a particular frame and auto pause. using the time update listener and current time as @jonathan mentions

It has added code to allow the video to continue if the play button is hit again and also restart as it does at the moment..


Placed in a hype function and On Prepare For Display action

	var iRanOnce = false
		
	const  theVid = document.getElementById('animation1')
	var frameRate=30;
	 
	 
theVid.ontimeupdate = (event) => {

  curTime = theVid.currentTime;
  theCurrentFrame=Math.floor(curTime*frameRate);
 
 //> only for the demo display of the frame use, can be deleted
 	 const cframe_ = hypeDocument.getElementById('cframe')
 	 cframe_.innerHTML = ` Frame: ${theCurrentFrame}`
 //<
 
  if (theCurrentFrame >= 21 && iRanOnce == false){
  theVid.pause();
  iRanOnce = true
  }
  
  if (curTime == theVid.duration){
   iRanOnce = false
  }
  
};

Pause mp4 using Timeline Actions_v2.hype.zip (2.8 MB)

2 Likes

This is perfect @MarkHunte!

Thank you!

1 Like