Submit to HN

• Tweet

• Tweet

This is the third and final part of the series of posts which cover audio and video support in HTML 5 (across various browsers).

You can read the first part and the second part too. In this part we will cover the HTML 5 markup for the <video> element.  Going by basics all you need is:

However, it is better to fix a height and width for the video

If you don't want to create your own controls and wants the defaults to be used

The preload attribute tells the browser that you would like it to start downloading (but not playing) the video file as soon as the page loads.

The autoplay attribute  tells the browser that you would like it to start downloading the video file as soon as the page

loads, and you would like it to start playing the video automatically as soon as possible.

However, as we have leant in the previous posts, all browsers don’t support all types of videos. So we need three video

files:

As we can see that the video element doesn’t link to any video. Instead, it just specifies the height and the width of the

video and that default controls are needed. Each source element links to a single video file (with the src attribute),

and it also gives information about the video format (in the type attribute).

The type attribute is a combination of three pieces of information: the container format, the video codec, and the audio codec.

However, setting the type attribute in your HTML markup is not sufficient. You also need to ensure that your web server includes the proper MIME type in the Content-TypeHTTP header.

 

If you’re using the Apache web server or some derivative of Apache, you can use an AddType directive in your site-widehttpd.conf or in an .htaccess file in the directory where you store your video files. (If you use some other web server, consult your server’s documentation on how to set the Content-TypeHTTP header for specific file types.)

If you want to get your videos to play everywhere without any problem, just use a copy of the codes from here.

Get in touch with the writer at mitra[dot]arkid[at]gmail[dot]com

Related posts:

1. Audio and Video support in HTML 5 – audio codecs, h.264 licensing issues – Part 2
2. Audio and Video support in HTML 5 – the basics-Part 1
3. FluidHTML – Markup for Flash- What does it mean for HTML guys?