A Comprehensive Look: HTML5 Video

If you do anything that involves the web, HTML5 has been shoved down your throat for the past few months. HTML5 is touted to be the next big thing, the flash killer, and in order to consider yourself a web designer/developer you need to know all about it. So when I picked up my last freelance gig, one of the requirements was that all video on that site must be in HTML5.

When I had started this project, I had never done video in HTML5, but how hard could it be? It's just HTML, right? The main reason the client was adamant on having HTML5 video is because they wanted the site to be iPhone and iPad compatible. Doing some quick searching on Google, I first found HTML5video.org which uses a javascript library called Kaltura. I wanted to keep things simple if at all possible so I started looking for a method that didn't rely on Javascript.

The next article I came across was Video - Dive into HTML5. This article is a long and comprehensive read, but definitely worth it if you are looking for all the details surrounding HTML5 Video. This article was very helpful and I'll cover the main points below.

HTML5 Video File format Support by Browser

• Mozilla, Chrome, and Opera uses Ogg and WebM.
• Safari uses Quicktime (mp4, mp3, m4v, H.264).
• IE9 supports H.264 and mp4.
• IE 8 and lower do not support HTML5 video.

To quote the article:

There is no single combination of containers and codecs that works in all HTML5 browsers.

This is not likely to change in the near future.

To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.

In order to have a video that is viewable among all browsers, it recommends you encode you video 3 times. One in Ogg format, one in MP4 format, and one in WebM. If you need help encoding your video into an of these formats, the article above has a lengthy section on how to do this.

The HTML5 Mark Up

Do to some iPad/iPhone issues, they recommend you put the .mp4 format first.

<video width="320" height="240" controls>
  <source src="test.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="test.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="test.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video >

This will work in all browsers that support HTML5. In order for your video to work in IE8 and lower, you'll need to have a flash fallback as well. For more details on how to set up a flash fall back check out, Video for Everybody.

A couple more attributes worth mention are preload and autoplay. Autoplay simply makes the video automatically play. Preload has 3 options: none, metadata, and auto. None doesn't allow the video to preload. Meta grabs the length of the video. Auto has the whole video preload on page load.

My experience with preload is that it didn't work very well. The biggest issues I had was that Mozilla seems to default to preload="metadata" and safari defaults to preload="auto". In safari, preload="metadeta" didn't seem to have any effect and preload="none" wouldn't allow the video to buffer at all. This was a major issue due to the fact that I had 12 videos on the page. Safari was trying to preload all the videos at once and the load times for the site were horrendous.

Another issue I had with the HTML 5 video player was that if the player reached the point in the video where it hadn't buffered yet, they video would restart from the beginning rather that wait for the video to finish buffering.

Due to the fact that these HTML5 video players were causing my pages to load extremely slowly on top of other browser quirks, I decided to keep looking.

Vimeo

Vimeo is a video hosting web service that has both free and paid options. The free account allows you to upload 500mb of video a month and 1 HD video a month. The paid version ($60.00 a year) allows you to upload as many videos (including HD) as you like, a more customizable video player, statistics, and more.

With Vimeo, all your work is done. You only need one video format type and you upload it to your Vimeo account and it will upload the video for you. Vimeo works on all browsers, including IE, iPad, and iPhone. Vimeo videos don't automatically preload anything so it's relatively fast when you have multiple videos on each page. The video player easily customizable and comes with different themes you can choose from. It also has it's own API that isn't the easiest API I've had to work with, but I eventually got it to do what I wanted.

With the way the HTML5 Vimeo player is built, it doesn't load the <video> tag until you click play. It then using javascript to append the video in. Because of this, the video doesn't have any issues with trying to preload information and doesn't slow down the page load time.

The biggest issue with using vimeo is:

Do Not Upload Videos Intended for Commercial use.
You may not upload commercials, infomercials, or demos that actively sell or promote a product or service.

For more details on their policies, click here.

Because of Vimeo's non-commercial content only rule, I had to keep searching.

HTML5 + Javascript

So after trying basic HTML5 video player and a 3rd party software, I decided to go the HTML5 + Javascript route. The first javascript library I tried was the Kaltura Library. I tried doing a couple of the demos, but to be honest it didn't really do much for me and I found the documentation to be mediocre.

The next Javascript library I found was VideoJS. It worked well and I found the documentation easy to understand. VideoJS puts a nice looking skin on your HTML5 players so that they look consistent look across all browsers. The VideoJS library uses the FlowPlayer flash player as a flash fallback for older browsers. I did find that the VideoJS, did have it quirks of it's own and for some reason it was taking a really long time to load the videos in safari after a while. Obviously, these libraries aren't perfect, but they will achieve what the majority of people need.

My Custom Solution

Unfortunately, none of these solutions achieved what I needed, so I ended up building my own custom HTML5 video player, which you can find in my other post. This will cover the use of multiple videos, a method to make sure they don't preload in any browser, and working with the flash fallback API to pause the flash videos.

In Summary

If you aren't working with commercial material, I'd suggest using Vimeo because it is the most simple solution. If you are working with commercial video, then I'd suggest trying to work with VideoJS as it covers the majority of issues. If these don't work out feel free to check out my custom solution.