• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

how to load video in Html5 Canvas?

Explorer ,
Mar 05, 2016 Mar 05, 2016

Copy link to clipboard

Copied

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

Views

11.6K

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

LEGEND , Mar 07, 2016 Mar 07, 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,

...

Votes

Translate

Translate
Adobe Employee ,
Mar 07, 2016 Mar 07, 2016

Copy link to clipboard

Copied

Votes

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
LEGEND ,
Mar 07, 2016 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.

Votes

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 ,
Mar 10, 2016 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.

Votes

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
LEGEND ,
Mar 10, 2016 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.

Votes

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 ,
Jul 30, 2016 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? 

Votes

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 ,
Aug 05, 2016 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?

Votes

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
LEGEND ,
Aug 05, 2016 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.

Votes

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 ,
Aug 05, 2016 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!

Votes

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 ,
Aug 05, 2016 Aug 05, 2016

Copy link to clipboard

Copied

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

Votes

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 ,
May 17, 2022 May 17, 2022

Copy link to clipboard

Copied

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

Votes

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 ,
May 17, 2022 May 17, 2022

Copy link to clipboard

Copied

LATEST

Votes

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
Community Beginner ,
Nov 18, 2016 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

Votes

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
LEGEND ,
Nov 19, 2016 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.

Votes

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

Votes

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 ,
May 27, 2016 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.

Votes

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
LEGEND ,
May 31, 2016 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).

Votes

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 ,
May 31, 2016 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);

}

Votes

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 ,
Aug 22, 2020 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!

 

Votes

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