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.
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.