Putting multimedia into pages is something you may already have tried to do. It was not covered in the beginners section because the easy way is the wrong way and the right way is confusing! The wrong way is to use EMBED and the right way is to use OBJECT.
An OBJECT is effectively a window within the Web page to an application or to another Web page.
Why OBJECT?
You should not be using the EMBED element any more as it is deprecated. In practice many people (including some of the biggest) still use EMBED but try not to. The reason you might be tempted is that the OBJECT element is a nightmare. It relies on cryptic IDs and different browsers implement it very differently. It is almost impossible to get all types of media working on all browsers in one simple way. It is possible though.
OBJECT is also intended to replace the deprecated APPLET element and can be a better way to do the same sort of thing as IMG and IFRAME (although these two are still fully acceptable).
Once HTML5 is supported by most browsers you will be able to place video and sounds easily but for now you will either use the EMBED element (plus hope) or the method shown here.
The big benefit of the OBJECT element is that it allows support for new media types which were not known when the HTML specification was written. Support for these types can therefore be added just by use of new attributes within the element.
Avoiding OBJECT by linking to media
If you really don't want to get into OBJECTs yet just create a link to the file:
<a href="movie.mov">Show movie</a>
The browser will launch whatever application it uses to open Quicktime files and that application will show the video.
OBJECT and W3-compliant browsers
If you want sound or video to be played within the Web page then you need to place the application which plays it within the page using a plug-in. The plug-in is a program which will appear as an element within the page. This will only work if the user has the appropriate plug-in installed although browsers will try to find any missing plug-ins.
<object type="audio/mpeg" data="sound.mp3">
<param name="controller" value="true" />
<param name="autoplay" value="false" />
</object>
Try that in a standards-compliant browser and you should see a small media player in the page (you will need an mp3 file with that name). The media player which appears depends on your browser and it's settings.
The TYPE attribute is not required as the plug-in may be selected based on the file but it avoids the browser having to download the file only to find it can't play it. It tells the browser what MIME type the file is so that the correct plug-in is used. MIME types were introduced to identify the type of file being attached to emails. They are now used to identify the type of content of many other things including media, HTML, CSS and JavaScript files.
The DATA attribute points to the file or other source of data. Remember that the OBJECT itself is the program or script which will be run. The data is passed to that program. The data could be in a file (as here) or even as text. If a relative path is used the file is assumed to be in the same location as the Web page unless the CODEBASE attribute is also used. The CODEBASE attribute specifies the base location for DATA and CLASSID values. More on CLASSID soon. Internet Explorer uses CODEBASE for another purpose as explained below.
You will also need to set the width and height of the OBJECT element (using CSS) to be sure it is shown correctly.
The PARAM elements are ways to configure the media player. Here they cause the plug-in to display a set of controls and not to start playing the media immediately on load. Change the values and the media will start immediately and the user will have no way to stop it without leaving the page! That is unless the plug-in does not have a control-less interface.
CLASSID
This attribute for the OBJECT tag tells the browser which program to use to handle the data if it is not going to be handled by a plu-in. In the Web standards the value will be the program file itself:
<object classid="analogclock.py">
</object>
Most of the extra attributes and parameters can be left out if the CLASSID identifies an OBJECT source which does not need an external data or settings. The above example won't work unless you have written the Python script it mentions and your browser supports Python!
OBJECT and Internet Explorer
Unfortunately Internet Explorer (at least up to version 8) uses a different approach:
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="sound.mp3" />
<param name="autoplay" value="false" />
</object>
The CLASSID above tells the browser to use a particular application but not as a URL. Instead it uses a clsid. A clsid is used within Windows to identify specific applications independently of program names which might change. This is the clsid for Windows Media Player which won't be much use if you don't use Windows!
Coping with all browsers
Fortunately you can embed OBJECTs within OBJECTs. If a browser doesn't understand the first OBJECT it will use the nested one instead:
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="sound.mp3" />
<param name="autoplay" value="false" />
<object type="audio/mpeg" data="sound.mp3">
<param name="controller" value="true" />
<param name="autoplay" value="false" />
</object>
</object>
That will work in pretty much any browser likely to be used today but to allow for ancient browsers you can include a link for that user to click on the file and hear it that way. The link will only show if the browser cannot render the OBJECT:
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="sound.mp3" />
<param name="autoplay" value="false" />
<object type="audio/mpeg" data="sound.mp3">
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<a href="./files/sound.mp3">Your browser is not able to embed this media here so click this link to play the file in an external application </a>
</object>
</object>
There is one final problem. Internet Explorer 6 will show the second object as well as the first one. However, as it doesn't understand the second object it messes it up. Something like this:
You could ignore anyone who is that out of date but that risks confusing a big chunk of potential users. The two choices are to go back to using EMBED and hoping for the best or to add some CSS:
/* hides the second object from all versions of IE */
* html object.iehide {
display: none;
}
/* displays the second object in all versions of IE apart from 5 on PC */
* html object.object.iehide/**/ {
display: inline;
}
/* hides the second object from all versions of IE >= 5.5 */
* html object.object.iehide {
display/**/: none;
}
Give the second object a class="iehide".
This comes from here where it also explains why that works. If you own that site let me know if you would prefer I not use your ideas so blatantly!
What if the browser hasn't got the plug-in?
For IE you mis-use the CODEBASE attribute. This attribute should be a base URL for the program to be used rather than a download source. The browser thinks it is running the program which will handle the data but actually it is launching an installer:
<OBJECT codebase="http://www.apple.com/qtactivex/qtplugin.cab">
For other, standards compliant, browsers use an extra PARAM element within the second OBJECT:
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
Media types and plug-ins
You can amend the above HTML to use other types of media. You will need to know the correct TYPE and possibly CLASSID for each. The first table below suggests which plug-in might be suitable in Windows systems:
| Media | Type | Windows plug-ins | Linux plug-ins |
|---|---|---|---|
| MP3 (sound) | audio/mpegMP3 example | Windows Media Player/Quicktime | |
| OGG (sound) | application/oggOGG example | Needs user setup except WMP | |
| MID (sound) | audio/x-midi | Windows Media Player/Quicktime | |
| MPG or MPEG (video) | video/mpeg | Windows Media Player/Quicktime | |
| MOV (video) | video/quicktime | Windows Media Player/QuicktimeMOV example | |
| WAV (uncompressed sound) | audio/x-wav | Windows Media Player/Quicktime | |
| AVI (video) | video/avi | Windows Media Player/Quicktime | |
| WMV (video) | video/x-ms-wmv | Windows Media Player/Quicktime | |
| SWF (Flash video) | application/x-shockwave-flash | Adobe Flash PlayerFlash example | Adobe Flash Player |
| FLV (Flash video) | video/x-flv | Adobe Flash Player | Adobe Flash Player |
| F4V and F4P (Flash video) | video/mp4 | Adobe Flash Player | Adobe Flash Player |
| F4A (Flash audio) | audio/mp4 | Adobe Flash Player | Adobe Flash Player |
| RA (Real Audio) | audio/x-pn-realaudio-plugin | Real player | |
| RM (Real Media) | application/vnd.rn-realmedia | Real player | |
| CLASS (Java applets) | application/x-java-applet | Java runtime environment | |
| HTML (Web pages) | not needed | not neededAlternative to iframe example | not needed |
You then need to tell the browser where to get the plug-ins using CODEBASE and PARAM. The common plug-ins are:
| Plug-in | IE clsid | IE codebase | PARAM pluginurl |
|---|---|---|---|
| Media Player | 22D6F312-B0F6-11D0-94AB-0080C74C7E95 | http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab | http://www.microsoft.com/Windows/MediaPlayer/ |
| Quicktime | 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B | http://www.apple.com/qtactivex/qtplugin.cab | http://www.apple.com/quicktime/download/ |
| Real Player | CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA | n/a | n/a |
| Flash Player | D27CDB6E-AE6D-11cf-96B8-444553540000 | http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab | http://get.adobe.com/flashplayer/ |
| Java runtime | 8AD9C840-044E-11D1-B3E9-00805F499D93 | http://java.sun.com/products/plugin/autodl/jinstall-1_5_0-windows-i586.cab | http://java.com/en/download/index.jsp |
Different types of media (and therefore different plug-ins) may need extra PARAM entries. Real Player needs lots.Real guide
If in doubt about the clsid you could nest more OBJECT with different clsids in the hope that one will work (e.g. Media Player, Quicktime, Real Player clsids within three nested OBJECTS and then a final one which does it the standard way).
SOUND and VIDEO elements (HTML5)
It is too early to rely on these tags. They are in the much anticipated specification for HTML5.
<audio src="fred.wav" controls="controls">
<p>Sorry you seem to have an out of date browser so you cannot see this content. Try updating.<p>
</audio>
The above example is a good one as it will not work in Internet Explorer 8 (which supports none of the four media standards of MPEG 4, WAV, MP3 and OGG). MP3 format files are not supported by any of the browsers available at the time of writing presumably due to lincensing issues. Once browsers catch up with the new standards these two elements will save a lot of time but for now stick with OBJECT.
