how to load video in Html5 Canvas?

[sabiqxs]

how to load video external in Animate CC canvas using createJs?

[Preran]

Found a post that could provide you with insights.

http://stackoverflow.com/questions/28943039/can-you-load-video-in-a-flash-cc-html5-canvas-project

[ClayUUID · Accepted solution]

Create an HTML video tag in a DOM element positioned over the canvas.

Here are a couple of simple functions for managing DOM element creation in Canvas mode:

// Create a DIV layer above the canvas
// Accepts X, Y, width, height, HTML content, and CSS styling (optional)
// CSS styling is a string with format "prop:value; prop:value" etc.
// CSS properties must use JavaScript aliases
// Returns a reference to the DIV, required to remove it later
//
// DIV is added as a child to the CreateJS stage, allowing all
// applicable properties and methods to be used.
// http://www.createjs.com/docs/easeljs/classes/DOMElement.html
makeDiv = function(x, y, w, h, html, css) {
    // create and initialize DIV element
    var d = document.createElement("div");
    d.style.visibility = "hidden";
    d.style.position = "absolute";
    d.style.left = 0;
    d.style.top = 0;
    d.style.width = w + "px";
    d.style.height = h + "px";
    d.style.overflow = "auto";
    d.innerHTML = html;
    // apply styling
    if (css) {
        var cssPair;
        var cssStyles = css.split(";");
        var i = cssStyles.length;
        while ( i ) {
            cssPair = cssStyles[--i].split(":");
            if (cssPair.length == 2) {
                d.style[cssPair[0].trim()] = cssPair[1].trim();
            }
        }
    }
    // attach element to CreateJS stage
    canvas.parentNode.appendChild(d);
    var dcjs = new createjs.DOMElement(d);
    dcjs.x = x;
    dcjs.y = y;
    return(stage.addChild(dcjs));
}

// Remove a DIV created by makeDiv
rmDiv = function(ref) {
    // sanity check
    if (!ref) {
        return;
    }
    // remove the HTML element
    var elem = ref.htmlElement;
    if (elem.parentNode) {
        elem.parentNode.removeChild(elem);
    }
    // remove the DOMElement proxy
    stage.removeChild(ref);
}

Example:

makeDiv(0, 0, 640, 480, "<video src='myvideo.mp4' autoplay controls></video>");

I really should post all this stuff on a blog or something.

[sabiqxs]

wow... its helped for me... video control is showing in video.

but what is function DOMElemet? i mean is for what the function of DOMElement?

and

can a canvas using form of the textfield?

thanks clay's.

[ClayUUID]

Everything there is to know about DOMElement:

EaselJS v0.8.2 API Documentation : DOMElement

Short answer, it lets you use many of the CreateJS methods to manipulate user-created DOM elements as if they were native CreateJS canvas elements.

[erikl61197042]

Thanks, its working for me.  There is some additional customization I'd like to do such as rotating the video 10 degrees and how can I remove the video once its done playing? 

[JeelyK]

Hi, I'm super new to coding and don't know very much. I'm trying to take this code and incorporate a video into my html5 canvas document. Where in this code would I put the file path to my video? Do I need to manipulate other things inside this code, like the width and height of the video, etc?

[ClayUUID]

Don't use the version of makeDiv() in this thread. There's a better updated version here: Re: How can I add video

All it does is create arbitrary HTML content over the stage. If you want to know how to do a specific HTML thing, there are many, many detailed tutorials available online.

[JeelyK]

Thank you, this helps a lot. Is there a way to make it so that the video only appears on one specific frame of my timeline? I added the call to it on frame three which is where I want it to show up, but I'd like it to only appear on that frame and I don't know how to make it disappear on the following frame.

Your help is much appreciated!

[JeelyK]

Nevermind, I found that part of the code in your comments!

[gradyn70226043]

Hi, can i have the code for the updated version? Because the link is not available anymore

[gradyn70226043]

@ClayUUID 

[chemicalscream]

Thank you so much!! After tinkering around I bit I found out that if you replace the <video></video> tags with youtube's embed code, you can embed youtube videos as well using your code!

replace:

makeDiv(0, 0, 640, 480, "<video src='myvideo.mp4' autoplay controls></video>");

with:

makeDiv(0, 0, 640, 480, "<iframe width='600' height='338' src='youtubeurl' frameborder='0' allowfullscreen></iframe>");

to load youtube video in your html5 canvas

[ClayUUID]

I'd certainly hope so. All it does is create an HTML DIV element. You can put literally any HTML content in it.

[chemicalscream]

Haha, sorry. I'm so dumb when it comes to Flash/Animate/HTML5 and for the most part it's a completely foreign language to me. Anytime I figure out something in the program and it WORKS for me, I want to throw a party! So anyways, yeah I just wanted to point that out to anyone else who may be relatively new to animate and trying to figure things out.

THANK YOU for helping us beginners out.

[CAR AUDIO GUY]

can anyone tell me how to get this to scale responsively? I get the video to play on the stage, but when i scale the browser it does not scale with it.

[ClayUUID]

It's complicated (also, Adobe's use of the terminology notwithstanding, just stretching things is *not* responsive design). In my own scaling application the Animate content is sandboxed in an iframe, with the navigation interface surrounding it being plain vanilla HTML. Using jQuery, I assign a resize listener to the top-level window and call this function when the page is resized:

function handleResize(e) {
    var w = $(this).width();
    var h = $(this).height();
    var scale = Math.min(w / _LSN_WIDTH, h / _LSN_HEIGHT);
    // scale UI
    $("#container").css({"-webkit-transform" : "scale(" + scale + ")"});
    $("#container").css({"-ms-transform" : "scale(" + scale + ")"});
    $("#container").css({"transform" : "scale(" + scale + ")"});
    $("#container").css({"left" : (w / 2 - (_LSN_WIDTH * scale) / 2) + "px"});
    // scale content
   _contentCanvas.width = _LSN_WIDTH * scale;
   _contentCanvas.height = _LSN_HEIGHT * scale;
   _contentCanvas.style.width = _LSN_WIDTH + "px";
   _contentCanvas.style.height = _LSN_HEIGHT + "px";
   _contentStage.scaleX = scale;
   _contentStage.scaleY = scale;
}

The content iframe is absolute-positioned and named "content". _LSN_WIDTH/HEIGHT are globals storing the content's native resolution. _contentCanvas is a pointer to the Animate canvas, and _contentStage is a pointer to the Animate stage (exposed within Animate as the globals "canvas" and "stage", respectively).

[CAR AUDIO GUY]

My Brother is a programmer, he figured it out for me. He said its a bit clunky but it works and that is all i care about. Just so you know this was the way he fixed it...

this.makeDiv = function (html) {

  var widthToHeight = stageWidth / stageHeight;

  var newWidth = window.innerWidth;

  var newHeight = window.innerHeight;

  var newWidthToHeight = newWidth / newHeight;

  var page_canvas = document.getElementById("canvas");

  if (newWidthToHeight > widthToHeight) {

  newWidth = newHeight * widthToHeight;

  page_canvas.style.height = newHeight + "px";

  page_canvas.style.width = newWidth + "px";

  } else {

  newHeight = newWidth / widthToHeight;

  page_canvas.style.height = newHeight + "px";

  page_canvas.style.width = newWidth + "px";

  }

//I NEED TO TAKE SOME MEASUREMENTS TO SIZE AND POSITION THE VIDEO ON THE STAGE WHERE IN NEED IT//

  scale = newWidthToHeight / widthToHeight;

  var x = newWidth * 0.499 + ((window.innerWidth - newWidth) / 2); // left of viewport / browser_width

  var y = newHeight * 0.258 + ((window.innerHeight - newHeight) / 2); // top of viewport / browser_height

  var w = newWidth * 0.404;  // (right-left) / browser_width

  var h = newHeight * 0.412;  // (bottom-top) / browser_height

  var d = document.createElement("div");

    d.setAttribute("id", "vidbox");

  d.style.cssText = "visibility:visible; position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:hidden;";

  d.innerHTML = html;

  // attach element to CreateJS stage 

  canvas.parentNode.appendChild(d);

}

[valeri8398]

Hi,

can anyone tell me, how can I fade in/out the video, which is created with the code above?

makeDiv = function(x, y, w, h, html, css) {

...

}

Thanks for your help!