Animate HTML Canvas video component - getting video's current time to pause video

[infinitom]

Hi everyone, I'm new to the forum and am seeking some help to a problem that I've been wracking my brain over for the last several days.

I've scoured forum and baffled that no one else has run into this.

So I've got a canvas document using the video component and got the play and pause buttons functioning using video loaded and following JosephLabrecque​ excellent tutorial and several of ClayUUID​'s posts on video component related topics.

In my project, the video (hosted on vimeo pro, so I have direct access to file url as if it was on a local server) loads and is supposed to play for 4 seconds and hold awaiting user input from a button to continue playing.

1. What I'm having a tough time with is figuring out how to get the video's currentTime or get the eventHandler (timeupdate) inside animate's using javascript to pause the video after 4 or however many seconds and then resume from there once a user pushes the right button?
   
   
2. Also, how to I interact with animate's html5 canvas instances (like programatically updating dynamic text) from outside animate, i.e., from the page's javascript. I suppose this question is how to scope into animate's instances from the page's javascript? And how to interact with page elements from within animate's canvas javascript?

Thank you!

[kglad]

use the currentTime property of the video element.  if you don't know how to do that you would use something like:

var video_element;

this.yourvideoinstance.on("added", function() {

    video_element = $("#movieClip_1")[0];

}, this, true);

and you can now use all the js properties/methods of html elements (eg, currentTime):

video_element.currentTime;

[infinitom]

Thank kglad​, I'm going to give this a shot!

Does this code go into an animate frame? or as a bit of page javascript?

[kglad · Accepted solution]

on a frame where your video component exists and you use its instance name in the obvious spot.

p.s. if you try and use video_element on a different frame (than where it's defined), it will fail.  you need to use a timeline reference to prefix video_element.

[ClayUUID]

infinitom  wrote

In my project, the video (hosted on vimeo pro, so I have direct access to file url as if it was on a local server) loads and is supposed to play for 4 seconds and hold awaiting user input from a button to continue playing.

Streaming video sites are not LaserDisc players. If you try to treat them like one, it will only end in tears. Video playback in web browsers is a precarious thing, functioning at the whims of the browser, the host, and every bit of internet in between. You should never pretend you have precise control over the process.

So if you have a 4-second video segment you want to play, make a 4-second video. Then play the rest of the video after that as a second video clip. And so on.

[infinitom]

Thanks, ClayUUID​. The file really is only 10 seconds long and about 5mb in size, which should really be no problem for most modern smartphones on LTE networks. But, I decided against this approach as well due to the uncertain nature of end user-bandwidth constraints as well, and your point just confirmed my suspicion.

I suppose the question now is how to scope into animate's canvas elements (like dynamic text) with page javascript, and page javascipt variables from animate's actions?

[ClayUUID]

infinitom  wrote

I suppose the question now is how to scope into animate's canvas elements (like dynamic text) with page javascript, and page javascipt variables from animate's actions?

Animate declares a global variable exportRoot that is equivalent to this on the root timeline.