Using Video in an HTML5 World: Planning Your eLearning Video Strategy

By Nicki Nelson

Tablet using HTML5 videoLast fall in Planet eLearn, we looked at some strategies for using video in eLearning. As with so many things in the education and training field, technology is continuing to change at a rapid pace and we frequently receive questions from clients about what this means for video. In particular, our customers are interested in how the rise of mobile devices and the corresponding decline in Flash usage will affect video standards.

To help answer these questions, we’ve put together the following update to help you analyze how best to use video in your trainings and courses. Read on to learn about current best practices for maximizing your videos’ compatibility with the latest browser technology.


Being Cross-Device Compatible

If you’ve been using Flash video for years and want to make these assets available to learners using iPads or iPhones, you face a challenge. You’ll need to create a strategy to transition this content and make it cross-device compatible.

As there is no single video format that works in all browsers, our multimedia team has developed a multi-format delivery approach as the solution to maximizing video compatibility across devices, operating systems, and platform. We start by using HTML5’s <video> tag, with fallbacks to Flash for older browsers.

HTML5In our fall 2011 article, we outlined our best practices for encoding video into the different formats (i.e., MP4, Ogg, WebM). This is still a good approach if you want to be sure your video will play in all devices and browsers that support HTML5. However, just creating the various formats won’t ensure that your player looks the same across all browsers. Using an open-source JavaScript HTML5 video player can solve this issue.


An HTML5 video player is a JavaScript library that builds a custom set of controls over the top of the HTML5 video tag to provide a consistent look between devices and browsers. There are a number of open-source players currently available, and most of these also fix many cross-browser bugs or inconsistencies and add new features that haven’t been implemented yet by all browsers (like full-screen and subtitles).

Another benefit to the HTML5 video players is that they provide one consistent JavaScript API for both HTML5 and Flash. This means that a player will default to one format if compatible; but if not, it will play the other format. For example, a player will display an MP4 video on iPhones and iPads but will display a Flash video on devices and browsers that support Flash. So if you use a player, you probably won’t be required to create all three HTML5 video formats (i.e., Ogg, WebM, and MP4) because most devices and browsers support either Flash or MP4s.

Just remember that having a video strategy around maximizing compatibility and taking advantage of HTML5 makes sense in today’s mobile world. But following a few simple rules can help you maximize accessibility to your video assets.

If you would like more information about how Monarch Media can help you add video to your next eLearning project, please make an inquiry.