How to Use HTML 5 to Display Video in Modern Browsers

01
of 11

Introduction to HTML 5 Video

HTML 5 Logo
HTML 5 Logo. W3C

The HTML 5 video tag makes it easy to add video to your Web pages. But while it appears easy on the surface, there are a lot of things that you need to do to get your video up and running. This tutorial will take you through the steps to create a page in HTML 5 that will run video in all the modern browsers.

02
of 11

Hosting Your Own HTML 5 Video vs. Using YouTube

YouTube is a great site. It makes it easy to embed video into Web pages quickly, and with some minor exceptions is fairly seamless in it's execution of those videos. If you post a video on YouTube, you can be fairly confident that anyone will be able to watch it.

But Using YouTube to Embed Your Videos Has Some Drawbacks

Most of the problems with YouTube are on the consumer side, rather than on the designer side, things like:

  • Slow searching and indexing
  • Server outages
  • Content being removed (seemingly) arbitrarily
  • Too much bad content

But there are some reasons why YouTube is bad for content developers as well, including:

  • 10-minute maximum length for videos (for free accounts)
  • Poor upload performance
  • YouTube gains unlimited usage rights to your video
  • Any YouTube user gains unlimited usage rights to your video

HTML 5 Video Gives You Some Advantages Over YouTube

Using HTML 5 for video will let you control every aspect of your video, from who can view it, how long it is, what the content contains, where it's hosted and how the server performs. And HTML 5 video gives you the opportunity to encode your video in as many formats as you need to make sure that the maximum number of people can view it. Your customers don't need a plugin or to wait until YouTube releases a newer version.

Of Course HTML 5 Video Offers Some Drawbacks

These include:

  • You have to encode your video in at least three different codecs
  • You have to include some JavaScript to ensure browsers that don't support HTML 5 will work
  • Your server has to be able to handle the bandwidth requirements of hosting videos

03
of 11

Quick Overview of Video Support on the Web

Adding video to Web pages has long been a difficult process. There were so many things that could go wrong:

  • First you use the <embed> tag to embed your video into your page. BUT that tag is deprecated in favor of another tag. And some browsers never supported it well anyway.
  • So you switch to the <object> tag, but older browsers don't support it and newer browsers are sketchy in it's support.
  • Then you think "Flash!" And encode your video as an FLV file. But Flash isn't supported on many mobile devices and many people hate Flash no matter how it's used (25% of respondents in my poll asking about how you feel about Flash stated that they can't stand Flash in any way).
  • So you decide to upload your video to a video embedding site like YouTube, but then you have the issues with YouTube I discussed in the previous page.
  • Finally you decide to go with HTML 5, but Internet Explorer doesn't support it (not until Internet Explorer 9). And even if you do, there are two video codec standards that are supported, and only one browser that can use both. Browser Support for Video Codecs and Containers

So what are you supposed to do? Giving up on video is no longer an option for most sites, as video is becoming more and more important. And many sites have successfully switched to video.

The following pages of this article will step you through how to add video to your Web pages that works in Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 and 4, iPhone and Android, Flash, and Internet Explorer 7 and 8. You will also have the keys you need to add support for other older browsers if necessary.

04
of 11

Create and Edit Your Video

The first thing you need when you're going to put a video on a Web page is the actual video. You can either shoot continuously and edit afterwards to create a feature, or you can script it and plan it out ahead of time. Either way works well, it's just whatever you're comfortable with. If you don't know what type of video you should make, check out these ideas from the Desktop Video Guide:

  • Family Video Projects
  • Marketing and Promotional Videos
  • Video Virtual Tours
  • How to Videos
  • Wedding Videos

Learn How to Record High-Quality Video

Make sure you know how to record indoors and outdoors as well as how to record audio. Lighting is also very important - shots that are too bright hurt the eyes, and too dark just look muddy and unprofessional. Even if you only plan to have a 30 second video on your site, the higher quality it is the better it will reflect on your website.

Remember too that copyright applies to any sounds or music (as well as stock footage) that you might want to use in your video. If you don't have access to a friend who can write and play a song for you, you'll need to find royalty-free music to play in the background. There are also places you can stock footage to add to your videos.

Editing Your Video

It doesn't matter what editing software you use, just so long as you're familiar with it and can use it effectively. Gretchen, the Desktop Video Guide, has some professional video editing tips that can help you edit your videos so that they look great.

Save Your Video to a MOV or AVI (or MPG, CD, DV)

For the rest of this tutorial I am going to assume you have your video saved in some type of high quality (non-compressed) format like AVI or MOV. While you can use these files as they are, you run into all the problems with video that we've already discussed. The following pages will explain how to convert your file into three types so that it is viewable by the largest number of browsers.

05
of 11

Convert the Video to Ogg for Firefox

The first format we will convert to is Ogg (sometimes called Ogg-Theora). This format is one that Firefox 3.5, Opera 10.5, and Chrome 3 can all view.

Unfortunately, while Ogg has browser support, many of the well-known video programs that you can buy (Adobe Media Encoder, QuickTime, etc.) don't offer an ogg conversion option. So the only way to convert your video to Ogg is to find a conversion program on the Web.

Conversion Options

There is an online tool called Media-Convert that claims to convert various formats of video (and audio) into other video (and audio) formats. When I tried it with my 3 second test video I couldn't get it to work on my Mac. But you may have better luck. This site has the benefit of being free.

Some other tools I found include:

Once you have your video saved in the Ogg format, save it to a location on your website and go to the next page to convert it to other formats for other browsers.

06
of 11

Convert the Video to MP4 for Safari

The next format you should convert your video into is MP4 (H.264 video) so that it can be played on Safari 3 and 4 and the iPhone and Android. Plus, H.264 videos can be easily converted to FLV files for watching on Flash.

This format is more readily available in commercial products, and you probably already have a program that will convert to MP4 if you have a video editor. If you have Adobe Premiere you can use the Adobe Video Encoder, or if you have QuickTime Pro that will work as well. Many of the converters we discussed in the previous page will aslo convert videos to MP4.

Save your MP4 file to your website and then you'll need to convert it to Flash for Internet Explorer to use.

07
of 11

Convert the Video to FLV for Internet Explorer

The easiest way to convert videos to FLV is to use Flash itself. That is how I convert my videos to Flash. But if you don't have Flash, here are two popular tools for converting files to FLV:

  • SUPER (Windows) - will convert many different file types to MP4 and FLV
  • ffmpegX (Macintosh) - will convert many different file types to Mp4 and FLV.

Save your FLV file to your website and the next page will show you how to write the HTML so that you can play your videos.

08
of 11

Add the Video Element to Your Web Page

It is very easy to use HTML 5 to add video to Web pages. Most modern browsers support HTML 5 video, although they don't all support it in the same way. But what this means is that if you save your video as both Ogg and MP4 formats, you will be able to write just four or five lines of HTML to get it to display in most modern browsers (except Internet Explorer 8). Here's how:

  1. Write the HTML 5 doctype marker so that browsers know to expect HTML 5:
    <!doctype html>
  2. Create your Web page as you would normally create it:
    <html>
      <head>
        <title></title>
      </head>
      <body>
        
      </body>
    </html>
  3. Inside the body, place the <video> tag:
    <video></video>
  4. Decide what attributes you want your video to have:
    • autoplay - to start as soon as it's downloaded
    • controls - allow your readers to control the video (pause, rewind, fast-forward)
    • loop - start the video from the beginning when it ends
    • preload - pre download the video so that it's ready faster when the customer clicks on it
    • poster - define the image you want to use when the video is stopped
    I recommend using controls and preload. Use the poster option if your video doesn't have a good first scene.
    <video controls preload></video>
  5. Then add the source files for the two versions of your video (MP4 and OGG) inside the <video> element:
    <video controls preload>
    <source src="shasta.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="shasta.ogg" type='video/ogg; codecs="theora, vorbis"'>
    </video>
  6. Open the page in Chrome 1, Firefox 3.5, Opera 10, and/or Safari 4 and make sure it displays correctly. You should test it in at least Firefox 3.5 and Safari 4 - as they each use a different codec.

That's it. Once you have this code in place you'll have a video that works in Firefox 3.5, Safari 4, Opera 10, and Chrome 1. But what about Internet Explorer?

Internet Explorer Doesn't Like HTML 5 or the <video> Tag

In the next section I'll talk about what you can do to get IE 8 to play nicely with your HTML 5 video tags and display a video. You have to use Flash. The good news is that IE 9 is expected to support HTML 5 and the video tag.

09
of 11

Add the JavaScript and Flash Player to Get Internet Explorer to Work

You may have noticed that in the previous page's HTML, there was no source line for the FLV file. And if you tested that page in Internet Explorer it wouldn't work. That's because Internet Explorer does not recognize HTML 5 and it can't play either OGG or MP4 videos natively. In order to get Internet Explorer 7 and 8 to work, you need to have it play the video as Flash. But there are more steps to getting it to work than just adding the FLV file.

Step 1: Get a Flash Video Player for Your Website

I recommend getting FlowPlayer because it is an open source Flash video player that you can install on your Web server and use whenever you have Flash video to play. The free version of FlowPlayer inserts advertising into your videos, but you can also purchase commercial licenses if you need them.

Follow the instructions on the FlowPlayer site to install FlowPlayer on your website. In an nutshell, you'll be installing 2 SWF files and a JavaScript file on your site. At the bottom of your HTML, (before the </body> tag) you'll add a line:

<script src="flowplayer.min.js"></script>

But Internet Explorer still won't play the video, you have to teach it how to recognize HTML 5 tags.

Step 2: Convince Internet Explorer to Read HTML 5 Tags

There is a handy script on Google Code called "HTML Shiv" that will help IE recognize HTML 5 elements. So in the <head> of your HTML document you want to reference it. It's best to enclose it in IE conditional comments so that other browsers aren't confused:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Okay, now IE will recognize the <video> tag, but won't know what to do with the source files you've included so far.

Step 3: Add a Source Line for the FLV File

Just like you did on the previous page, you'll add a line to your HTML 5 inside the <video> element that indicates where you've stored the FLV file on your server.

<video controls preload>
<source src="shasta.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="shasta.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="shasta.flv" type='video/x-flv; codecs="On2 VP6, Sorenson Spark, Screen video, Screen video 2, H.264"'>
</video>

10
of 11

Add the JavaScript and Flash Player to Get Internet Explorer to Work - Part 2

Unfortunately, we're still not done. We have to now tell IE to use the FlowPlayer Flash video player we'd referenced above.

Step 4: Turn the <video> Element Into Flash

For this we need another script. I got the script from Dive Into HTML 5. But when I tested it, it didn't work until I made a couple of adjustments:

  • Around line 31: add the location of your FlowPlayer installation.
  • Around line 42: change the file type from
    video/mp4
    to
    video/x-flv
  • Around line 94: starting with
    if (!!$ && !!$(document).ready) {
    to the end of the document, change that section to read:
    //if (!!$ && !!$(document).ready) {
      /* jQuery users can initialize as soon as the DOM is ready */
    // $(document).ready(html5_video_init);
    //} else {
      /* Everyone else can wait until onload */
      /* addEvent function via http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ */
      var addEvent = function( obj, type, fn ) {
        if (obj.addEventListener)
          obj.addEventListener(type, fn, false);
        else if (obj.attachEvent)
          obj.attachEvent('on' + type, function() { return fn.apply(obj, new Array(window.event));});
        }
      addEvent(window, "load", html5_video_init);
    //}

Once you've edited the JavaScript file, upload it to your server, and link to it at the bottom of your HTML page (before the </body>):

<script src="html5-video.js"></script>

Whew! Now that you've done all that, you should upload your HTML so you can begin testing.

11
of 11

Test in As Many Browsers As You Can

Testing video pages is critical if you want to have a successful launch. You should be sure to test your page in the most popular browsers and versions for your website. I've found that while it's possible to use tools like Browserlab and AnyBrowser to test video, it's not as reliable as bringing up the page on a browser yourself. When you do that you can really see if it's working or not.

Since you went to all the trouble to encode your video in three formats, you should test it to make sure it displays in all three. This means, at a minimum, you should test it in:

  • Firefox 3.5
  • Safari 3 or 4
  • Internet Explorer 7 or 8

You can test in Chrome, but since Chrome will view all three methods (even Flash, if you have the plugin), it's hard to tell if there's a problem with one of the other two or which codec Chrome is using.

For your peace of mind you should also test in older browsers to see what they do, especially if a lot of your readers use older browsers.

Getting the Video Working In Older Browsers

As with any Web page, you should first consider how important it is to get those browsers working. If 90% of your customers use Netscape, then you should have a fallback plan for them. But if less than 1% do, it might not matter so much. Once you've decided what browsers you're going to try to support, the easiest way is to simply create an alternate page for them to view the video in. On that alternate page you would embed a video using HTML 4. And then either use some form of browser detection to redirect them there or just add a link to that page on this one.