Wickham's HTML & CSS tutorial

Video example using Windows Media Player

The video requires ActiveX in IE. People without Windows Media Player will see a popup asking whether they want to download it. Wait for the file to download. Click the left button of the controller to start the video (you may have to click twice using Opera). IE6 on my old computer doesn't play the video with the object tag code so it uses the embed tag. Firefox also uses the embed tag. Firefox, Opera and Safari use QuickTime on my computer because I have QuickTime installed but people without QuickTime should use WMP. The code does not validate because of the deprecated embed tag, but it is still widely used to play in Firefox and some other browsers.

The code for the above video in mpg format is:-

Note that there is an embed tag nested inside the object tag. If the preferred method of showing the video fails, the browser will try the second. In the example above, Firefox works with the embed tag but not the object tag while IE works with the object tag. Allow enough height for the controller.

In most cases IE requires ActiveX enabled to view a video but Firefox, Safari and Google Chrome do not need javascript enabled with my example but Opera does.

The example uses Windows Media Player and won't show a video without it but viewers without WMP will receive a prompt to download and install it.

Some notes on parameters are shown on htmlhelp.com site which seem to be related to QuickTime but are good general knowledge. However, the comments seem to relate to IE6 as the object tag does not work in Firefox with the code shown.

A very good site is cit which will prepare the code for you for Flash, QuickTime, Real Media and Windows Media.

A sound file can be used as the alternative if the video file type is not supported by the browser.

QuickTime

For QuickTime code see QuickTime video example

CSS3 Video element

The CSS3 <video>...</video> video tag is processed by Firefox, Safari and Google Chrome but not by IE6, IE7, IE8 or Opera as at 07/09/10. IE9 supports the H.264 video format with the <video> tag. These pages from Mozilla and Safari Reference Library and Kaltura show the code and the working draft of the HTML5 video and audio standard is at whatwg.org. The audio element is similar.

At present browsers process different formats from each other but you can code the same video or audio in several different source types (formats) and a browser will play the first format that it is able to play.

It seems that for .swf Flash files the <embed>...</embed> tags will be used instead of the video tags. The embed tag has been reintroduced in HTML 5 and will validate in the future but at present it remains an IE vendor-specific tag which doesn't validate:-

HTML markup:-

CSS:-

embed { width: 500px; height: 450px; }