Building an iPhone/iPad/Android compatible HTML5 video player tutorial – Part 1

One of the great things about modern smartphones and tablets is their ability to render webpages very closely to the way they are rendered on desktops. The only caveat here is Flash. Flash is of course blocked completely on iOS devices, and it’s compatibility and performance on Android devices varies widely. One of the most common uses for Flash has been to play video, so this is one area that you are most likely to need an alternative approach for those devices that don’t support it. Luckily, iOS and Android both feature modern browsers with full HTML5 support, including support for the video tag. Today, I will walk you through the steps of creating a simple HTML5 video player.

HTML5 video example
HTML5 video example (Safari web browser)

Step 1: Prepping your video file
The first thing you will want to do is encode your video at the proper format for HTML5 playback. I am using Quicktime Pro for this, feel free to use your favorite video editor or exporter*. With the video open, I select File>Export from the top menu. Under the Export drop down, select Movie to MPEG-4. Then click the Options… button next to it. Under the Video tab, set the Video Format. For this, use H.264, the data rate is up to you (with a higher setting the video will look better but be a larger file). I usually go with a setting around 800 in most cases. Here you can also set the size for your video if it needs changed (Letterbox will preserve the video’s aspect ratio and is most likely the setting you will want). Under the Audio tab, I usually go with a data rate of 128kbps and a Sample rate of 44.100 kHz. Finally, under the Streaming tab, click on Enable streaming. For Maximum pocket size I use 1500 bytes, for Maximum packet duration, 500 ms. Be sure to leave the Optimize for Server box unchecked (I have had iOS playback issues when this is checked). Once your settings are how you want them, click OK, then save the file (it should be exported with a .mp4 extension).

*Note: If you do not have Quicktime Pro or comparable software, there is a nice free video exporter that you can use called Miro Video Convertor. It doesn’t allow the fine tuning that QT does, but will definitely get the job done. It is very simple to use, just install it, drag your video file to the window, then select the proper file type from the drop down (you can choose MP4).

Step 2: Prepping your poster image
Ok, your video is all set, now we need a still image (preferably jpeg) to use as the poster image for the video (the poster image is the image that the viewer will see on your page before the video is triggered). First, scrub your video to the frame you would like to use. From there, you can either do a screen grab of the video window and edit it in Photoshop, or go to File>Export from the top menu, then select Movie to Picture from the Export drop down menu. If you use this method, you should probably re-save the file in Photoshop since Quicktime exports the file as a pct instead of a jpeg. Another good thing to do at this point is to create a simple Play Button for the file (a Play button automatically shows up in iOS devices but not in Android, which is why it’s a good idea to have it as part of the poster image). In Photoshop, open the still image and create a Play Button graphic on a separate layer. In it’s simplest form, this button is really just a sideways triangle, you can use one of Photoshop’s built-in shapes or just create it yourself. Place this graphic in the center of the image so that it will appear behind the automatic button that iOS creates. Ok, now your files are prepped and it’s time to embed the video on your page.

Step3: Embedding the video
The HTML5 video tag makes it very easy to embed the video on your page. Here is an example of what the embed code looks like:

The id attribute is useful if you need to access this element in CSS or Javascript. For the poster attribute, set the path to where your still image is stored. For durationHint, set this to the approximate length of your video in seconds. The controls attribute tells the player to use the default video controls. Set the width and height, then set the src attribute to the path to your .mp4 video file and you are all set.

Step 4: Serving an OGG Theora video file to Firefox
As of this writing, Firefox does not support the H.264 codec used by MP4 videos, but it does support OGG Theora. So we will need to export and include an OGG Theora file as well in order for the file to play in Firefox. To export our video into this format, you can use the free video convertor I mentioned above-Miro Video Convertor. Just choose “Theora” from the drop down and click “Convert”. With your video exported, you will need to modify the video embed code to include it. So our code will now look like this:

Basically, if the browser can read the video tag, it will attempt to load the videos in the order they are listed. So Safari/Chrome/Android/iOS etc will load the MP4, while Firefox will skip it and load the OGG Theora one instead. One word of caution- be sure to put the MP4 video before the OGG one, I have had issues with playback on iOS devices when they are switched.

Step 5: Serving Flash to browsers that don’t support the HTML5 video tag (I’m looking at you, IE)
To account for older and incompatible browsers that don’t recognize the video tag, we will provide Flash fallback. To do this, first prep your Flash video player SWF. If you don’t have Adobe Flash, you can download and use one of the free Flash players available to generate your SWF. JW Player and Flow Player are good alternatives.

With your SWF file ready, change your embed tag to the following:

Now the browser will attempt to load the videos in this order: MP4, OGG, then the SWF. You are all set with a video that will play in virtually any browser.

That’s it for this time, a simple introduction to creating an HTML5 video and embedding it in your page. In part two, I will show you how to create a video player that supports the playback of multiple videos.
Thanks for reading!

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.