Pause the video at a specific time

[Luciano]

Hi,

I've a button with this function:

function guida(hypeDocument, element, event)  {
hypeDocument.getElementById('video1').currentTime = 33;
hypeDocument.getElementById('video1').play();
}

So when I press the button the video starts from the point I want.
My question is:
how can i make it stop automatically at time 50 ??

As always thanks in advance

[MarkHunte]

You should just poll for the currentTime and pause when it is equal to or greater than the time you want.
Just be aware to only run the limit once or dynamically if you then want to resume..

See this post where it uses timeupdate event and currentTime.

You will need to adapte it for you usage.

Sync Timelines to Video & Audio in Tumult Hype

In this quick tutorial, I'll show how to start a timeline after a media element (in this case, a video) has played for five seconds. This example could be easily modified to do the following things: Jump to the next scene after a video has played Run a timeline after an audio element has played half way through Play another audio element after one has completed To sync your video with an animation in Tumult Hype, we’ll first need to detect the current position of your video. This is known as …

[Luciano]

Hi try to add these :

function guida(hypeDocument, element, event)  {
hypeDocument.getElementById('video1').currentTime = 33;
hypeDocument.getElementById('video1').play();

document.getElementById('video1').addEventListener('timeupdate', function() {
var videoCurrentTime = document.getElementById('video1').currentTime;
    if (videoCurrentTime = 50) {
        hypeDocument.pauseTimelineNamed('Main Timeline')
}
}

Not working

Unfortunately I've difficulty with code.

[MarkHunte]

Not at my Mac at mo.

But in a function a equal to is ==
You have =

You actually better of using >=

Which means greater than or equals.

Polling is never going to be that precise that you will hit 50 before it blows past it.

Also you probably should put it in its own function and run it on scene load. Otherwise you will keep adding a listener..

[Luciano]

Yes, right

I've put some correction because I've forget also a final brace... ( I think )

---

function guida(hypeDocument, element, event) {

hypeDocument.getElementById('video1').currentTime = 33;

hypeDocument.getElementById('video1').play();

document.getElementById('video1').addEventListener('timeupdate', function() {
var videoCurrentTime = document.getElementById('video1').currentTime;
if (videoCurrentTime >= 50) {
hypeDocument.pauseTimelineNamed('Main Timeline')
}}}

---

.... but don't work, all of this is on a button. I don't know what to do or what/where to put on

[h_classen (Hans-Gerd Claßen)]

in the end ... you may provide a sample hypefile ... so someone can step in and help ...

[MarkHunte]

Ok Back at Mac.
Looking at what you have it is all a bit mixed up.
Give me a min and I will pop up an example.

[Luciano]

ok Mark,

tell me, if u need an example like said friend "h_classen"

I stay hold on

[MarkHunte]

@Luciano

hypeDocument.getElementById('video1').currentTime = 33;

hypeDocument.getElementById('video1').play();

Yes an example of what you have is always a good start. The only reason I never asked for one was because video files can be a pain to post size wise and you are new to posting..

Tip. when posting code select the code in the post and then click the code button.

This will format it for the post.

Here is an example. I added a timeline since you seemed to have ref one?.

But you can also use the video file in that to post back your own example.

The initiation of the listener is done in one function that runs on a prepare for display action.
It will only run once.

The button has its own function.

example starts at 12s and stops around 18s

videoPlayeStop.hype.zip (1.1 MB)

[Luciano]

your example looks perfect.
I saw that there's also the timeline that i'll delete.

However, I'm sending you my example that I'd already prepared to send you
I've to link because it's 3.5mb

here

[MarkHunte]

Here you go with you example.

I removed the video file so I could post it back.
Just drop your video on the scene again and give it the video1 id

I also have put in the time code element so you can see what is going on time wise.
Remove it and any reference to it (debug code ) in code on production or set debug to false.

test.hype.zip (35.9 KB)

---

[Luciano]

Great !

Thanks Mark, thanks Community,

thanks thanks thanks !!!

[Luciano]

ah, little thing,

but so i can " play and pause " only a single button ?
For example , it's different and complex for all 3 buttons ?
a -> 5 - 10
b -> 10 - 15
c -> 15-20

( always thanks )

[MarkHunte]

I did actually have another version that points all the buttons at a single script.
It uses data attributes to determine which button was clicked and then sets the time using a conditional switch.

Since I had this already it is a simple matter to update it so each click of a button will change its time.

---

	var video_player  = hypeDocument.getElementById('video1')
	var playTime  = 0
	 
	if (typeof window.imballoPlayTime == 'undefined') { window.imballoPlayTime = 10 }
	if (typeof window.guidaPlayTime == 'undefined') { window.guidaPlayTime = 15 }
	if (typeof window.montantePlayTime == 'undefined') { window.montantePlayTime = 20 }
	
	
	
	var menu__Name = element.dataset.menu
	
	switch(menu__Name) {
	case 'imballo':
        window.imballoPlayTime = ((window.imballoPlayTime == 5) ? 10 : 5 );
        playTime = window.imballoPlayTime
        
         break;
         
    case 'guida':
       
        window.guidaPlayTime = ((window.guidaPlayTime == 10) ? 15 : 10 );
        playTime = window.guidaPlayTime
        break;
        
    case 'montante':
       	window.montantePlayTime = ((window.montantePlayTime == 15) ? 20 : 15 );
        playTime = window.montantePlayTime
        break;
    
}

		video_player.currentTime = playTime;
	
	if (playTime > 0){
	video_player.play();
	}

---

i.e button a first click will go to 5s, its second click will go to 10s.

If this is not what you mean then can you explain in more detail?. ( which you always should )

Same as last time drop your video in.

test 2.hype 2.zip (20.7 KB)

[Luciano]

I try,

In the example you sent me of my project, if I click the 3 buttons, the video starts from different points, and this is ok, but in all 3 the actions always stop at the same point, that is when the video reaches the point break (our example 50).
Instead the 3 buttons (a, b, c) the video as well as starting at different points, stop at different points.

I don't know if I made myself clear ... sorry;)

[Luciano]

Sorry , I saw now your reply.

I try your zip

[Luciano]

I don't know if it's correct.
An example:
Duration Video 20sec.
Button:
a start at 5sec stop at 10sec
b start at 10sec stop at 15sec
c start at 15sec stop at 20sec

[MarkHunte]

oh stops at.

One mo

[MarkHunte]

Here you go.

In the initListener()

At the top we add a global var with the overall stop value.

window.stopTime = 50

we then set the if condition to use the global var

if (videoCurrentTime >= window.stopTime) {

In the playSelection()

We change the code to

	var video_player  = hypeDocument.getElementById('video1')
	var playTime  = 0
	 
	 
	
	var menu__Name = element.dataset.menu
	
	switch(menu__Name) {
	case 'imballo':
       playTime = 5
       window.stopTime = 10
        
         break;
         
    case 'guida':
       
         playTime = 10
       window.stopTime = 15
        break;
        
    case 'montante':
       	 playTime = 15
       window.stopTime = 20
        break;
    
}

		video_player.currentTime = playTime;
	
	if (playTime > 0){
	video_player.play();
	}

Same as before drop your video in.

test 3.hype.zip (20.4 KB)

[Luciano]

Amazing, perfect !!

Mega Thanks