Show movie clip when video component is seeking? HTML5

[ChicoTom24]

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

[ClayUUID]

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

[ChicoTom24]

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?

[ChicoTom24]

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;

}

[ClayUUID]

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.

[ChicoTom24 · Accepted solution]

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;

}