It has been a time since I last published a local video file on a WordPress blog, so I searched for a solution that would be up to date with respect to HTML5 video. Of course it should also be open source and easy to use. And there is such a thing: Video.js.

It’s an open source JavaScript based video player that uses the HTML5 video tag and supports various formats with it (Ogg Theora, MP4, WebM). It also comes with a Flash video player which will automatically be used for browsers which do not support the HTML5 <video> tag yet. The setup is quite ridiculous and consists of adding two lines into the head section of your WordPress template (as they kindly provide hosting of the referenced files), then using the <video> tag right in your posts [instructions].

In my case, a typical <video> tag looks like this:

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="400" height="300"
  poster="/wp-content/media/file.poster.jpg" data-setup="{}">
  <source src="/wp-content/media/file.poster.mp4" type='video/mp4'>

Maybe there’s also a WordPress plugin that makes adding the video tag more comfortable. I don’t know yet.

To convert a video file to the MP4 format usable in HTML5 enabled browsers with Video.js, I used a command like this:

  ffmpeg -i file.avi -s 400x300 -vcodec libx264 -acodec libvo_aacenc file.mp4

For using the libx264 codec, you need to install some extra software [instructions for Ubuntu]. You might also want to tweak the options to fit your needs of quality, video size and video file size.

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>