Putting Media in your Web Pages

Embedded Media - YouTube videos

The <embed> tag is not approved by the W3C and as such will not validate. YouTube provides the following code to embed their video clips:

<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
</object>

First, the <embed> tag is evil, so we remove it:

<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</object>

Next we add some properties to the <object> tag:

<object type="applicatioin/x-shockwave-flash" data=" http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&" width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</object>

Finally, we convert the <param> tags to self-closing tags for XHTML compliance:

<object type="applicatioin/x-shockwave-flash" data=" http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&" width="480" height="385">
<param name="movie" value=http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1& />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>

This code should display in Internet Explorer and Firefox.

Embedded Media - Audio

Embedded audio is a bit trickier: Internet Explorer seems to need a specific classid for the plug-in you want it to use for the media, while Firefox and other browsers seem perfectly capable of figuring this out on their own. In order to do this we're going to use HTML conditional comments:

<!--[if IE]>

Do stuff in IE.
<![endif]-->

<!--[if !IE]>-->

Do stuff in everything else.
<!--<![endif]-->

The conditional comments are a bit different between the 'stuff-for-IE' and 'stuff-not-for-IE' sections. This is because the 'stuff-not-for-IE' uses a negation operator (!) in the conditional statement, which will foobar the code unless the extra '-->' is added to the end of the conditional, and the '<!--' is prepended to the end statement.

From here on we're assuming we're wanting to play an .mp3 file. To play a .wav file would require a different value for the 'type' property.

Now, you can begin to build your <object> tags for each section. For IE the basic structure would be:

<object data="PATH_TO_AUDIO_FILE" type="audio/mpeg" (type="audio/x-wav" for a .wav file) width="WIDTH" height="HEIGHT" classid="CLASSID_FOR_DESIRED_PLUGIN">
<param .../>
</object>

There are different classid values and different param names and values for different plug-ins:

Windows Media Player

classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"

Common Parameters:

<param name="URL" value="PATH_TO_AUDIO_FILE" />
<param name="AutoStart" value="true|false" />
<param name="uiMode" value="none|invisible|mini|full" />
More at http://www.w3schools.com/media/media_playerref.asp

Quicktime

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase=http://www.apple.com/qtactivex/qtplugin.cab"> (add this to the <object> tag)

Common Parameters:

<param name="src" value="PATH_TO_AUDIO_FILE" />
<param name="autoplay" value="true|false" />
<param name="controller" value="true|false" />

So, assuming we want to use Quicktime to play an .mp3 file, our code would look like this:

<!--[if IE]>
<object data="PATH_TO_AUDIO_FILE" type="audio/mpeg" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase=http://www.apple.com/qtactivex/qtplugin.cab" width="150" height="10">
<param name="src" value="PATH_TO_AUDIO_FILE" />
<param name="autostart" value="false" />
<param name="controller" value="true" />
</object>
<![endif]-->

<!--[if !IE]>-->
<object data="PATH_TO_AUDIO_FILE" type="audio/mpeg" width="150" height="10">
<param name="src" value="PATH_TO_AUDIO_FILE" />
<param name="autostart" value="false" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->




Content by Vincent Santa Maria.