Highlighted

Fade In/Out a video

New Here ,
Aug 22, 2020

Copy link to clipboard

Copied

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!

Views

14

Likes

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

Fade In/Out a video

New Here ,
Aug 22, 2020

Copy link to clipboard

Copied

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!

Views

15

Likes

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
Aug 22, 2020 0
Adobe Community Professional ,
Aug 22, 2020

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Aug 22, 2020 0