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.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="/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>
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.