15 Replies Latest reply on Nov 19, 2016 9:48 AM by ClayUUID

    how to load video in Html5 Canvas?

    sabiqxs Level 1

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

        • 2. Re: how to load video in Html5 Canvas?
          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.

          4 people found this helpful
          • 3. Re: how to load video in Html5 Canvas?
            sabiqxs Level 1

            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.

            1 person found this helpful
            • 4. Re: how to load video in Html5 Canvas?
              ClayUUID Adobe Community Professional

              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.

              • 5. Re: how to load video in Html5 Canvas?
                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.

                • 6. Re: how to load video in Html5 Canvas?
                  ClayUUID Adobe Community Professional

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

                  • 7. Re: how to load video in Html5 Canvas?
                    CAR AUDIO GUY Level 1

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

                     

                     

                    }

                    • 8. Re: how to load video in Html5 Canvas?
                      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? 

                      • 9. Re: how to load video in Html5 Canvas?
                        JeelyK Level 1

                        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?

                        • 10. Re: how to load video in Html5 Canvas?
                          ClayUUID Adobe Community Professional

                          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.

                          • 11. Re: how to load video in Html5 Canvas?
                            JeelyK Level 1

                            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!

                            • 12. Re: how to load video in Html5 Canvas?
                              JeelyK Level 1

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

                              • 13. Re: how to load video in Html5 Canvas?
                                chemicalscream Level 1

                                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

                                • 14. Re: how to load video in Html5 Canvas?
                                  ClayUUID Adobe Community Professional

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

                                  • 15. Re: how to load video in Html5 Canvas?
                                    chemicalscream Level 1

                                    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.