...and then it crashed

Programming the web with Python, Django and Javascript.

Embedding HTML5 video is still pretty hard

In the early days of the HTML5 movement, I wrote the first major cross-browser compatibility shim for HTML5 <video> and <audio> tags. It was called html5media.js.

At the time, I assumed that the shim would be obsolete within a few years, just as soon as major browsers adopted a common standard and video codec. Unfortunately, the shim is still used by hundreds of thousands of people each day, and embedding video is just as confusing as ever.

So how do I embed video in my site?

Please, just save yourself a headache, and host your video on YouTube, Vimeo, or some other third party service. They employ some very clever people who’ve solved all the problems with embedding video.

Haha… no, really. How do I embed video in my site?

Take a deep breath. In order to embed video in your site, there are four major groups of people you need to keep happy:

  1. Modern browsers using commercial codecs (Chrome, Safari, IE9+)
  2. Modern browsers using open-source codecs (Firefox, Opera)
  3. Legacy browsers (IE8)
  4. Under-powered mobile devices (iPhone 3GS, cheap Android)

For the rest of this post, I’ll take you through the steps required to allow an increasing number of people to watch your video.

Embedding video for modern browsers with commercial codecs

The simplest video embed code you can possibly use is as follows:

1
2
3
4
5
6

<!DOCTYPE html>
<html>
    <body>
        <video src="video.mp4" width=640 height=360 controls>
    </body>
</html>

Congratulations! Your video will now play in:

  • Chrome
  • Safari (inc. Mobile Safari on iPhone 4+)
  • IE9+

Adding support for legacy browsers

In order to make your video work in legacy browsers, you need to add a script tag to the <head> of your document. This script, the venerable html5media.js, will provide a Flash video player fallback for legacy browsers.

1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
    <head>
        <script src="https://api.html5media.info/1.1.5/html5media.min.js"></script>
    </head>
    <body>
        <video src="video.mp4" width=640 height=360 controls></video>
    </body>
</html>

Note: The syntax of the <video> tag has changed to include an explicit closing tag, to avoid confusing older browsers.

Fantastic! Your video will now play in:

  • Chrome
  • Safari (inc. Mobile Safari on iPhone 4+)
  • IE9+
  • IE8 (via Flash)
  • Firefox (via Flash)
  • Opera (via Flash)

At this point, the vast majority of internet users will be able to play your video. The only people who’ll be left out will be:

  • Firefox or Opera users without Flash
  • Owners of under-powered mobile devices.

Adding Flash-free support for modern browers with open-source codecs

To allow Firefox and Opera users to view your video using their native players, you need to transcode your video into an open-source format, and embed both files in your page. I’d recommend using the free Miro Video Encoder to transcode your video to WebM format. You can then embed it using the following code:

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
    <head>
        <script src="https://api.html5media.info/1.1.5/html5media.min.js"></script>
    </head>
    <body>
        <video src="video.mp4" width=640 height=360 controls>
            <source src="video.mp4"></source>
            <source src="video.webm"></source>
        </video>
    </body>
</html>

Note: We’re adding explicit closing tags to <source> elements to avoid confusing legacy browsers.

Unbelievable! Now your video will play in:

  • Chrome
  • Safari (inc. Mobile Safari on iPhone 4+)
  • IE9+
  • IE8 (via Flash)
  • Firefox (via Flash)
  • Opera (via Flash)

It’s just the owners of under-powered mobile devices who’ll struggle to play your video now.

Adding support for under-powered mobile devices

The latest mobile devices support high-resolution video, but cheap Android phones and iPhone 3GS will refuse to play anything higher-resolution than about 320 x 180 pixels. To keep these devices happy, you need to transcode your video to this lower resolution. Miro Video Encoder has a built-in iPhone 3GS setting, so just use that.

Now you can embed your video using the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
    <head>
        <script src="https://api.html5media.info/1.1.5/html5media.min.js"></script>
    </head>
    <body>
        <video src="video.mp4" width=640 height=360 controls>
            <source src="video.mp4" media="only screen and (min-device-width: 568px)"></source>
            <source src="video-low.mp4" media="only screen and (max-device-width: 568px)"></source>
            <source src="video.webm"></source>
        </video>
    </body>
</html>

OMG! What a monster! But now everyone will be able to play your video!

  • Chrome
  • Safari (inc. Mobile Safari on iPhone 4+)
  • IE9+
  • IE8 (via Flash)
  • Firefox (via Flash)
  • Opera (via Flash)
  • Mobile Safari (iPhone 3GS)
  • Android Browser (inc. cheap Android phones)

Help! My video still isn’t playing!

The most common causes of problems are:

  • Video encoding errors.
  • Incorrect server configuration.

There’s a page full of troubleshooting information on the html5media video hosting wiki. Your problem is almost certainly covered there.

I want to customize the player UI, and make it look consistent across all browsers!

Ahahahahahahahaha!

Ahahahaha!

No.

Comments