4 Replies Latest reply on May 28, 2016 11:35 AM by kglad

    Scale video with HTML5 canvas. Need guidance...

    CAR AUDIO GUY Level 1

      I am adding a video (in a small window) on my HTML5 canvas using the function below. It works great except It does not resize with the canvas. I have an action at the beginning of my timeline that resizes the canvas to the browser window size. This is getting a bit more complicated than I can handle. I need some direction on how to apply this same resize functionality to video. Basically i want it to also resize with the browser but stay in its location on the stage.

       

      //Add Video//

       

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

        // create and initialize DIV element

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

        d.style.cssText = "visibility:visible; position:absolute; left:0; top:0; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

        d.innerHTML = html;

        // attach element to CreateJS stage

        canvas.parentNode.appendChild(d);

        var cjsDom = new createjs.DOMElement(d);

        cjsDom.x = x;

        cjsDom.y = y;

        return stage.addChild(cjsDom);

       

      }

       

      this.makeDiv(600, 600, 1920, 1080, "<video width=640 height=480 src='WEBLINKSETUP.mp4' autoplay></video>");

       

       

      __________________________________________________________________________________________ _________________________________________________________

       

       

       

      //Resize Stage//

       

      var page_body = document.getElementsByTagName("body")[0];

      page_body.style.backgroundColor = "#000000";

      page_body.style.overflow = "hidden";

      page_body.style.position = "fixed";

       

       

      var page_canvas = document.getElementsByTagName("canvas")[0];

      stageWidth = page_canvas.width;

      stageHeight = page_canvas.height;

       

       

      var viewport = document.querySelector('meta[name=viewport]');

      var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

       

       

      if (viewport === null) {

      var head = document.getElementsByTagName('head')[0];

      viewport = document.createElement('meta');

      viewport.setAttribute('name', 'viewport');

      head.appendChild(viewport);

      }

       

       

      viewport.setAttribute('content', viewportContent);

       

       

      function onResize() {

      var widthToHeight = stageWidth / stageHeight;

      var newWidth = window.innerWidth;

      var newHeight = window.innerHeight;

      var newWidthToHeight = newWidth / newHeight;

      //

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

      }

      scale = newWidthToHeight / widthToHeight;

      stage.width = newWidth;

      stage.height = newHeight;

      page_canvas.style.marginTop = ((window.innerHeight - newHeight) / 2) + "px";

      page_canvas.style.marginLeft = ((window.innerWidth - newWidth) / 2) + "px";

      }

       

       

      window.onresize = function () {

      onResize();

      }

       

       

      onResize();