1. Technology

How to Use HTML 5 to Display Video in Modern Browsers

By

8 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.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Multimedia
  6. Video
  7. Add Video Element to Your Web Page (HTML 5 Tutorial)

©2014 About.com. All rights reserved.