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

Explorer ,
Nov 22, 2017 Nov 22, 2017

Copy link to clipboard

Copied

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; 

Views

1.6K

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

correct answers 1 Correct answer

Adobe Employee , Nov 23, 2017 Nov 23, 2017
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;

Likes

Translate

Translate
Adobe Community Professional ,
Nov 23, 2017 Nov 23, 2017

Copy link to clipboard

Copied

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

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 ,
Nov 23, 2017 Nov 23, 2017

Copy link to clipboard

Copied

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 ?

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 ,
Nov 23, 2017 Nov 23, 2017

Copy link to clipboard

Copied

Look at marjantrajkovski's suggestions, those seem hopeful.

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
Enthusiast ,
Nov 23, 2017 Nov 23, 2017

Copy link to clipboard

Copied

Canvas background = transparent

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

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
Enthusiast ,
Nov 23, 2017 Nov 23, 2017

Copy link to clipboard

Copied

or just add in body

<video src="myvideo.mp4" style="z-index:-1"></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
Explorer ,
Nov 23, 2017 Nov 23, 2017

Copy link to clipboard

Copied

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

Could you perhaps supply a full example ?

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 ,
Nov 23, 2017 Nov 23, 2017

Copy link to clipboard

Copied

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.

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 Employee ,
Nov 23, 2017 Nov 23, 2017

Copy link to clipboard

Copied

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;

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 ,
Nov 14, 2020 Nov 14, 2020

Copy link to clipboard

Copied

LATEST

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!

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