How to add a video behind canvas elements and control it?

Question

I understand that video components in html5 exist as div layers floating above the canvas, so I was wondering how to use a different method.

I came across a post by ClayUUID with the code posted below

I have 2 questions about using this :

1. I added the video path location of my video to this code, and put it in my first frames actions on the top layer in my html5 doc. But nothing is happening, I dont see a video. Am I using the code wrong? 2. How can I go about stopping and hiding / starting and showing the video and changing the size?

var myClip = makeBitmapVideo(this, "C:/Users/Blah/Downloads/video.mp4");

myClip.video.play();

myClip.rotation = 45;

// accepts target clip to create bitmap in, file path to video

// returns reference to bitmap object, with access to video element via "video" property

function makeBitmapVideo(clip, path) {

var vid = document.createElement("video");

vid.src = path;

var bmp = clip.addChild(new createjs.Bitmap(vid));

bmp.video = vid;

return bmp;

}

UDESCO · Accepted Answer

Yes, as Colin mentioned, you can place a video component and set its desired position and size on the Animate stage itself.

Now make the stage background color as transparent and add the below line of code in frame scripts:

dom_overlay_container.style.zIndex = -1;

TristanW · Answer

Hi. Follow up question. So I used the ( -1) dom overlay script to place my video behind a shape layer on my html5 canvas (background transparent) and it works great. However, I lost all control over the video controls. So cannot play/pause, or increase/decrease the sound. Why is that? And is there a workaround to get those abilities back (while still using the script)? Or would manual controls need to be constructed, in this instance?

Note, the shape layer was just a simple filled circle shape made into an mc and within that mc, made a shape tween to make the circle travel across the length of the window/art canvas area.

Thank you, in advance!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded