Skip to main content
C
ChicoTom24
Inspiring
February 6, 2018
Answered

Show movie clip when video component is seeking? HTML5

  • February 6, 2018
  • 1 reply
  • 314 views

I'm using Animate CC to publish to HTML5.   I need to show a movie clip "only" when the video is currently seeking or currently paused.  The video instance is named "video0".   I am able to control the video, e.g...

    video0.currentTime = 0;

    $("#video0")[0].play();

...sends the video back to the beginning and then plays it.

However, I cannot figure out how to show a movie clip when video0 is currently paused or currently seeking.  Any ideas? Thx

    This topic has been closed for replies.
    Correct answer ChicoTom24

    If you put the code in the same first frame as the component, then of course it won't work, because it's running before the component has created the video element.


    OK, thanks.  Your code below works fine.  I just had to put it in a keyframe AFTER the component is placed on the stage.

    - - -

    var myvid = document.getElementById("video0");

    var pauseClip = this.myPauseClip;

    myvid.addEventListener("seeking", showClip);

    myvid.addEventListener("pause", showClip);

    myvid.addEventListener("play", hideClip);

    myvid.addEventListener("timeupdate", hideClip);

    function showClip() {

         pauseClip.visible = true;

    }

    function hideClip() {

         pauseClip.visible = false;

    }

    1 reply

    C
    ClayUUID
    Legend
    February 6, 2018

    var myvid = document.getElementById("video0");

    var pauseClip = this.myPauseClip;

    myvid.addEventListener("seeking", showClip);

    myvid.addEventListener("pause", showClip);

    myvid.addEventListener("play", hideClip);

    myvid.addEventListener("timeupdate", hideClip);

    function showClip() {

         pauseClip.visible = true;

    }

    function hideClip() {

         pauseClip.visible = false;

    }

    Not tested, but should work. Mostly. You may have to listen to more or different media events.

    Media events - Web developer guides | MDN

    C
    ChicoTom24Author
    Inspiring
    February 6, 2018

    Thanks for the reply.  I cannot get it to work.  It seems as if the event listeners are not triggering.  Are you adding this as a global script in Animate CC?

    C
    ChicoTom24Author
    Inspiring
    February 7, 2018

    Sorry, I should clarify.  if I place your script in frame1 with the vid component, instance named "video0", this line...

    var myvid = document.getElementById("video0");

    ...Throws this error...

    Uncaught TypeError: Cannot read property 'addEventListener' of null

    If I use the line below, I get no error, but the event listeners do not work...

    var myvid = this.video0;

    - - -

    The code below comes close, but only the initial event listener triggers.  It initially hides, but then does not show on pause.

    _root = this;

    var myvid = this.video0;

    myvid.addEventListener("pause", showClip());

    function showClip() {

         _root.myPauseClip.visible = 1;

    }

    myvid.addEventListener("playing", hideClip());

    function hideClip() {

         _root.myPauseClip.visible = 0;

    }

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