Skip to main content
infinitom
infinitom
Participant
January 30, 2018
Answered

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

  • January 30, 2018
  • 2 replies
  • 1674 views

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!

This topic has been closed for replies.
Correct answer kglad

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.

2 replies

C
ClayUUID
Legend
January 30, 2018

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
    infinitomAuthor
    Participant
    January 31, 2018

    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?

    C
    ClayUUID
    Legend
    January 31, 2018

    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.

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    January 30, 2018

    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
    infinitomAuthor
    Participant
    January 31, 2018

    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
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    January 31, 2018

    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.

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices