Creating a Video Animation Engine in JavaScript Part 1: Creating The Video Window

Table of Contents

There are several really great JavaScript libraries that make moving objects around on the screen really easy. Anime.Js is the best example I can think of.

In this series of articles, we will be creating an animation engine that can create dynamic video content programmatically.

An Birds-Eye-View of The Code so Far

The first thing we want to do is include both jQuery and Anime.js into our file. These libraries will make things a lot easier.

After that, we want to start our HTML and BODY tags.

Then, we create a new div with a class of ‘video’.

At the top of the page, we have the CSS defined in some tags.</p>

Here, we are removing the default margin and padding for the body.

Then, we set the position of the ‘video’ div to ‘absolute’. This is so we can move it around. Then we set the ‘video’ div’s background color to black. After that, make set the ‘video’ div to start 5% from the left and 5% from the top. Finally, we set the width of the ‘video’ div to 90% of the width of the page.

Notice That We Did Not Set a Height For The ‘Video’ Div

That’s because down at the of bottom the file, we set the CSS of the ‘video’ div with JavaScript.

As you can see in the image above, we have set the width of the ‘video’ div to whatever the height of the ‘video’ div is divided by 1.777777777777778.

Yeah, But Why 1.777777777777778?

Well, that’s a good question. Seeing as the purpose of this project is to create a Javascript-based video animation engine, the ideal default ratio of the video window is 16:9. And yes, you guessed it. When you divide 16 by 9 you get 1.777777777777778.

So, that means if the height of the ‘video’ window is whatever it’s height is divided by that number, it will always have a 16:9 aspect. And remember, in the CSS we defined the ‘video’ div’s width as 90% of the window.