Using HTML5 to Display Video in Current Browsers

The HTML5 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 HTML5 that will run video in all the modern browsers.

  • Hosting Your Own HTML5 Video vs. Using YouTube
  • Quick Overview of Video Support on the Web
  • Create and Edit Your Video
  • Convert the Video to Ogg for Firefox
  • Convert the Video to MP4 for Safari and Internet Explorer
  • Add the Video Element to Your Web Page
  • Add the JavaScript Player to Get Internet Explorer to Work
  • Test in As Many Browsers As You Can
01
of 07

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

HTML5 Video Gives Some Advantages Over YouTube

Using HTML5 for video lets 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 HTML5 gives you the opportunity to encode your video in as many formats as you need to make sure 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, HTML5 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 HTML5 will work.
  • Your server has to be able to handle the bandwidth requirements of hosting videos.
02
of 07

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 its support.
  • Then you think Flash! And encode your video as an FLV file. But Flash is no longer supported on Windows devices.
  • So you decide to upload your video to a video embedding site like YouTube, but then you have the issues with YouTube we discussed.
  • Finally, you decide to go with HTML5, 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.

So what are you supposed to do? Giving up on video is no longer an option for most sites, as the 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 a video to your Web pages that work in Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 and 4, iPhone and Android, and Internet Explorer 7 and 8. You will also have the keys you need to add support for other older browsers if necessary.

03
of 07

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 afterward 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, we are 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 the video that we've already discussed. The following pages explain how to convert your file into three types so that it is viewable by the largest number of browsers.

04
of 07

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 we tried it with my 3-second test video, we 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 we found include:

  • Miro Video Converter (Windows Macintosh): This program has the benefit of converting to both Ogg and MP4 (H.264) and it's open-source.
  • Free Video Converter: ​We think this has both a Windows and a Macintosh version, but it was hard to tell from their site
  • Simple Theora Encoder (Macintosh): This is the one we tend to use.

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.

05
of 07

Convert the Video to MP4 for Safari and Internet Explorer

The next format you should convert your video into is MP4 (H.264 video) so that it can be played on Internet Explorer 9 and up, Safari 3 and 4, and the iPhone and Android.

This format is more readily available in commercial products, and you probably already have a program that converts 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 works as well. Many of the converters we discussed on the previous page also convert videos to MP4.

  • MediaConvert: An online AWS tool.
  • Miro Video Converter (Windows Macintosh): This program has the benefit of converting to both Ogg and MP4 (H.264) and it's open-source.
  • SUPER (Windows): Will convert many different file types to MP4
  • Free Video Converter: We think this has both a Windows and a Macintosh version, but it was hard to tell from their site.
06
of 07

Add the Video Element to Your Web Page

  1. Create your Web page as you would normally create it:
    <html>
    <head>
    <title></title>
    </head>
    <body>
    </body>
    </html>
  2. Inside the body, place the <video> tag: <video></video>
  3. Decide what attributes you want your video to have:We recommend using controls and preload. Use the poster option if your video doesn't have a good first scene. <video controls preload></video>
    autoplay - to start as soon as it's downloaded
  4. controls - allow your readers to control the video (pause, rewind, fast-forward)
  5. loop - start the video from the beginning when it ends
  6. preload - pre-download the video so that it's ready faster when the customer clicks on it
  7. poster - define the image you want to use when the video is stopped
  8. 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>
  9. 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?

It's very easy to use HTML 5 to add a 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 in both Ogg and MP4 formats, you can write just four or five lines of HTML to get it to display in most modern browsers (except Internet Explorer 8). Here's how:

Write the HTML 5 doctype marker so that browsers know to expect HTML 5:

  1. <!doctype html>
    Create your Web page as you would normally create it:
    <html>
    <head>
    <title></title>
    </head>
    <body>
    </body>
    </html>
  2. Inside the body, place the <video> tag: <video></video>
  3. Decide what attributes you want your video to have: We recommend using controls and preload. Use the poster option if your video doesn't have a good first scene. <video controls preload></video>
    autoplay - to start as soon as it's downloaded
  4. controls - allow your readers to control the video (pause, rewind, fast-forward)
  5. loop - start the video from the beginning when it ends
  6. preload - pre-download the video so that it's ready faster when the customer clicks on it
  7. poster - define the image you want to use when the video is stopped
  8. 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>
  9. 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, Internet Explorer 9+, and Chrome 1.

07
of 07

Test in As Many Browsers As You Can

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.

Testing video pages are 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.

We'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 multiple formats, you should test it to make sure it displays in multiple browsers. This means, at a minimum, you should test it in Firefox, Safari, and IE.

You can test in Chrome, but since Chrome can view both methods, it's hard to tell if there's a problem 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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Using HTML5 to Display Video in Current Browsers." ThoughtCo, Sep. 30, 2021, thoughtco.com/how-to-use-html-5-to-display-video-in-modern-browsers-3469944. Kyrnin, Jennifer. (2021, September 30). Using HTML5 to Display Video in Current Browsers. Retrieved from https://www.thoughtco.com/how-to-use-html-5-to-display-video-in-modern-browsers-3469944 Kyrnin, Jennifer. "Using HTML5 to Display Video in Current Browsers." ThoughtCo. https://www.thoughtco.com/how-to-use-html-5-to-display-video-in-modern-browsers-3469944 (accessed December 5, 2021).