Wickham's HTML & CSS tutorial

Sound (audio) and Video

Warning: These examples may not work in all browsers. Sound and video is a difficult subject to code. The examples work in IE6 and above with ActiveX and in Firefox, Safari for Windows, Google Chrome and Opera (with javascript for one example) but I have not tested on an Apple Mac. IE7 was working well until I suddenly found the page crashed IE7. I found out that the QuickTime plugin had become out of date and needed updating. IE7 worked well again afterwards. The following examples are just an introduction; they are not a complete tutorial.

IE needs different codes from other browsers. Tutorials on the web usually nest two methods together to suit most browsers. If the solutions below don't work for you, use Google to find a solution that does. Although the examples below work as shown, if you have a different sound file type they may not work. Some research, googling and trial and error may be required. The examples below work on IE and Firefox but may not work on other browsers, especially on an Apple Mac.

The page does not validate as I have included examples with the embed tag which the validator considers out of date, including all the attributes used inside the embed tag. However, the embed tag is still useful and often used as there is no alternative for older browsers.

See w3schools tutorial for general information on the embed, bgsound and object tags.

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

QuickTime or Macromedia Flash

Some sound examples and the video example are based on the QuickTime plugin which can be downloaded from here (you need javascript or ActiveX enabled to see the correct page for QuickTime for Windows). This is mainly because my camera produces .mp4 video files and the QuickTime code will show them.

It is probably better to convert the .mp4 files to Flash .swf files because the Macromedia Flash software seems to be more commonly used. Each video on MySpace gives code for inserting Flash .swf files in a web page and it uses the Embed element which is deprecated and will not validate but still works in major browsers.

The Embed element

The Embed element is supported by both Internet Explorer and Netscape, but it is not a standard HTML or XHTML element. The World Wide Web Consortium (W3C) recommend using the Object element instead. The Embed element is an old method still supported by other main browsers besides IE and Netscape. It will not validate but is simple to use. It will work with common sound file formats such as midi and wav.

1 gold icon A simple code just to load a sound file which plays when the page is loaded is:-

The bgsound tag is used if the embed tag is not supported by the browser, but the bgsound tag has fewer options and is itself very out of date.
The noembed element defines content within embed content that is to be ignored by browsers that can activate the embed plug-in application. Browsers that can't/won't activate the embed plug-in but that understand the embed/noembed elements or browsers that do not understand the embed/noembed elements (eg bgsound) will display the noembed content (eg text).

A list of attributes for use with the embed tag is given by webreference.com.

The embed element can also be used for video files provided that the browser supports the file format.

2 gold icon If you want a controller to show so that the sound can be turned off or the volume can be altered you may find that browsers interpret the code in different ways. This works in IE if ActiveX is enabled and in Firefox without javascript and shows the QuickTime controller provided the viewer has the QuickTime plugin or failing that, the default browser controller:-

The autostart="false" means that the arrow on the left side next to the volume control speaker icon must be clicked to start the sound (it needs two clicks in some browsers like IE).

A controller will show below 150px x 16px if the QuickTime plugin is being used or another controller 25px high with most browser default controllers or failing those a noembed message will show:-

You should be able to see a sound controller now, but if you see this, you're browser doesn't support the appropriate element or ActiveX is disabled.

Opera does not show the controller and starts the sound immediately, so the code in item 3 is preferred.

The embed tag will show a default controller such as Windows Media Player if the QuickTime plugin is not available. However, in IE the controller shows a white background above and below the QuickTime controller because I have set the div height as 25px to be able to show a typical default browser controller which is often 25px high while the QuickTime controller is only 16px high. In Firefox the padding takes the main page background-color but in IE it does not and it seems impossible to cure this.

The Object element

The object element is the correct way to include sound, video, images or other html files in html documents. You can also use scripts such as javascript. However, there is some difficulty achieving one code for both IE and Firefox so most tutorials advise using the object element for IE but continue using the embed element for Firefox and other browsers.

There are many formats for sound and video and the viewer may not have the software on his computer to view the format of your file. You also need to give the viewer an alternative, either text, an image or a link to another page. Depending on which code you use it may cause a popup asking the viewer to install a plugin, but it might also be advisable to have a text note near the link to explain which file type is being used and which plugin is required and give a link to the download page.

See w3.org's Introduction to Objects, W3 Schools' tutorial and Web Design Group's tutorial.

3 green icon Sound (audio) with the Object element and the QuickTime plugin

The same sound controller as above is shown here with the object element used for IE and the embed element used for Firefox and other browsers. (It needs two clicks in some browsers like IE and Opera). IE requires ActiveX enabled.

The following code comprises one object tag and a nested embed tag which works in IE6, IE7, Firefox, Safari for Windows and Google Chrome and used to work with an old version of Opera. However, the latest version of Opera doesn't show the controller and starts the sound immediately. The code is still the favorit method of coding sound (perhaps website designers haven't realised that Opera now doesn't work properly or they ignore Opera because it has a small market share).

The controller shown below uses two object tags and an embed tag so that the latest version of Opera works properly.

The code is:-

Note that the embed element is nested inside the object which is nested inside another object tag. If the preferred method of playing the sound fails, the browser will try another. In the example above, IE works with the first object tag and Firefox works with the embed element.

The example uses the QuickTime plugin but viewers without QuickTime should receive a prompt to download it.

The following code is frequently seen in tutorials and works in Firefox when a controller is not required to be visible but inserting <param name="hidden" value="false"> or <param name="controller" value="true"> does not make the controller visible in Firefox. Use the embed tag as above to see the controller in Firefox. It does not work at all in IE which is why it is usually nested under the classid method shown above:-
<object data="soundtest2.wav" type="audio/x-wav" title="Introduction">
<param name="autostart" value="true">
<param name="hidden" value="true">
<a href="soundandvideo.php">Sound and Video</a>
</object>

4 green icon Video with the Object and Embed elements and QuickTime or Windows Media Player

It is a good idea to put a video on a separate page all by itself so that the main page downloading time is not lengthened by a big video file. A viewer will then click a link to view a video when he is ready to see it and will expect a downloading delay (you could warn the viewer of the file size or time).

See this QuickTime video example and this Windows Media Player video example with code.

It requires ActiveX in IE. 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 but Firefox does not need javascript enabled.

The examples use QuickTime or Windows Media Player and won't show a video without one of them but viewers without QuickTime or Windows Media Player should receive a prompt to download 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 IE 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.

All the above methods, whether for video or sound, rely on the browser downloading the file before starting the video or sound so some consideration should be given to the time it will take and whether your target viewers are likely to have a dial-up rather than a broadband connection. Code for streaming video or sound is more complicated and would depend on your contract with your host.

See the following for codes for the embed and object elements:-
scriptwell.net
UCL

The QuickTime plugin can be downloaded free from here. If you have javascript/ActiveX enabled you will see the page for the Windows version, otherwise the Mac versions.

Playing sound by clicking on an icon link, text link or button

5 gold icon Playing sound by clicking on an icon

You can set just one or a series of sound files to be played only when an icon or text link is clicked. However, the original page is replaced by the media player control panel so it is not suitable if you want the original page to continue displaying (see the next item).

This icon when clicked will start a sound file by opening a sound player. On my PC it opens QuickTime but on other computers it might open Windows Media Player. It works with Firefox without javascript enabled and in IE provided ActiveX is enabled.

The code is as follows:-

This tutorial may be useful:- Lisa Wollin. See the paragraph "Play sound on Click".

6 gold icon Here is a javascript version for sound played on mouseclick without opening a sound player window.

If you want an image showing a photo of the music's subject like a band or something else about the sound you have to place a button next to or below the image. Javascript can also be used to provide a stop button. The code is from forums.dealmac.com

The script and embed codes have been put at the bottom of the html source code. The validator finds errors with the javascript and embed codes but it works in IE and Firefox provided ActiveX and javascript are enabled.

Code for Flash video in a web page

7 gold icon See Flash video examples for examples of code for Flash video in a web page.

The examples work in IE6, IE7, IE8, Firefox, Safari for Windows, Google Chrome and Opera.

HTML5 Audio and Video elements

8 gold icon The HTML5 <video>...</video> video tag is processed by Firefox, Safari, Google Chrome and Opera but not by IE6, IE7 or IE8. IE9 and above supports the H.264 video format with the <video> tag. See the HTML5 page for an example. The audio element is similar and html5doctor is a tutorial.

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.

The page is in a containing div with width: 730px; and margin: auto; so that it centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | prev | next