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.
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"'>
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 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.
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.
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.
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.