Hiding video component after video has finished.

[TylerGed]

Hi, I am currently creating an interactive documentary in an HTML5 canvas where it has to start with a video auto playing and then goes to my menu screen with buttons. I have added my video through the video component and when I test it, the video plays over everything but then when is finished it just does nothing. I have search a lot and cannot find how I hide the video after it has finished so that the user can then navigate the menu.

Could anyone help me with this? Would me massively appreciated.

[Colin Holgate · Accepted solution]

Any HTML5 components that you add to the timeline can be positioned like any other timeline object. If you jump from the intro to your menu frame, just make sure the component is moved off screen, or removed from the timeline.

[kglad]

how do you detect when the video completes play?

[Colin Holgate]

Check this page for how to listen for when a video component has ended:

HTML Audio/Video DOM ended Event

The "myVideo" part would be replaced with whatever instance name you give your video component, in the Properties panel.

[kglad]

the ended and onended events don't work in animate canvas.

[ClayUUID]

Why wouldn't they? The video component is just a jQuery wrapper around a vanilla HTML video element. Something like this should work:

function doComplete() {

     exportRoot.play();

}

var vid = document.getElementById("myVideo");

vid.addEventListener("ended", doComplete);

vid.addEventListener("stalled", doComplete);

vid.addEventListener("error", doComplete);

BTW, video will not autoplay on iOS devices.

[kglad]

i don't know why they don't work, i just know ended and onended don't work (for me).

[ClayUUID]

Were you targeting the component when you tried, or the element? Adding event listeners to the component instance won't do anything.

[kglad]

component.  let me try the element...

[kglad]

this failed (with video instance component name of v):

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

$("#v")[0].onended = function(){

alert( $("#v")[0]);

}

}, this, true);

and this failed:

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

$("#v")[0].addEventListener('ended', F)

}, this, true);

function F(){

alert('h');

}

[ClayUUID]

I suspect your parameter order is wrong. These all work:

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

    $("#v").on("ended", function() {

        alert("eek!");

    });

});

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

    $("#v")[0].onended = function() {

        alert("ook!");

    };

});

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

    $("#v")[0].addEventListener("ended", function() {

        alert("ack!");

    });

});

[kglad]

your 2nd snippet is exactly the same as my first (except for a different alert message).

in any case, i copied and pasted each of your 3 snippets and tested separately and don't see an alert.  i tested with ff,chrome,ie and edge.  i tested with 3 different mp4's.  i confirmed that i do see alert's in my browsers.

do you see an alert with any of those?

[ClayUUID]

Yes, I do see an alert with all of them, otherwise I wouldn't have said they all work. I just re-tested in FF, Chrome, IE, and Edge, and all variations work in all of them.

Setup is a single-frame main timeline with a video component named "v" in one layer, and the code in another layer. "Loop" is disabled on the video.

[kglad]

thanks. 

unticking 'loop' solved the problem.

[Edgardo_Ocampo]

I tried the code

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

    $("#v").on("ended", function() {

        alert("eek!");

    });

});

and it worked, never the less if I change the alert to any other action it doesn't happen any ideas?

[ClayUUID]

It sounds like you've changed your action to something that doesn't work.

[reinierv9028469]

I wan't to hide a button when the video has ended but is does not work any idea why?

My code:

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

    $("#VideoPlayer_Mc").on("ended", function () {

        this.Back_Btn.visible=false;

    });

});

[ClayUUID]

Your problem has nothing to do with video. It has to do with the execution context of event handlers in Canvas documents. By default, event handlers execute so that this points to the global window object.

Re: HTML 5 Mouseover button targeting

This should work for you:

var _this = this;

_this.VideoPlayer_Mc.on("added", function () {

    $("#VideoPlayer_Mc").on("ended", function () {

        _this.Back_Btn.visible=false;

    });

});

[reinierv9028469]

Thank you so much for your help!

it worked perfectly!

[kryschen]

After two weeks … i give up! My animate ignores "ended". There is no chance it will trigger everthing. Will there be a running dokument for download?

[Edgardo_Ocampo]

I have followed the instructions but when I test it the video doesn't show.

var aud = document.getElementById("myAudio");

aud.addEventListener("ended", function() {

    alert("The audio has ended");

[ClayUUID]

Maybe because your code is missing all the closing brackets?

[Edgardo_Ocampo]

I correct it to

var aud = document.getElementById("myVid");

aud.addEventListener("ended", function() {

    alert("The audio has ended");

});

The video plays but at the end the alert its not showing am i doing something wrong?

[ClayUUID]

Indeed, a looping video never ends.

[kglad]

i figured that was the case during my testing.  but that was while i was trying to add the listener to the component.

after your suggestion to use the element, the default loop was ticked again and i failed to untick it while testing.