Last updated June 7, 2013

So, you want to use HTML5 video? Unfortunately, we are still at a point where different browsers treat video in a different manner, making it a challenge to serve the correct format to the correct browser. One good and popular solution is to host your video using YouTube or Vimeo. Cross-browser support, including mobile devices, is pretty good with these. But there are some situations where this is not a good option. For example, I recently re-designed a website for company that sells products to schools. They discovered that YouTube and Vimeo were blocked by most school filters, so their target audience was unable to see their videos. Enter Video.js, a reliable and fully-cross browser video player for self-hosting videos.

Installing Video.js

WordPress

Head on over to the Video.js WordPress Plugin page, download the latest version of the plugin, install it, and activate it. Now to insert a video on any post or page, all you have to do is use a shortcode like this:

[videojs mp4="http://mysite.com/mp4-video-source.mp4" webm="http://mysite.com/webm-video-source.webm" poster="http://mysite.com/video-poster.jpg" height="640" width="264"]

There are many more options available, including a settings screen to set some default options, but this is the basic shortcode which will be sufficient for most videos. Read more on the installation page. Edit: In newer versions of the plugin there is also a button in the WordPress editor that you can click to insert videos.

Without WordPress

Taken from the Video.js Setup Guide:

In the <head> (copy and paste this exact code):

<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>

In the <body> (modify to link to your video):

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="my_video_poster.png" data-setup="{}">
  <source src="my_video.mp4" type='video/mp4'>
  <source src="my_video.webm" type='video/webm'>
</video>

Preparing Your Video

Most of the questions I get regarding the Video.js for WordPress plugin are related to preparing your video. Do it right and your videos will play beautifully on any platform. Do it wrong and it will be hit and miss. It can be confusing to figure out the right steps to preparing your video, but once you figure it out it is actually a straightforward process.

Choosing your video formats

At a bare-minimum you need an h.264 encoded mp4. This will provide HTML5 video in most browsers, with a reliable flash fallback in other modern browsers. It is highly recommended to also provide a WebM or Ogg Vorbis source as well, which will allow HTML5 video without Flash in all modern browsers. Whether you choose WebM or Ogg doesn’t really matter at this point. Personally, I usually provide all three: .mp4, .wemb, and .ogg. (Edit: There is no reason to use both .webm and .ogg. Since my own experience is that .webm usually seems to be higher quality than .ogg I now usually go with .mp4 and .webm)

Encoding your videos

I use FFmpeg and WinFF to quickly convert my videos into all the needed formats. Download it here. I use the following commands to convert to 640×360 (SD resolution) video. You can modify the resolution and bitrate (-vb flag) as needed. You can also download these presets and import them directly into WinFF.

For mp4:

-vcodec libx264  -acodec libfaac -s 640x360 -vb 872000

For WebM:

-threads 8 -f webm -s 640x360 -vcodec libvpx -deinterlace -g 120 -level 216 -profile 0 -qmax 42 -qmin 10 -rc_buf_aggressivity 0.95 -vb 872000 -acodec libvorbis -aq 90 -ac 2

For Ogg Vorbis:

-vcodec libtheora  -acodec libvorbis -s 640x360 -vb 872000

For the Poster Image:

-s 640x360 -vcodec mjpeg -ss 00:00:03.01 -vframes 1

Change the -ss flag (00:00:03.01) to the timecode you want to capture the poster image from. This sometimes takes a bit of trial and error, but for most videos a timecode near the beginning of the video works well.

Preparing your .mp4s

Some browsers (Internet Explorer) won’t start playing a video until it has completely loaded unless the metadata is at the beginning of the file. This can cause problems if you are serving large videos. Users will think that the player is broken or will have to wait a long time until they can start watching the video. Fortunately qt-faststart is a simple solution for preparing your mp4s so that they load right away. Download and install qt-faststart from the link above (if you don’t use Windows you should be able to find a build for your platform with a quick Google search). Unfortunately there is no gui for qt-faststart so you will need to use a command prompt to use it. Fortunately this is pretty simple. Open a command prompt and enter a command like this (modifying it based on the path to your install of qt-faststart/the path of your videos):

C:\Path\to\qt-faststart.exe C:\Path\to\input-video.mp4 C:\Path\to\output-video.mp4

Hit ‘Enter’ and you should see a message confirming that your file is ready to go. If you get the message ‘last atom in file was not a moov atom’, don’t worry. This just means that your file already had the metadata at the beginning.

Hosting Your Video

Although it is possible to host your videos from the same server as the rest of your site, or to simply upload your videos using the WordPress file importer, this has the potential to put a heavy strain on your server and slow down the rest of your site. Another option I have used is to host videos on Amazon S3. For a free option, in many cases I have simply uploaded my videos to DropBox, moved them to the Public folder, and copied the public link as the video source. There is nothing (that I can see) forbidding this in their TOS so long as you are a relatively low-traffic site. If you have a significant amount of traffic you will likely have to pay for some other hosting solution. If you do choose to host your videos on your own server or WordPress site, you may need to add the following to your .htaccess file:

AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
AddType video/ogg .ogv
AddType audio/ogg .ogg

Have more questions about HTML5 Video or WordPress development? Nose Creek Web Design can provide support and custom solutions for any need.