Studio Notes: Video Clips

From time to time I want to include video clips in my blog posts, but I end up not doing this very often because I forget the steps for doing it.

So I’m noting them here so I can refer back to them later.

First, I capture the video somehow. Often I do this with Voila, a screen-recording app for the Mac (since renamed Capto).

Voila has a basic video-trimmer built into it, so I trim the video down to that part I want to include.

The result is a H.264-format video file with a .mov extension.

Next, I use VLC to convert this to a Webm-format video (File > Convert / Stream and then select “Video - VP80 + Vorbus (Webm)” as the profile).

When that conversion is done, I upload both the H.264 and Webm files to Amazon S3, and make sure they’re world-readable, and that the MIME type on the Webm file is set to video/webm (or else more recent versions of Firefox will refuse to play them).

It seems that VLC doesn’t properly leave the resulting Webm file with a duration that can be read by browsers; this can be fixed with ffmpeg:

ffmpeg -i original-file.webm -c copy -fflags +genpts /tmp/fixed.webm
rm original-file.webm
mv /tmp/fixed.webm original-file.webm

Finally, I reference them both from my blog post:

<p>
  <video controls="" style="width: 100%; max-width: 100%; height: auto;">
     <source src="https://s3.amazonaws.com/images.ruk.ca/abstract-clip.mov" type="video/mp4; codecs=avc1.42E01E,adpcm_ima_qt)" />
     <source src="https://s3.amazonaws.com/images.ruk.ca/abstract-clip.webm" type="video/webm; codecs=vp8,vorbis" />
  </video>
</p>

And that’s it. Between the H.264 and the Webm, the video will play in most modern web browsers.

And I save myself the indignity of using YouTube or Vimeo.