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

[NeoInTheMatrix]

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; 

} 

[Colin Holgate]

I haven't tried the applying video to a bitmap approach, but there is another way you can solve the same problem. You could use a video component and an image component. The image component will sit on top of the video one. You can give the video component an instance name, and control it with getElementById. Like this:

var video = document.getElementById("videoname");

video.play();

[NeoInTheMatrix]

I don't think I can use image components because I have alot of keyframes and stuff in my movieclips/timelines, wouldn't that mean I have to convert all of that? And then I wont be able to get a proper preview it would just look like a ton of grey boxes ?

[Colin Holgate]

Look at marjantrajkovski's suggestions, those seem hopeful.

[marjantrajkovski]

Canvas background = transparent

<div id="dom_overlay_container" style="z-index:-1">

[marjantrajkovski]

or just add in body

<video src="myvideo.mp4" style="z-index:-1"></video>

[NeoInTheMatrix]

How can I use that for a specific video with a precise size / location?

Could you perhaps supply a full example ?

[Colin Holgate]

The part I was saying, about using a video component, would solve the position and size issues (you can resize and position the component to fit in the right place for your animation). Doing the index -1 and transparent background canvas would solve the other part of the problem.

By the way, you can tween a video component on the stage. It would be possible to have a video playing and also tracking a moving gap in your animation.

[UDESCO · Accepted solution]

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]

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!