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

Explorer ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

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:

Screenshot 2022-03-15 at 00.44.07.png

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? 

Views

90

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

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);

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 15, 2022 Mar 15, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines