1. Computing & Technology

Discuss in my forum

How to Use HTML 5 to Display Video in Modern Browsers

By , About.com Guide

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

©2012 About.com. All rights reserved.

A part of The New York Times Company.