Portrait of Martijn

Embedding video in blog posts

11 Jun 2011

This is how I embed a video in a blog post on my Mac, such that it shows up in current versions of Apple Safari (which wants MPEG 4), Mozilla FireFox 4 (which wants Ogg Video "Theora"), and Google Chrome (which does both). The original video format is typically from a QuickTime Screen Recording or some such in a movie.mov.

  1. open in QuickTime Player, Save As, format iPhone, save to the Desktop. This produces a folder named movie containing a movie - iPhone.m4v and movie.jpg.
  2. remame the movie - iPhone.m4v to movie.mp4
  3. run ffmpeg2theora on the mp4, which produces a movie.ogv. Or use MiroVideoConverter
  4. drag the mov into MiroVideoConverter and convert it to WebM (vp8) format
  5. upload the movie.mov to Vimeo. Go to Settings, Custom URL, give it a name.
  6. once available, click "embed", copy the iframe tag from the code.

Then to embed in the blog posts:

<div class="photo_frame_center">
 <video width="480" height="360" controls preload="none"
  <source src="/img/blog/movie/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="/img/blog/movie/movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="/img/blog/movie/movie.webm" type='video/webm; codecs="vp8, vorbis"'>
  <iframe src="http://player.vimeo.com/video/24959362?title=0&amp;byline=0&amp;portrait=0"
   width="400" height="300"></iframe>

Here is an example blog post.

This version works on the iPhone, but a is a bit low-quality. The movie - Computer.m4v version is much better, but if you use that then the iPhone only displays the poster, and doesn't actually let you play the movie.

At the moment Jekyll doesn't seem to recognise the video tag in Markdown, so as a workaround use a .html.

The .m4v to .mp4 renaming seems to work; alternatively use MiroVideoConverter or Squared 5 MPEG Streamclip for Mac OS X.

Instead of using Vimeo I could convert to FLV and use an embedded Flash player like FlowPlayer or JW Player, but that seems hardly worth the effort.

For more than you ever want to know about HTML5 video, see the Video chapter in Dive into HTML5.