Fade In/Out a video

[valeri8398]

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!

[Joseph Labrecque]

SInce you are adding it to the DOM, it exists overlaid acrosss your Canvas element. So you cannot control it from the timeline but you can perform CSS transitions upon it via the external HTML. Just find the ID and target it via CSS.