How to add Video in HTML5

HTML5 introduced a new tag for videos. To insert a video into your web page you can now do this:

<VIDEO SRC="your_video.mp4"></VIDEO>

This simplifies things greatly, as previously you had to use the OBJECT and PARAM tags. Even with a YouTube video that code would look messy:

<object width="" height="">
<param name="movie" value="http://www.youtube.com/v/your_ref"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/your_ref_here" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="" height=""></embed>
</object>

However, Google does produce the code for you, and all you need to do is copy and paste it.

Another alternative for video is Flash. Unfortunately, not all browsers support Flash (Apple's Safari in particular.) Even for those that do, you need a plugin to watch the video.

So the VIDEO tag in HTML5 was meant to allow all browsers to display your videos. At the time of writing, though, different browsers support different video formats. Older browsers won't recognize the VIDEO tag at all. With those caveats in place, let's take a further look at the video tag.

 

Video Formats and Codecs

The most popular video formats are MP4 (MPEG4), FLV (Flash), OGG and AVI. A newer format is WebM. But these file endings, .mp4, .flv, .ogv, .avi, and WebM, are not actually a single file. They are known as container files. That's because a video is a combination of separate files, such as the video itself and sound tracks. There will also be files for synchronising the video with the sound, the aspect ratio, the language, video title, and a whole lot more.

The moving images part of the video will be encoded using programming code known as an algorithm. This algorithm is called the video codec. A video player decodes this algorithm (codec) and displays the moving images on your screen. There are quite a lot of video codecs out there, but the most popular are H.264, Theora, and Google's VP8.

As well as video codecs there are also separate audio codecs. The audio codec that just about everybody has heard of is MP3 (short for MPEG 1, Audio Layer 3). Others are Apple's AAC, and Vorbis.

(It must be pointed out that MP4 and MP3 are patent protected. You are usually allowed to produce video and audio files in these formats because a vendor (Microsoft, Apple, etc) has already paid for the right to use the encoder and decoder software.)

With all these different video and audio combinations, you won't be surprised to learn that browser support is patchy. For example, if you wanted to show a Flash video then people who have Macs, iPhones, and iPads won't be able to see it.

Browser patchiness is the reason why the new VIDEO tag takes a sub-tag called SOURCE. The SOURCE sub-tag lets you specify more than one container format. Take a look at this example:

<VIDEO>

<SOURCE SRC="my_video.mp4" TYPE='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<SOURCE SRC="my_video.webm" TYPE='video/webm; codecs="vp8, vorbis"'>
<SOURCE SRC="my_video.ogv" TYPE='video/ogg; codecs="theora, vorbis"'>

</VIDEO>

The VIDEO tag is now by itself. Between the two VIDEO tags, however, we have three SOURCE tags. After the word SOURCE you need a SRC attribute. This is the name and location of your video. Notice that the MP4 format comes first. This is to cater to your iPad users. If it's not top of the list then iPad just bails out - it only recognises one SOURCE tag. Newer version of the iPad may well correct this bug.

Notice the TYPE attribute above, though. It is split in to three parts:

TYPE='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '

You need the type of video it is (video/mp4, in this case). After a semi colon you then specify the codecs. The video codec comes first, followed by the audio codec. The two are separated by a comma. The quotation marks are need. The TYPE above is surrounded by single quotes, one at the start and one at the end. The codecs need their own quote marks, which are double quotes above. You can do it the other way round, though:

TYPE="video/mp4; codecs='avc1.42E01E, mp4a.40.2' "

In the line above double quotes are on the outside and single quotes on the inside.

Video can be a very complicated subject. If you don't want to go to all the trouble, then YouTube can convert your videos and provide the code to copy and paste into your web page.