Highlighted

Video moves position in html 5 doc

Community Beginner ,
Jan 27, 2019

Copy link to clipboard

Copied

Hi

I have created a html5 animation in Animate which contains video. When I play the exported html file it's fine but as soon as I paste the code into my page, the animated part works fine but video jumps further up the page. Please can you provide some advice as to what I'm doing wrong? Let me know if I need to provide more info. thanks

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title> Company Name</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" > <!--required for different devices-->

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/aclonica:n4:default.js" type="text/javascript"></script>

<!-- write your code here -->

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<script src="v18.js"></script>

<script>

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

function init() {

canvas = document.getElementById("canvas");

anim_container = document.getElementById("animation_container");

dom_overlay_container = document.getElementById("dom_overlay_container");

var comp=AdobeAn.getComposition("5CEE574201CB7444A14D826AE01E1F99");

var lib=comp.getLibrary();

var loader = new createjs.LoadQueue(false);

loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});

loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

var lib=comp.getLibrary();

loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad(evt, comp) {

var images=comp.getImages();

if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }

}

function handleComplete(evt,comp) {

//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.

var lib=comp.getLibrary();

var ss=comp.getSpriteSheet();

var queue = evt.target;

var ssMetadata = lib.ssMetadata;

for(i=0; i<ssMetadata.length; i++) {

ss[ssMetadata.name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata.name)], "frames": ssMetadata.frames} )

}

exportRoot = new lib.v18();

stage = new lib.Stage(canvas);

stage.enableMouseOver();

//Registers the "tick" event listener.

fnStartAnimation = function() {

stage.addChild(exportRoot);

createjs.Ticker.setFPS(lib.properties.fps);

createjs.Ticker.addEventListener("tick", stage);

}    

//Code to support hidpi screens and responsive scaling.

function makeResponsive(isResp, respDim, isScale, scaleType) {

var lastW, lastH, lastS=1;

window.addEventListener('resize', resizeCanvas);

resizeCanvas();

function resizeCanvas() {

var w = lib.properties.width, h = lib.properties.height;

var iw = window.innerWidth, ih=window.innerHeight;

var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;

if(isResp) {               

if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                   

sRatio = lastS;               

}

else if(!isScale) {

if(iw<w || ih<h)

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==1) {

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==2) {

sRatio = Math.max(xRatio, yRatio);

}

}

canvas.width = w*pRatio*sRatio;

canvas.height = h*pRatio*sRatio;

canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';

canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';

stage.scaleX = pRatio*sRatio;

stage.scaleY = pRatio*sRatio;

lastW = iw; lastH = ih; lastS = sRatio;           

stage.tickOnUpdate = false;           

stage.update();           

stage.tickOnUpdate = true;

}

}

makeResponsive(false,'both',false,1);

AdobeAn.compositionLoaded(lib.properties.id);

fnStartAnimation();

}

</script>

<!-- write your code here -->

</head>

<body class="body" onload="init();" style="margin:0px;">

<!--indent to help your code be more identifiable-->

<header class="mainHeader">

    <img src="images/logo.png">

  

      <!--navigation-->

<nav><ul>

    <li class="active"><a href="index.html">Home</a></li>

    <li><a href="pirates.html">Pirates</a></li>

    <li><a href="gamehistory.html">Game History</a></li>

    <li><a href="ourgames.html">Our Games</a></li>

    <li><a href="reviews.html">Reviews</a></li>

    <li><a href="wheretobuy.html">Where to Buy</a></li>

    <li><a href="careers.html">Careers</a></li>

    <li><a href="contact.html">Contact</a></li>

    </ul></nav>

    </header>

<!--main content area-->

<div class="mainContent">

    <div class="content">

    <article class="topContent">

        <h1>Header</h1>

            <content>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis iaculis nisi. Proin accumsan ultricies turpis, ac rutrum velit mollis vitae. Donec hendrerit eu ipsum et laoreet. Pellentesque mattis egestas aliquam. </p>

<p>

<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:600px; height:365px">

<canvas id="canvas" width="600" height="365" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>

<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:600px; height:365px; position: absolute; left: 0px; top: 0px; display: block;">

</div>

</div>

</p>

  </content>

        </article> <!—top Content end-->

    </div> <!—article end-->

</div><!—main content end-->

<!--side content to go here-->

<aside class="top-sidebar"> <!--given different classes for different styling-->

<article><img src="images/facebook.jpg" width="35" height="35" alt=""/>

<img src="images/twitter.jpg" width="35" height="35" alt=""/>

<img src="images/pintrest.jpg" width="35" height="35" alt=""/>

<img src="images/linkedin.jpg" width="35" height="35" alt=""/>

</article>

</aside>

<aside class="middle-sidebar"> <!--given different classes for different styling-->

<article>

    <h2>Top Side Bar</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis iaculis nisi. Proin accumsan ultricies turpis.</p>

    </article>

</aside>

<!--footer-->

<footer class="mainFooter">

    <p> Copyright &copy; 2018 <a href="#" title="Responsive"> Name of Company Here </a> </p>

    </footer>

   

</body>

</html>

Hi BobobobCat

Yes, the video position jump has to do with the dom_overlay_container in which the html5 video component lives. But I'm not sure what you are doing with your css addition position: absolute; left: 30px; 100px; 0px; display: block;. What is 100px? top? and 0px;? left can only be defined by one value, can't it.

Use an iFrame

The best way to nest a html5 canvas animation into another page with additional content is to install it in an iFrame. This way you keep the integrity of the Animate exported HTML document within its own window and dimensions.  See for example this page https://www.createjs.com/tutorials/Mouse%20Interaction/ . All createjs canvas examples are in iFrames within the overall page flow.

Klaus

Views

48

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

Video moves position in html 5 doc

Community Beginner ,
Jan 27, 2019

Copy link to clipboard

Copied

Hi

I have created a html5 animation in Animate which contains video. When I play the exported html file it's fine but as soon as I paste the code into my page, the animated part works fine but video jumps further up the page. Please can you provide some advice as to what I'm doing wrong? Let me know if I need to provide more info. thanks

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title> Company Name</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" > <!--required for different devices-->

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/aclonica:n4:default.js" type="text/javascript"></script>

<!-- write your code here -->

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<script src="v18.js"></script>

<script>

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

function init() {

canvas = document.getElementById("canvas");

anim_container = document.getElementById("animation_container");

dom_overlay_container = document.getElementById("dom_overlay_container");

var comp=AdobeAn.getComposition("5CEE574201CB7444A14D826AE01E1F99");

var lib=comp.getLibrary();

var loader = new createjs.LoadQueue(false);

loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});

loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

var lib=comp.getLibrary();

loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad(evt, comp) {

var images=comp.getImages();

if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }

}

function handleComplete(evt,comp) {

//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.

var lib=comp.getLibrary();

var ss=comp.getSpriteSheet();

var queue = evt.target;

var ssMetadata = lib.ssMetadata;

for(i=0; i<ssMetadata.length; i++) {

ss[ssMetadata.name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata.name)], "frames": ssMetadata.frames} )

}

exportRoot = new lib.v18();

stage = new lib.Stage(canvas);

stage.enableMouseOver();

//Registers the "tick" event listener.

fnStartAnimation = function() {

stage.addChild(exportRoot);

createjs.Ticker.setFPS(lib.properties.fps);

createjs.Ticker.addEventListener("tick", stage);

}    

//Code to support hidpi screens and responsive scaling.

function makeResponsive(isResp, respDim, isScale, scaleType) {

var lastW, lastH, lastS=1;

window.addEventListener('resize', resizeCanvas);

resizeCanvas();

function resizeCanvas() {

var w = lib.properties.width, h = lib.properties.height;

var iw = window.innerWidth, ih=window.innerHeight;

var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;

if(isResp) {               

if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                   

sRatio = lastS;               

}

else if(!isScale) {

if(iw<w || ih<h)

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==1) {

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==2) {

sRatio = Math.max(xRatio, yRatio);

}

}

canvas.width = w*pRatio*sRatio;

canvas.height = h*pRatio*sRatio;

canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';

canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';

stage.scaleX = pRatio*sRatio;

stage.scaleY = pRatio*sRatio;

lastW = iw; lastH = ih; lastS = sRatio;           

stage.tickOnUpdate = false;           

stage.update();           

stage.tickOnUpdate = true;

}

}

makeResponsive(false,'both',false,1);

AdobeAn.compositionLoaded(lib.properties.id);

fnStartAnimation();

}

</script>

<!-- write your code here -->

</head>

<body class="body" onload="init();" style="margin:0px;">

<!--indent to help your code be more identifiable-->

<header class="mainHeader">

    <img src="images/logo.png">

  

      <!--navigation-->

<nav><ul>

    <li class="active"><a href="index.html">Home</a></li>

    <li><a href="pirates.html">Pirates</a></li>

    <li><a href="gamehistory.html">Game History</a></li>

    <li><a href="ourgames.html">Our Games</a></li>

    <li><a href="reviews.html">Reviews</a></li>

    <li><a href="wheretobuy.html">Where to Buy</a></li>

    <li><a href="careers.html">Careers</a></li>

    <li><a href="contact.html">Contact</a></li>

    </ul></nav>

    </header>

<!--main content area-->

<div class="mainContent">

    <div class="content">

    <article class="topContent">

        <h1>Header</h1>

            <content>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis iaculis nisi. Proin accumsan ultricies turpis, ac rutrum velit mollis vitae. Donec hendrerit eu ipsum et laoreet. Pellentesque mattis egestas aliquam. </p>

<p>

<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:600px; height:365px">

<canvas id="canvas" width="600" height="365" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>

<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:600px; height:365px; position: absolute; left: 0px; top: 0px; display: block;">

</div>

</div>

</p>

  </content>

        </article> <!—top Content end-->

    </div> <!—article end-->

</div><!—main content end-->

<!--side content to go here-->

<aside class="top-sidebar"> <!--given different classes for different styling-->

<article><img src="images/facebook.jpg" width="35" height="35" alt=""/>

<img src="images/twitter.jpg" width="35" height="35" alt=""/>

<img src="images/pintrest.jpg" width="35" height="35" alt=""/>

<img src="images/linkedin.jpg" width="35" height="35" alt=""/>

</article>

</aside>

<aside class="middle-sidebar"> <!--given different classes for different styling-->

<article>

    <h2>Top Side Bar</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis iaculis nisi. Proin accumsan ultricies turpis.</p>

    </article>

</aside>

<!--footer-->

<footer class="mainFooter">

    <p> Copyright &copy; 2018 <a href="#" title="Responsive"> Name of Company Here </a> </p>

    </footer>

   

</body>

</html>

Hi BobobobCat

Yes, the video position jump has to do with the dom_overlay_container in which the html5 video component lives. But I'm not sure what you are doing with your css addition position: absolute; left: 30px; 100px; 0px; display: block;. What is 100px? top? and 0px;? left can only be defined by one value, can't it.

Use an iFrame

The best way to nest a html5 canvas animation into another page with additional content is to install it in an iFrame. This way you keep the integrity of the Animate exported HTML document within its own window and dimensions.  See for example this page https://www.createjs.com/tutorials/Mouse%20Interaction/ . All createjs canvas examples are in iFrames within the overall page flow.

Klaus

Views

49

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
Jan 27, 2019 0
Community Beginner ,
Jan 27, 2019

Copy link to clipboard

Copied

Ah. It's this bit isn't it?!!!!!

<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:600px; height:365px; position: absolute; left: 30px; 100px; 0px; display: block;">

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...
Jan 27, 2019 0
Advocate ,
Jan 27, 2019

Copy link to clipboard

Copied

Hi BobobobCat

Yes, the video position jump has to do with the dom_overlay_container in which the html5 video component lives. But I'm not sure what you are doing with your css addition position: absolute; left: 30px; 100px; 0px; display: block;. What is 100px? top? and 0px;? left can only be defined by one value, can't it.

Use an iFrame

The best way to nest a html5 canvas animation into another page with additional content is to install it in an iFrame. This way you keep the integrity of the Animate exported HTML document within its own window and dimensions.  See for example this page https://www.createjs.com/tutorials/Mouse%20Interaction/ . All createjs canvas examples are in iFrames within the overall page flow.

Klaus

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...
Jan 27, 2019 0