Highlighted

how to load video in Html5 Canvas?

Explorer ,
Mar 05, 2016

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

Views

9.3K

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

how to load video in Html5 Canvas?

Explorer ,
Mar 05, 2016

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

Views

9.3K

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
Mar 05, 2016 0
Adobe Employee ,
Mar 07, 2016

Copy link to clipboard

Copied

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
Reply
Loading...
Mar 07, 2016 0
Adobe Community Professional ,
Mar 07, 2016

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Mar 07, 2016 3
Explorer ,
Mar 10, 2016

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Mar 10, 2016 1
Adobe Community Professional ,
Mar 10, 2016

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Mar 10, 2016 0
New Here ,
Jul 30, 2016

Copy link to clipboard

Copied

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? 

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
Reply
Loading...
Jul 30, 2016 0
Explorer ,
Aug 05, 2016

Copy link to clipboard

Copied

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?

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
Reply
Loading...
Aug 05, 2016 0
Adobe Community Professional ,
Aug 05, 2016

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Aug 05, 2016 1
Explorer ,
Aug 05, 2016

Copy link to clipboard

Copied

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!

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
Reply
Loading...
Aug 05, 2016 0
Explorer ,
Aug 05, 2016

Copy link to clipboard

Copied

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

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
Reply
Loading...
Aug 05, 2016 0
Community Beginner ,
Nov 18, 2016

Copy link to clipboard

Copied

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

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
Reply
Loading...
Nov 18, 2016 0
Adobe Community Professional ,
Nov 19, 2016

Copy link to clipboard

Copied

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

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
Reply
Loading...
Nov 19, 2016 0
Community Beginner ,
Nov 19, 2016

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Nov 19, 2016 0
New Here ,
May 27, 2016

Copy link to clipboard

Copied

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.

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
Reply
Loading...
May 27, 2016 0
Adobe Community Professional ,
May 31, 2016

Copy link to clipboard

Copied

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

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
Reply
Loading...
May 31, 2016 0
New Here ,
May 31, 2016

Copy link to clipboard

Copied

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

}

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
Reply
Loading...
May 31, 2016 0
New Here ,
Aug 22, 2020

Copy link to clipboard

Copied

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!

 

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
Reply
Loading...
Aug 22, 2020 0