How I Use HTML5 Video For Android Phones

HTML5 video on Android is still a hot mess, and can be frustrating if you’re trying to make your videos playable on as many devices as possible.  I’ve struggled with this in the past, and have settled on the following method to solve my problem.

I used the Universal Video plugin and modified it to add a link to the video for mobile devices.  It may not be the most elegant of solutions, but as far as I can tell it’s been working great so far.

You can see this in action on any other video on this site.  Immediately below any video you’ll see a link to the “mobile video version”.  Clicking on that link will take you to a version of the video that is playable on Android phones, and which has been optimized for mobile devices.

Creating Mobile Video

Let’s start by making a version of your video for Android.  In this example I am assuming you are using WordPress and HTML5 video via the Universal Video plugin.  I am also assuming you have already created the mp4 and ogg video versions of your video.

I use Handbrake for creating mobile video as it is the simplest way I know to do this.  Open the mp4 version of your video in Handbrake and then select the following settings:

• iPhone & iPod Touch Preset
• Web optimized
• If the destination file ends in “.m4v”, edit it to end in “.mp4″

Then just click “Start” and Handbrake will create a version of your video that is playable on Android phones!

Poster Image

The poster image is an option you can use with HTML5 video.  This is the image that will be displayed in place of your video until the user plays the video.  If no poster image is set, most browsers default to using the first frame of the video as the image in question.

If no poster image is set there will be a blank spot on Android phones where the video is situated.  I don’t like that blank spot, so I choose to add a poster image to fill the void.

In the Universal Video plugin the mp4 and ogg video versions need to have the same file name, and I’ve kept the same pattern with the poster image.  So if your video file name was “twitter-photo” then the poster image would have to be “twitter-photo.jpg”.  I chose jpg as the image file extension because that image format can be compressed to a smaller size than other image formats.

The Code

Like I said, I modified the Universal Video plugin to allow for the addition of a link to the mobile version of the video being presented.  I added a text link below the video that links to the Android video version and wrapped the whole embed code in a div with the class of “html5-video”.

You can download the Universal Video with Android plugin here.  If you already used the Universal Video plugin, be sure to deactivate or delete it before installing the Android version of Universal Video.

How To Use

Using this modified plugin is just like using the original Universal Video plugin.  If your video’s file name is “android-video” then you will need to upload the following 4 files to your site’s wp-content/uploads folder:

1. android-video.mp4 (MP4 video version)
2. android-video.ogv (OGG video version)
3. android-video-1.mp4 (Mobile video version)
4. android-video.jpg (Poster image)

It is important that the files you upload follow the pattern set above for the plugin to work correctly.  The mobile video version must have the same file name as the normal video version with the addition of the “-1″ at the end, and the poster image must have the same file name as the videos with the “jpg” image extension.

After you have uploaded these files to the uploads folder, you can embed HTML5 video simply by using this shortcode that pulls everything together:

[video src="android-video" height="360" width="640"]

(I’m using the height of “360″ and width of “640″ as an example.  Be sure to insert the correct dimensions for your video!)

If you have done everything correctly, you will have embedded an HTML5 video on your site that also supports Android phones.  And if someone visits your site with a browser that doesn’t support HTML5 video, they will get the flash fallback option through Flowplayer.

If you choose to use this plugin version I’d love to hear your feedback.  You can respond to me either with a comment below or through my contact form.

photo credit