Stopping Video at Specific Time

Elements Audio & Video
1

Thanks to this forum, I’m having success with controlling time with my imported videos. I’d like to stop the animation at, say 5:11 seconds. How would I write that in js?

I’m using this for example for 5 seconds:

if (currentTime >= 5 && T1 == 0)

Thanks,

Dale

2

hi,

you use the hypeDocument.pauseTimelineNamed('timelineName')

3

There’s a few things you need to do:

Run this ‘on scene load’ in the scene where your video is placed: You need to make a listener for the timeupdate value your video’s Element ID, then create an ‘if’ statement for when that time has passed (60 * 5) + 11, which is 311 seconds. Then you need to stop the animation on a timeline:

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

If you meant 5 seconds and 11 frames, it would be: 5.36 instead of 311. (This is 11 divided by 30).

1 Like
4

Got it. Thanks. I can use both of those. I have the listener ‘on scene load’, but I didn’t know how to get the time to be more precise. More js to learn…

This is a great forum.

Dale

1 Like
5

Hi Daniel

I new with Hype and I still got problem making videos pause at “On Scene Load” with your code, I tried using the video name with and without the .mp4 file extension and nothing happens. I tried everything like adding a timeline actions with this code, changing ’ with " and nothing. I attached some screenshot hope it helps.
Oh and almost forgot something that could be important, I’m using the Hype Pro trial maybe this could be the problem.

Thanks in advance

Captura de pantalla 2018-03-02 a las 9.57.30 a.m..png2212×698 64.4 KB

6

You need to add an id tag inside the video tag.

<video id="TD_2018_720_ANIM" width="320" ...

This is what the code is looking for.

7

Sorry writing code is still a work in progress for me
this is what I have by now

document.getElementById(<video id="TD_2018_720_ANIM" width="1280").addEventListener("timeupdate", function() {
var videoCurrentTime = document.getElementById(<video id="TD_2018_720_ANIM" width="1280").currentTime;
    if (videoCurrentTime >= 200) {
        hypeDocument.pauseTimelineNamed("Main Timeline")

Thanks

8

That code is completly wrong! :exploding_head:

A variation of @Daniel 's code…

var vidTD_2018_720_ANIM =  document.getElementById('"TD_2018_720_ANIM" ')

vidTD_2018_720_ANIM.addEventListener('timeupdate', function() {
var videoCurrentTime = vidTD_2018_720_ANIM.currentTime;
    if (videoCurrentTime >= 200) {
        hypeDocument.pauseTimelineNamed('Main Timeline')
}

But none of this will work if you video tag does not have an ID.

Can you post the video code you have in the innerHTML

9

Jajaja sorry my javascript skills are almost none

I updated the video ID to “video1”

Captura de pantalla 2018-03-02 a las 12.14.30 p.m..png542×818 27 KB

I used the @Daniel code like this

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

And your code like this

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

But still no luck getting to pause the video

10

Can you share your document?

document.getElementById('"video1" ')

should be:

document.getElementById('video1')

11

Did the fix but still not working

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

Something Is missing, could be the fact I’m using the Hype Pro 14 days trial ?

12

You need to close your if statement and the addEventListener

document.getElementById('video1').addEventListener('timeupdate', function() {
var videoCurrentTime = document.getElementById('video1').currentTime;

if (videoCurrentTime >= 311) {
    hypeDocument.pauseTimelineNamed('Main Timeline')
	}
})

Also the check is if the video is greater than 311 seconds (that’s just over 5 mins) is that correct?

13

No.

The missing bit I am afraid is what we are trying to show you and you not understanding ( it being new to you )

But if you post the document we may be then able to see what is going on without the guess work. Like us guessing how you have added the video

14

Here you go

PauseVid_Test.zip (380.9 KB)

15

I annotated the code a bit:

document.getElementById('video1').addEventListener('timeupdate', function() {
var videoCurrentTime = document.getElementById('video1').currentTime;
console.log(videoCurrentTime);
    if (videoCurrentTime >= 3) {
    
    // this will pause the main timeline when the Video has played 3 or more seconds:
        hypeDocument.pauseTimelineNamed('Main Timeline');
    // this will pause the video also. You can resume with .play();
    document.getElementById('video1').pause();
        }

    })

PauseVid_Test.zip (197.5 KB)

16

It works!!

Thank you very much Daniel and everybody who responded on this thread.

This forum rocks!

Ben

1 Like