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
- open in QuickTime Player, Save As, format iPhone, save to the Desktop. This produces a folder named
movie - iPhone.m4vand
- remame the
movie - iPhone.m4vto
- run ffmpeg2theora on the mp4, which produces a
movie.ogv. Or use MiroVideoConverter
- drag the mov into MiroVideoConverter and convert it to WebM (vp8) format
- upload the
movie.movto Vimeo. Go to Settings, Custom URL, give it a name.
- 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" poster="/img/blog/movie/movie.jpg"> <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&byline=0&portrait=0" width="400" height="300"></iframe> </video> </div>
Here is an example blog post.
This version works on the iPhone, but a is a bit low-quality.
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
For more than you ever want to know about HTML5 video, see the Video chapter in Dive into HTML5.