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;
}
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;
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();
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 ?
Copy link to clipboard
Copied
Look at marjantrajkovski's suggestions, those seem hopeful.
Copy link to clipboard
Copied
Canvas background = transparent
<div id="dom_overlay_container" style="z-index:-1">
Copy link to clipboard
Copied
or just add in body
<video src="myvideo.mp4" style="z-index:-1"></video>
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 ?
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.
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;
Copy link to clipboard
Copied
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!