Web Animation Video Capture with OBS Studio

Web Animation Video Capture with OBS Studio

Over the past couple of months, we’ve been getting back into creating motion graphics, video & GIF animations etc., with the ultimate goal of being able to produce content for various sundry Web platforms e.g. Google Ads, Pinterest, Instagram (to name but a few).

Of course, as we were coming at this from a Web design/development angle, our first choices (i.e. within our comfort zone) for creating these animations were HTML5, CSS & jQuery. Initially, the plan was to build the animations with CSS and/or jQuery, capture the resulting browser output with XBox Game Bar (or something similar), then import into ShotCut or Blender Video Sequencer for final editing/fine-tuning.

Seemed like a solid plan — in theory… Unfortunately, we ran into one or two unforeseen difficulties with this approach…

As with most other screen capture software, XBox Game Bar is only capable of grabbing full-screen video (e.g. 1920 x 1080). That’s all well and good if you’re ultimately going to be uploading to YouTube or whatever…

HOWEVER, if you’re looking to create content for a platform that requires non-standard video resolutions (e.g. Pinterest – 2:3, 1000 x 1500) you’ll basically end up having to resort to cropping/re-sizing the captured video in order to get the damn thing to look right. Extremely awkward and time-consuming, as most video editing software doesn’t really allow you to do this easily. Worst of all, with all the re-sizing & cropping, the video quality of the final product can end up looking kind of nasty.

So, long story short, we needed a more versatile solution for grabbing video of our jQuery/CSS creations.

After a fairly extensive search, we happened upon Open Broadcaster Software’s OBS Studio (free download), and gave it a test-drive. Within minutes, we came to the conclusion it was EXACTLY what we were looking for – we’re now able to capture video at whatever resolution we require and, as a result, have vastly simplified our work-flow, by-passing any cropping/re-sizing headaches entirely.

So, here’s a quick step-by-step with examples. (Not saying that this is the ONLY way of doing it, but so far it works for us!) — hopefully it’ll make life a little bit easier for you as well!

First, here’s the initial animation – pretty basic, consisting of a few PNGs & animated with a weird and worderful assortment of jQuery & CSS effects:

animated element
animated element
animated element
background element

SO, let’s say the ultimate goal here is to convert this into a video pin for Pinterest. First of all, in terms of the overall animation dimensions, we’ll want to make sure we stick with a Pinterest-Friendly 1000 x 1500 pixels – as well, we’ll ensure that all of the images/graphics we use will display properly within our 1000 x 1500 frame.

Next, we create a simple stand-alone HTML document containing everything needed for the animation to run (graphics, CSS and/or jQuery scripting). Use CSS to set the the width of the animation’s outer <div> container to 1000px – if your images are all correctly sized, the height should automatically display at 1500px – as well, all of the elements contained within the <div> should be sized by assigning percentage values – this way it’ll make it easier to re-purpose the animation later for display on a responsive Web page (if required).

Note that if you were to open this stand-alone HTML page in your Web browser, the animation will probably appear to be WAY too big – i.e. you’ll have to scroll down in order to see the bottom part of it (remember, earlier we set the dimensions to 1000×1500 pixels – quite a bit ‘taller’ than what our current monitor can display). Not to worry, OBS Studio doesn’t use this browser view for the video capture.

In OBS Studio, go to File > Settings > Video (or just click the ‘Settings‘ button, bottom right) and set both the Base (Canvas) Resolution and Output (Scaled) Resolution to 1000×1500, then click ‘Apply‘ and ‘OK‘.

obs screen 1

Next, at the bottom of the screen you’ll see a ‘Sources‘ box. Click the plus (+) sign and select ‘Browser‘ – this option should now appear in the box. Double-click and it’ll bring up ‘Properties for Browser‘.

Check ‘Local File‘ and then browse to the location of the stand-alone HTML file we created earlier. If all is well, your animation should now be showing in the preview box – click ‘OK’.

obs screen 2

Finally, click the ‘Start Recording‘ button (bottom right) to initiate the capture, and hit ‘Stop Recording‘ when you’ve captured all the video you need. If possible, try to accurately time your start and stop clicks to avoid having to edit/trim the excess video later.

And there you have it – you should now have a reasonable quality 1000×1500 video capture of your CSS/jQuery animation, ready for uploading to Pinterest. If necessary, you may have to import the video into your editing program in order to fine tune/trim the excess length, but the upshot is — no re-sizing or cropping required!

The COLOR MY INKS Coloring Book

Color My Inks Coloring Book Color My Inks Coloring Book Color My Inks Coloring Book Color My Inks Coloring Book Color My Inks Coloring Book