Fade In/Out a video

Hi,

I found a way to load video into HTML5 Canvas: https://community.adobe.com/t5/animate/how-to-load-video-in-html5-canvas/m-p/11379191?page=1#M206901

It works great!

Can anyone tell me then, how can I fade in/out the video, which is created with this code?

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

}

Thanks for your help!