Wickham's XHTML & CSS tutorial

back

Video example using QuickTime

The video requires ActiveX in IE.
The QuickTime plugin can be downloaded free from here (you need javascript or ActiveX enabled to see the correct page for QuickTime for Windows). 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). 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:-

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="265">
<param name="pluginspage" value="http://www.apple.com/quicktime/download"/>
<param name="src" value="images/tutorial.mpg"/>
<param name="controller" value="true"/>
<param name="autoplay" value="false" />
<embed src="images/tutorial.mpg" controller="true" autostart="false" loop="false" width="320" height="265">
</embed>
</object>

It also works for videos taken with a camera in mp4 format.

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; Firefox, Safari and Google Chrome do not need javascript enabled with my example but Opera does.

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

Some notes on parameters are shown on htmlhelp.com site. Note that pluginspage and autoplay are used with QuickTime movies but autostart and hidden are used with audio clips. 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.


Two object tag method

There is an alternative using two object tags which is slightly more complicated but it does validate. It seems to be slightly less reliable. I haven't shown the video because Firefox sometimes doesn't like two videos on the same page.

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

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="265">
<param name="pluginspage" value="http://www.apple.com/quicktime/download"/>
<param name="src" value="images/tutorial.mpg"/>
<param name="controller" value="true"/>
<param name="autoplay" value="false" />
<object type="video/quicktime" data="images/tutorial.mpg" width="320" height="265" class="mpg">
<param name="controller" value="true"/>
<param name="autoplay" value="false" />
<a href="soundandvideo.html">Alternative if video does not work: Sound and Video</a>
</object>
</object>

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

The folllowing style needs to be added to the stylesheet or in the head style tag to prevent IE showing the video window and also a blank dummy window alongside or below:-

<style type="text/css">
/* hides the second object from all versions of IE */
* html object.mpg { display: none; }
/* displays the second object in all versions of IE apart from 5 on PC */
* html object.mpg/**/ { display: inline; }
/* hides the second object from all versions of IE >= 5.5 */
* html object.mpg { display/**/: none; }
</style>


Windows Media Player

For Windows Media Player code see WMP video example


HTML5 Video element

See Audio and Video in HTML5


© Wickham 2006 revised 2010