Show button when video component stops playing?

[warpigs666]

Hi. Is there anyway to use JavaScript in html5 to show a button or symbol once a video component stops play back?

[warpigs666]

Really I’m just trying to figure out how to do anything once a video component has stopped playing. It doesn’t need to be just show/hide something, I’d also be interested in how to move to the next frame once a video component stops playing if that is easier.

[JoãoCésar]

Hi.

Do you mean when the video playback reachs the end? If so, make sure your component's loop property is unchecked and try this:

var that = this;
var button = that.yourButton;
var videoURL = "https://images-tv.adobe.com/avp/vr/15a99ccf-0e7c-4601-b270-87dd82624086/5078a43c-81f9-4a93-836c-8152...";
function endedHandler(e)
{
     button.visible = true;
     that.gotoAndStop(1);
}
that.stop();
that.video.on("added", function()
{
    $("#video")[0].src = videoURL;
    $("#video")[0].addEventListener('ended', endedHandler, false);
}, that, true);

Regards,

JC

[warpigs666]

Thanks so much, but is there any chance you could write this out for someone who doesn't really know anything about JS (me)? I don't actually understand the "this, that" usage or where to put the names of my video component or button name in the above code... sorry I'm still learning all this...

[JoãoCésar · Accepted solution]

Hi.

Here is a sample that hopefully will help clarify things for you.

animate_cc_html5_canvas_video_stops_playing.zip - Google Drive

Please let me know if you still have any further questions.

Regards,

JC

[warpigs666]

Thanks! It helps a lot but I guess I'm just still having a hard time understanding JS. I'll work on this. But one question first, in the code below you're using a url for the video, what would I put if the video is just part of my file/site:

Your code as I understand it:

//these lines define 3 variables: continueButton, videoURL, and currentTimeline. How would I swap in my video, which I'll call videoOne ? //

var continueButton = this.continueButton;

var videoURL = "https://images-tv.adobe.com/avp/vr/15a99ccf-0e7c-4601-b270-87dd82624086/5078a43c-81f9-4a93-836c-8152...";

currentTimeline = this;

//these lines are saying to create a function when the video component is added to the stage? And that function adds an event listener which listens for the end of the video? //

this.video.on("added", function()

{

    $("#video")[0].src = videoURL;

$("#video")[0].addEventListener('ended', currentTimeline.endedHandler);

});

//these lines define a function that sets the visibility of the continueButton? //

this.endedHandler = function(e)

{

continueButton.visible = true;

continueButton.on("click", currentTimeline.gotoFrame2);

};

//these lines define a function to go to frame 2 and stop, but why can't you just write currentTimeline.gotoAndStop(2) in the above function instead of creating a separate function for this? As in why do I need this.gotoFrame2 ? //

this.gotoFrame2 = function(e)

{

currentTimeline.gotoAndStop(2);

};

Sorry I know this forum isn't meant to be a coding bootcamp, I'm going to ask some people about this irl as well. But in any case this example file is a lot of help.

[JoãoCésar]

I used that video so I wouldn't have to provide one myself. If you are going to use a video from your server, you can use a relative path like:

media/yourVideo.mp4

or just

yourVideo.mp4.

You can set the source with code or through the Component Parameters panel.

The other questions:

- If you are referring to the video path, please read above.

- Yes and yes.

- Yes.

- Because I cannot write continueButton.on("click", currentTimeline.gotoAndStop(2)). When you pass a function as a parameter, you pass a reference to it not an actual call. I could've used an anonymoyus function like this:

continueButton.on("click", function(e)

{

     currentTimeline.gotoAndStop(2);

});

But I supposed this approach would create more confusion.

Also, a function that works as an event handler may use the event fired as parameter which wouldn't be possible to send to the gotoAndStop method.

[warpigs666]

Thanks a lot. I'm going to be speaking with someone else about this as well but this was very helpful. One last thing, so if instead of making the button visible when the video ended, what if I want to go to the next frame so that I could make the button slide in from offscreen, I would change this part of the code right:

this.endedHandler = function(e)

{

continueButton.visible = true;

continueButton.on("click", currentTimeline.gotoFrame2);

};

[JoãoCésar]

Yeah.

You can just use currentTimeline.gotoAndStop(2); inside of the endedHandler function.

[warpigs666]

Thanks. So would there be a way to set the videoURL variable to be whatever video component is on the current frame? I don't understand why I need to input a variable with a location of the video when that video location is already being input to the frame via the video component. Do you see what I mean. Can't I just say something like:

var videoLocationVAR = "the-current-video-component-on-this-frame";

this.CURRENT-VIDEO-COMPONENT.on("added", function()

{

    $("#CURRENT-VIDEO-COMPONENT")[0].src = videoLocationVAR;

$("#CURRENT-VIDEO-COMPONENT")[0].addEventListener('ended', currentTimelineVAR.endedHandler);

});

Or maybe I'm misunderstanding something fundamental... right now I have 8 frame and each frame has the same video component placed on it with a different video linked in the component's source path. Am I doing this wrong? Should I be using a different video component for each frame?

[warpigs666]

  Basically what I have is that on frame 1 there’s a button, someone clicks that button and it goes to frame 2 and stops, where there is a video component, and what I want to happen is that when the video component stops playing another button becomes visible, and a person can click that button to go to frame 3, etc.