WebM video logo

Creating video screen captures for a website: My workflow

I am trying to use videos more often when I create a post. I try to make a screen recording of whatever it is I am trying to show – it just makes whatever idea I am trying to convey that much clearer.

Adding videos to web pages is now much easier thanks to the HTML5 video tag, but choosing video formats for the web is still a bit of a nightmare.

Here is one recent example from this post:

And here is the code behind it:

<video autoplay loop muted height="522px" width="712px">
<source type="video/webm" src="http://james-ramsden.com/downloads/videos/20150614-instantiate-grasshopper-value-slider.webm">
<source type="video/mp4" src="http://james-ramsden.com/downloads/videos/20150614-instantiate-grasshopper-value-slider.mp4">
</video>

Long story short, you need to encode your video into at least two formats. WebM is free of licensing issues and produces very good quality videos, but is limited to certain browsers. MP4 is the backup format. And of course, we want the video to look as nice as possible, without unnecessary black borders.

This is the process I use:

  1. Install CamStudio, free screen recording software
  2. Install the lossless video codec for CamStudio. This ensures our video is of the highest quality, so we can re-encode it later without compounding data loss problems.
  3. Use CamStudio to record your screen. I like to use the ‘fixed region’ setting if I want to only record a part of a window. Make sure you’ve selected the lossless video codec under ‘video options’.
  4. Use OnlineConvert to convert your video both to WebM and MP4. Default settings are all fine.

Then, to actually upload the videos to the web, I have recently discovered the ease of using FTP to access my website server. I logged into cPanel (the interface provided by my hosting company to interact with the server) and set up an FTP account. Then, I installed FileZilla, and used this to upload the video from my computer to my webspace.

And as you can see, the above video is pin sharp. It really pays off to use the two-formats approach as, for those who are on WebM-compatible browser, amazing levels of quality can be achieved with tiny file sizes. The video above is a mere 47kB! (As a comparison, MP4 was 125kB and uncompressed was 531kB.)

Actually, the only major browsers that aren’t compatible with WebM are Safari and Internet Explorer. It’s actually quite tempting to just stick twos up at the incumbents until they get a move on, if it saves me a few minutes of my life…

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: