HTML5 Videos: 10 Things Designers Need to Know

The HTML5 revolution is exciting web designers from all areas of the globe. The new specifications support dozens of elements and attributes for building semantic websites. These new features include multimedia tags for audio and video formats.

In past years a Flash-based media player in more than sufficient for streaming on the Web and this technology is still necessary to support legacy browsers. But thankfully modern standards have advanced and the inclusion of HTML5 video opens doors for dozens of new opportunities.

In this guide I’d like to offer an introduction to HTML5 video for the Web. It will take some practice to understand the native in-browser player and all its functionality. And the best way to get familiar is diving in head first!

1. Types of Media

When working with a flash video player, it’s too common to associate all video formats in .flv. While this does work, most FLV files cannot retain quality anywhere near the more advanced file formats/codecs. There are 3 important video types which are supported by HTML5: MP4, WebM, and Ogg/Ogv. The MPEG-4 file type is generally encoded in H.264, allowing for playback in third party Flash players.

This means you don’t need to keep a .flv video copy to support a fallback method! WebM and Ogg are two much newer file types related to HTML5 video. Ogg uses Theora encoding which is based on the open-source standard audio file format. These can be saved with a .ogg or .ogv extension.

WebM is a project put out by Google which you can read more about on the WebM Project website. The format is already supported by Opera, Google Chrome, and Firefox. It’s still unknown by most web professionals but WebM is the leading video media format in the future of web video.

2. Browser Support

So which of these file types do you need for your website? Well ideally all 3 would be great as they provide the full support spectrum. Yet this isn’t realistic, and in fact, you can cover all the bases with only two of them. Here is a breakdown of what works for each browser:

• Mozilla Firefox – WebM, Ogg
• Google Chrome – WebM, Ogg
• Opera – WebM, Ogg
• Safari – MP4
• Internet Explorer 9 – MP4
• Internet Explorer 6-8 – No HTML5, Flash Only!

If you remember, earlier I mentioned that most flash video players will support MP4 files as long as they’re encoded in H.264. As such, each of these browsers will embed MP4+Flash as a final resort. This means you only need to create two different video formats to support all browsers. MP4 for Safari/IE9 and a choice between WebM or Ogg for the rest.

In my opinion I highly recommend sticking with the WebM format. It has some big names behind the project (namely Google) and has gained a lot of traction in the HTML5 community. Ogg/Ogv will be supported but will most likely lose out in popularity to WebM’s smaller file sizes. You can read a related piece on the future of video on the web written by Sean Golliher.

3. Embedding Simple HTML5 Videos

Let’s now take a look at the syntax required to embed some sample code. All we need is the HTML5 video tag to reference each movie URL.

 <video width="320" height="240" controls autoplay poster="/img/scene-preview.jpg">
 <source src="/mov/scene.mp4" type="video/mp4">
 <source src="/mov/scene.webm" type="video/webm">
 Sorry, your browser doesn't support HTML5 video.
 </video>
 

Notice the controls and autoplay attributes don’t need to be set with any values. I also included a poster attribute which preloads an image over the video player before streaming. This is a common preview with many web players.

We offer both MP4 and WebM formats internal to the video element. If neither of these can be loaded then we display an error for the user to update their browser.

4. Offering a Flash Fallback

The example above is perfect for all standards-compliant web browsers. Yet we also need to consider that the world is not always at the cutting-edge of technology. We need to support users on older versions of Safari, Mozilla Firefox, and especially Internet Explorer.

The best way to achieve this is through a Flash fallback player. These can be added using the embed or object tags to reference a third party .swf file. JW Player and Flowplayer are two free open source solutions you can consider. But also check out premium video players on ActiveDen which can go as cheap as $15-$20.

Now let’s tweak the code above to include a fallback Flash player to support nearly every browser in existence.

 <video width="320" height="240" controls autoplay poster="/img/scene-preview.jpg">
 <source src="/mov/scene.mp4" type="video/mp4">
 <source src="/mov/scene.webm" type="video/webm">
 <object type="application/x-shockwave-flash" data="/mov/player.swf"
 width="320" height="240">
 <param name="allowfullscreen" value="true">
 <param name="allowscriptaccess" value="always">
 <param name="flashvars" value="file=/mov/scene.mp4">
 <!--[if IE]><param name="movie" value="/mov/player.swf"><![endif]-->
 <img src="/img/scene-preview.jpg" width="320" height="240" alt="Video">
 <p>Sorry but your browser doesn't support HTML5 video.</p>
 </object>
 </video>
 

5. Mobile Device Support

This topic is still highly debated since the mobile industry is so young. Apple came out with support for MP4 on Mac and iOS devices. This means you can natively stream .mp4 video files on your iPad, iPhone, or iPod Touch in the standard video UI. This covers a lot of the market share.

Recently Android devices were having a difficult time getting to this same level of support. However Google has finally adopted .mp4 web streaming which now capitalizes on nearly all mobile users. And since Flash isn’t an option here MP4 is the best solution available. This is why you want to embed the .mp4 code first so that iOS devices can recognize the file immediately.

6. Safari User Agent

One bug that must be mentioned is one existing between Flash players and native HTML5 .mp4 streaming on Safari. Since the browser can support both files, you may have trouble getting the HTML5 video stream in place of Flash..

This will force your webpage to recognize the browser as running on another device. Most likely you would choose iPad, which does NOT support any Flash playback. This is the only major issue you may run into when testing MP4 native & flash playback methods.

7. Manage Player Controls

Believe it or not there are also methods you can use to manipulate HTML5 video player controls. It can all be done in JavaScript by pulling from a set of open methods. There are way too many to list out here, but try to skim through the W3C media element docs for more details.

To give you a general idea, the Opera dev blog has posted some short tutorials which are great for newbies. Even if you’ve never picked up JavaScript or jQuery before, it’s still simple to hit the ground running with this one. You can call on specific attributes of the video media such as muted or currentTime. Then you could perform actions (dim the background, display ads) based on these criteria by manipulating the DOM in jQuery.

The same developer in the Opera article provides a working demo of their scripted video player. The opportunity to customize your own UI controls is outstanding. It just goes to show how powerful HTML5 video is becoming.

8. Video Format Conversion

This is another big issue that will likely confuse less tech-savvy individuals. You just want to get your website up and streaming and now you have to deal with converting videos? Well it’s actually not all that difficult.

To deal with MP4 which is your biggest priority, you can use HandBrake which is a free, open source solution which runs on all 3 major OS. It’ll support H.264 along with a few other codecs which makes this the best option for freebie users.

It’s looking like the WebM route makes life a lot easier. Miro Video Converter is a free tool for Windows and OS X which produces great quality WebM files. It can also do Ogg Theora encoding which comes out with pretty great quality as well.

9. Building a Web Player

Video formats with HTML5 specs are still new to developers. There are open protocols just waiting to be played with to allow for custom controls, sliders, play/pause icons, etc. If you are feeling bold, check out this tutorial on how to make your own HTML5 player (published on Splashnology).

The code is a bit intense for newcomers as it requires advanced CSS targeting and a bit of formal jQuery. There are other frameworks you can build on which already offer a customized player design. Similarly this slideshare presentation is a great introduction to building an HTML5 video player.

10. VideoJS Library

VideoJS is probably my favorite solution to HTML5 video players. All you need is their self-hosted JavaScript and CSS stylesheet included somewhere in your document. Then you write the standard HTML5 video code with some additional classes for skinning. I added their sample code below:

 <video 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>
 

If you happen to run a WordPress blog you can also try their custom WP plugin. It will automatically include the library js/css on pages where you display HTML5 video. And you can do this from within any post or page editor using shortcodes( see here).

Conclusion

I hope this introductory guide can stir your interest in the future of web video. With more users turning to mobile it’s important that HTML5 standards are adopted for these types of media.

The Web should be made simpler so that developers can produce fully-supported solutions much quicker. We would love to hear your ideas and suggestions for the future of HTML5 video. If you’d like to share please feel free to leave a comment in the post discussion area below.