Skip to main content
S
sabiqxs
Participant
March 5, 2016
Answered

how to load video in Html5 Canvas?

  • March 5, 2016
  • 4 replies
  • 12953 views

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

This topic has been closed for replies.
Correct answer ClayUUID

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.

4 replies

CAR AUDIO GUY
CAR AUDIO GUY
Participating Frequently
May 31, 2016

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

}

V
valeri8398
Participant
August 22, 2020

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!

 

CAR AUDIO GUY
CAR AUDIO GUY
Participating Frequently
May 27, 2016

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.

C
ClayUUID
Legend
May 31, 2016

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).

C
ClayUUIDCorrect answer
Legend
March 7, 2016

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.

    S
    sabiqxsAuthor
    Participant
    March 10, 2016

    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.

    C
    ClayUUID
    Legend
    March 10, 2016

    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.

    Preran
    Community Manager
    PreranCommunity Manager
    Community Manager
    March 7, 2016

    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices