Video component overlaps all the other animation items

[sabermaster28]

The video component overlaps all the other animation items even though I have placed it on the bottom layer I am using an mp4 in the components video application. Is there a way to fix the problem.

[RandomlyFish]

Have you tried adding the video component inside a symbol? The video component is likely adding a video object as a child of the video component's parent, which would mean that the video object would be placed on top of everything else inside the parent. By placing the video component inside a symbol, the parent of the video component would be that symbol.

[ClayUUID]

If you're working in an HTML5 Canvas document, components will always overlap everything on the stage, no matter what you do, because they're not drawn on the stage canvas. They're separate browser DOM elements floating above the canvas. It's physically impossible for anything on the stage to be above them.

[sabermaster28]

I placed the video component in a symbol and it did not work.  What if you change the file type to flv or another file associated with

Adobe Animate. Is their any other possibility.

[ClayUUID]

You still haven't said whether you're working in an AS3 or Canvas document.

[sabermaster28]

Im working fla canvas mode then im exporting to html 5 oma.

[ClayUUID]

Then re-read my first post in this thread.

[Colin Holgate]

I had a few days where Animate wasn't working, so I couldn't test an idea. Can you tell me what is the difference between what is being asked for and what I've done here?:

quail

[ClayUUID]

That isn't using a video component though, it's piping video onto the stage via a bitmap object, which doesn't work on iOS.

Putting Video on Canvas

[Colin Holgate]

I didn't see any mention of iOS, but it's good to know that it doesn't work there.

I was more thinking about the need there was, and not the question that was asked. I'm not knowingly doing any drawImage(), but I suppose CreateJS does when it sees my line:

var bitmap = new createjs.Bitmap(vid);

BTW, the animation does appear over the first frame of the video on my iPad, though the whole video has to download before it does that. I'm trying to see if there's a way to set it playing. I should use a shorter clip, it takes awhile for iPad to load the video.

[Preran]

Hi Michael,

If any of the solutions here helped you, can you take a moment to mark it as correct. It will help other users with a similar question that come across this post.

Thanks,

Preran

[UDESCO · Accepted solution]

If you'd like your video at the bottom and other animations playing on top of it, you can try this:

1. Set the stage color to transparent in Properties panel.

2. add the following line of code in Actions panel on frame 1:

          var dom_container = document.getElementById("dom_overlay_container");

          dom_container.style.zIndex=-1;

This will place the Components as underlay instead of overlay to the canvas.

[fabiodessena]

I had the same problem and this worked!!!! Thanks so much!!

Fabio

[Dinu kumar]

Hi Fabiodessena, I have also same Issue "The video component placed it on the bottom layer I am using an mp4 in the components video application." but above video layer animation work not visible please help me. how to solve the issue.

[Dinu kumar]

Hi, I cant understand Where to add the above code in animate CC HTML Canvas, Please reply back.

[TexZaa]

I tried this and it worked on all browsers except Chrome.  That's a deal-killer.