Tag: HTML5

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…

Autoplay videos with three lines of HTML

I was mindlessly browsing the internet this evening, reading about smart watches on istartedsomething. A few pages into the post, a video was already playing as I scrolled down the page. I couldn’t see any Youtube or Vimeo branding, or any controls, so I assumed it was a GIF.

But it seemed too high-quality to be a GIF. Right-clicking the video showed otherwise – it was a proper video! This isn’t a product of the GIF and Flash internet we are accustomed to, but an example of HTML5 spotted in action.

I dug into the source code and found that the author was using the video tag. Reading up about the video tag on w3schools, the video tag is remarkably easy to use. It’s just a few lines of HTML, typed straight into an HTML file, no plugins or fuss necessary.

HTML video tag

Here is the source code you need to add a video to a web page:

<video autoplay loop muted>
<source type="video/mp4" src="http://james-ramsden.com/downloads/videos/smart-form-relax.mp4">
</video>

…and this is the output:

Useful video tags

The source code above is split into three lines, where we can define how the video plays. The first line must start with ‘video’. But after that, we can string together a list of terms to customise how it plays.

  • autoplay
  • loop
  • controls
  • muted
  • height=”640px”
  • height=”480px”
  • poster=”image.jpg” (image to show if the video isn’t loaded)

The second line defines the video location. Currently, the type can be ‘video/mp4’, ‘video/webm’ or ‘video/ogg’.

You can specify a start and end time within the source, for example:

src="http://james-ramsden.com/downloads/videos/smart-form-relax.mp4#t=10,11"

Will play the video between 10 and 11 seconds.

References