Copy link to clipboard
Copied
We have a project that plays a short 1 minute video component with the intention of moving to the next frame after it plays (Animate Canvas). There are a couple of threads that detail some information, but none seem relevant to my particular project and are not working for me after reent update. The intention is to stop the fram at the video component in the middle of the timeline, play a one minute video, then proceed to play the rest of the timeline after the video has ended. With recent December update to Animate, previous methods detailed to accomplish this no longer work. Does anyone know of a working function to do this?
Thank you in advance, I've been trying to solve this for weeks now.
Well I'm out of ideas. Maybe don't use the video component at all? Manually adding a video element floated over the stage is just a few lines of JavaScript. This is the code I've posted around here a few times. Doesn't work with "responsive" canvases though.
// Create a DIV layer above the canvas
// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)
// CSS styling is a CSS-formatted literal string
mkDiv = function(id, x, y, w, h, html, css) {
var d = document.createElemen
...
Hi.
This works for me.
setTimeout(function()
{
var video = document.getElementById("video0"); // "video0" is the video component instance name
video.addEventListener("ended", function()
{
console.log("video ended");
});
}, 0);
I'm using version Animate 20.0.1 (Build 19255)
The loop property should be turned off for this event to work.
Regards,
JC
Copy link to clipboard
Copied
So you're saying you've already added an event listener to the video component's video element for the media ended event, and it's not firing?
Copy link to clipboard
Copied
Correct - I've tried several of the event listeners listed in the forums, one of them worked well for me prior to the 20.0.1 update, but post that update they are no longer working and I am getting desperate. That code was:
_this.videoDetect_mc.on("added", function () {
$("#videoDetect_mc").on("ended", function () {
_this.gotoAndPlay(10);
});
});
I should note that the reason I believe the update broke it somehow is that it still works in currently published files, but publishing it post the update, it no longer works. Setting an alert("test"); as the action does not display post video as well, so for some reason it is no longer detecting the end of the video.
Copy link to clipboard
Copied
Sounds like the listener isn't even getting assigned. What if you put an alert() inside your on "added" handler?
Copy link to clipboard
Copied
Thanks for the reply -so when I try an alert() inside the added handler, it alerts appropriately when the video loads.
Copy link to clipboard
Copied
Okay then, when the video is playing, use the browser's inspector to see if the video element has the correct ID assigned. And/or putting $("#videoDetect_mc") inside your added alert statement might provide useful output.
Copy link to clipboard
Copied
Confirmed, the ID is assigning correctly -
Copy link to clipboard
Copied
Well I'm out of ideas. Maybe don't use the video component at all? Manually adding a video element floated over the stage is just a few lines of JavaScript. This is the code I've posted around here a few times. Doesn't work with "responsive" canvases though.
// Create a DIV layer above the canvas
// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)
// CSS styling is a CSS-formatted literal string
mkDiv = function(id, x, y, w, h, html, css) {
var d = document.createElement("div");
d.id = id;
d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");
d.innerHTML = html;
canvas.parentNode.appendChild(d);
}
// Remove an element by ID name
rmDiv = function(id) {
try {
var elem = document.getElementById(id);
elem.parentNode.removeChild(elem);
}
catch(e) {}
}
Then call like mkDiv("myVideo", 100, 100, 320, 240, "<video src='bacon.mp4'>");
Copy link to clipboard
Copied
This will help, thanks - going to try this method now, I appreciate your time.
Copy link to clipboard
Copied
Hi.
This works for me.
setTimeout(function()
{
var video = document.getElementById("video0"); // "video0" is the video component instance name
video.addEventListener("ended", function()
{
console.log("video ended");
});
}, 0);
I'm using version Animate 20.0.1 (Build 19255)
The loop property should be turned off for this event to work.
Regards,
JC
Copy link to clipboard
Copied
This works! Thanks for this, really appreciate you taking the time.
Copy link to clipboard
Copied
Oh. Forgot to say that the loop property should be turned off for this event to work.
Copy link to clipboard
Copied
Hello, I'm working in Animate 21.0 and running into an issue as well. I want to detect when the video has ended and revert back to frame 1 of the timeline. I've placed the video in with Components and the Loop function is turned off.
Copy link to clipboard
Copied
Hi.
Please place this code in the frame where the video component instance is located and it should work:
setTimeout(function()
{
var video = document.getElementById("video0"); // "video0" is the video component instance name
video.addEventListener("ended", function()
{
exportRoot.gotoAndStop(0);
});
}, 0); // in some cases this delay may be set to a higher value, like 100, 300...
Please let us know.
Regards,
JC
Copy link to clipboard
Copied
Hmm, I must be doing something wrong. I've pasted the code into the same frame as the video component and changes the video component instance name (not the movie clip name). If it helps, I have uploaded the project here...
http://shiftmedia.ca/demo/overview_en.html
Thanks again for your help!
Copy link to clipboard
Copied
Sorry, I should have mentioned that I only put the code in for the HOME button instance.
Copy link to clipboard
Copied
It's harder to tell what's going on without examining the FLA, but it seems to me your video component instance is called homeVIDEO and not home-video.
Can you double-check this?
Copy link to clipboard
Copied
Hmm I've made the adjustment and I'm still running into the same issue. I've updated the files to that same link to have a look.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Using a timer to wait for a component to initialize is an unreliable, hackish solution. The proper way is to listen for the component to declare that it's ready.
this.myVideo.addEventListener("added", function() {
$("#myVideo").off("ended").on("ended", function() {
alert("done!");
})
});
Or if you'd prefer code that's more maintainable than clever:
this.myVideo.addEventListener("added", initVideo);
function initVideo() {
$("#myVideo").off("ended").on("ended", videoEnded);
}
function videoEnded() {
alert("done!");
}
Copy link to clipboard
Copied
Hey ClayUUID.
I fell the same way by adding the setTimeout as you do, but that's the only way it works for me. I wish I could use "the right way", but everything I tried with the "added" event was not working.
When I add the eventListener on Frame 0 without setTimeout, I get an error because the VideoComponent is not initialized at that moment. If I try it with your method and add an listener("added") on the VideoComponent it never catches an event!? I think that could be some kind of concurrency-issue!?
Any idea?
Copy link to clipboard
Copied
Nice!
Have you tried a higher delay? Instead of using 0, try something like 1000 or 2000 and see if it works. If it does, try to find a lower value that fits your needs. I know this is a poor workaround, but for now it should do the job.
Copy link to clipboard
Copied
The 1000 adjustement is working great now!! Thank you so much!!
Copy link to clipboard
Copied
Excellent! You're welcome!