How to put animation on top and behind the video in HTML5 Canvas?

[alexpestov]

The video should be in the middle: some elemts on top, most of them — behind.

Here's a quick demo I made in Google Web Designer to make sure it works there:

I read may topics, but all of them are about putting the video on the very bottom with z-index and making the canvas transparent. I need animated elements behind the video and on top of it. Any workarounds for this? 

[BlueRedcz]

if you want to move something in front of the stage, try to add an object on the stage on the position you want in a delay, after the component is loaded and played.

root = this;
var object1 = new lib.obj1(); // named object from library
function place1() {
	root.addChild(object1);
	object1.x = 190;
	object1.y = 150;
}
setTimeout(function(){ place1(); }, 3000);

[alexpestov]

If you're proposing to add this code on Stage in Animate — it won't work since the video player component would be placed on top of the Canvas, regardless of its layers. And the object for library would be placed on Canvas, still under the video.

[ClayUUID]

If you're asking if it's possible to have the canvas element be simultaneously above and below the video element, then... no.

[alexpestov]

I'm asking if there's a way to have a video on Canvas in some other way rather than with a default component that always gets on top as a separate div. Or maybe there's another trick?

Can I make 2 different Animate documents: one with all the stuff + video player and the second one with elements on top of the video only? And then put it all together in one html file like that:

Canvas with video overlapping elements and transparent background

Video player

Canvas with all other stuff

I wanted to try it, but I don't know how to do that. I'm just a designer who used to do simple tasks like that in Flash 20 years ago, and wondering why the modern technology can't handle it.

[JoãoCésar]

Hi.

You can actually use a bitmap to display the video as a regular CreateJS object.

Try it:

https://bit.ly/3q8KbtI

JavaScript / JS Code:

function onDrawEnd()
{
	var video = document.getElementById("yourVideoID"); // the id is set in the Properties panel
	var bitmap = new createjs.Bitmap(video);
	
	this.stop(); // this is important if your timeline has only one frame. Otherwise changing indexes may not work properly
	video.style.opacity = 0; // a workaround for hiding the video. Not sure if this is the best approach
	bitmap.scale = 360 / 1080; // scaled video width on the IDE / original video width
	bitmap.x = 90
	bitmap.y = 90;
	this.addChildAt(bitmap, 1); // adds the child at the desired index
}

stage.on("drawend", onDrawEnd, this, true);

Source / download / files / FLA:

https://bit.ly/3CK3OO1

This is the easiest part.

The hardest part is to handle mouse/pointer events... Please let us know if you find a solution or if you struggle doing this.

I hope it helps.

Regards,

JC

[ClayUUID]

The problem with this approach is that using video as a source for a canvas bitmap doesn't work in mobile Safari. At least, it didn't a few years ago.

[JoãoCésar]

Yeah... Wish we had a better way of doing this.