With the increased popularity of online video combined with the massive adoption of mobile internet devices, html5 video is quickly becoming the desired standard in online video. Even though html5 video could (and should) replace flash video in most cases, its adoption among bloggers is slowed in part simply because most bloggers find embedding html5 video to be confusing.
If you follow these 5 steps outlined below, I think you will find that adding html5 video to your self-hosted WordPress site is easy.
1. Install the Universal Video plugin
Most people don’t understand the markup for html5 video and prefer a simpler method of embedding videos to their blogs. The Universal Video plugin solves that problem by allowing the user to insert videos on their site through the use of shortcodes. Universal Video will embed your videos in your site with the proper html5 markup, and also provide a flash video version for visitors that who are using browsers that do not support html5 video.
In order to serve html5 video to your visitors, you need to encode them a certain way and that brings us to the next step.
2. Encode the video in h.264
HandBrake is a free program that does an excellent job of converting a variety of video types into the h.264 format. Once installed, open up the program and select the video you want to convert to h.264 from the dropdown. After that’s done, make sure you settings look like the image below.
Click image for larger view
After everything is set properly, just click on Start and let HandBrake do its thing.
3. Encode the video in ogg
Once HandBrake is done converting your video file, you will need to create an ogg version. Miro Video Converter is the simplest and best program I’ve found to do this (and it’s free as well).
Download and install this program if you haven’t already, then start it up. Drag or select the video created by Handbrake, make sure “Theora” is selected, and then click on Convert to get started. Miro will then convert your video to the ogg format.
4. Upload both videos to your site
Each time you converted your original video, the file names were modified slightly. In order for these videos to work properly with the Universal Video plugin they will have to be named identical (minus the file extension). You may have two files now named myvideo-1.m4v and myvideo-1.theora.ogv after conversion. Changing the file names to myvideo.m4v and myvideo.ogv will work out nicely.
Using the FTP program of your choice, upload these videos to your wp-content folder.
5. Add the video to your post
All that’s left to do is to just add the video to your page or post. The shortcode system is easy enough, just follow this example:
[video src="myvideo" height="320" width="640"]
The important thing to remember is that you should always include the height and width dimensions in the shortcode otherwise the flash video fallback may not work properly.
