Copy link to clipboard
Copied
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.
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
how do you detect when the video completes play?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
the ended and onended events don't work in animate canvas.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
i don't know why they don't work, i just know ended and onended don't work (for me).
Copy link to clipboard
Copied
Were you targeting the component when you tried, or the element? Adding event listeners to the component instance won't do anything.
Copy link to clipboard
Copied
component. let me try the element...
Copy link to clipboard
Copied
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');
}
Copy link to clipboard
Copied
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!");
});
});
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
thanks.
unticking 'loop' solved the problem.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
It sounds like you've changed your action to something that doesn't work.
Copy link to clipboard
Copied
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;
});
});
Copy link to clipboard
Copied
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;
});
});
Copy link to clipboard
Copied
Thank you so much for your help!
it worked perfectly!
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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");
Copy link to clipboard
Copied
Maybe because your code is missing all the closing brackets?
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Indeed, a looping video never ends.
Copy link to clipboard
Copied
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.