Embedding Video with Windows Media Player


Over the past few years, browser vendors have offered various conflicting solutions to the problem of how to put multimedia on a web page. Some of these, such as Microsoft's proprietary extensions to the <img> tag, are now completely obsolete.

Another nonstandard tag is Netscape's <embed /> tag, which became quite popular but was eventually replaced by the standard <object>, which is now the preferred way to embed multimedia of any kind in a web page. The <object> tag is also part of the XHTML standard, so you should use it instead of the <embed /> tag if you plan on creating valid HTML web pages. However, not all browsers fully support the <object> tag, so it's not a bad idea to use a combination of the <object> and <embed /> tags for the time being for maximum browser compatibility.

Part of the problem with the <object> tag historically is that it was slow to be adopted in web browsers. supported consistently across different browsers. This mainly had to do with the fact that Internet Explorer supported the <object> tag for quite some time before it was standardized, and included several proprietary attributes that weren't supported in Netscape Navigator or other browsers at the time. Although some of these inconsistencies have been ironed out, it's still not possible to use the <object> tag alone and achieve consistency across different browsersmore on how to solve this problem in a moment.

Following is code to embed the pond video, which you saw earlier, using the <object> tag by itself:

 <object class width="320" height="305">   <param name="type" value="video/x-ms-wmv" />   <param name="URL" value="pond.wmv" />   <param name="uiMode" value="full" />   <param name="autoStart" value="true" /> </object> 


This code isn't too terribly complicated when you consider that it is literally embedding a video directly into your web page (see Figure 19.3). The messiest part of the code is the classid attribute of the <object> tag, which is set to a big long alphanumeric code. This code is the "global ID" for Microsoft Windows Media Player, which means that you're telling the <object> tag to embed Windows Media Player on the page to play the video clip. You can just copy and paste this code into your own web pages.

Figure 19.3. The <object> tag allows you to embed a video clip on a web page while specifying which media player is to play it.


By the Way

It's important to note that Windows Media Player is a sophisticated enough media player that it automatically streams multimedia files, which means that it begins playing them after loading only the first few seconds of content. The idea is that the rest of the content is loaded in the background while you're watching or listening to earlier portions. The result is that visitors don't have to wait through long download times when viewing or listening to your multimedia clips.


The width and height attributes of the <object> tag determine the size of the embedded Windows Media Player window. Some browsers will automatically size the embedded player to fit the content if you leave these attributes off, whereas others won't show anything at allplay it safe and set them to a size that suits the multimedia content being played.

There are four <param> tags within the <object> tag that are responsible for additional details about how the clip is to be played. Each of these tags has two attributes, name and value, which are responsible for associating data (value) with a particular setting (name). In this example, the URL for the media clip is set to pond.wmv. The third parameter, uiMode, determines which buttons and user interface options are made available by Windows Media Playerfull indicates that all user interfaces features are enabled, such as the control buttons and volume slider. And finally, the autoStart parameter is set to true so that the video clip automatically starts playing when the page is opened in a browser.

I saved the trickiest parameter for lastthe type parameter identifies the type of media being displayed, which in this case is a Windows Media Video (WMV) file. This media type must be specified as one of the standard Internet MIME types, which you might have heard of. Following are the MIME types for several popular sound and video formats you might want to use in your web pages:

  • WAV Audio audio/x-wav

  • AU Audio audio/basic

  • MP3 Audio audio/mpeg

  • MIDI Audio audio/midi

  • WMA Audio audio/x-ms-wma

  • RealAudio audio/x-pn-realaudio-plugin

  • AVI video/x-msvideo

  • WMV video/x-ms-wmv

  • MPEG Video video/mpeg

  • QuickTime video/quicktime

A MIME type is an identifier for uniquely identifying different types of media objects on the Internet. MIME stands for Multipurpose Internet Mail Extensions, and this name comes from the fact that MIME types were originally used to identify email attachments. These MIME types should be used in the type attribute of the <object> tag to identify what kind of multimedia object is being referenced in the data attribute.

Listing 19.2 shows the relevant code for the pond web page, where you can see the <object> tag as it appears in context.

Listing 19.2. A WMV Video Clip Is Embedded Directly in the Pond Page via the <object> Tag
 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Michael's Pond</title>   </head>   <body style="background-image:url(water.jpg)">     ...     <p style="text-align:center">       Following is a video of my fish playing in the pond:     </p>     <p style="text-align:center">       <object class width="320"       height="305">         <param name="URL" value="pond.wmv" />         <param name="uiMode" value="full" />         <param name="autoStart" value="true" />         <embed width="320" height="305" type="video/x-ms-wmv"         src="/books/4/158/1/html/2/pond.wmv" controls="All" loop="false" autostart="true"         pluginspage="http://www.microsoft.com/windows/windowsmedia/" />       </object>     </p>   </body> </html> 

By the Way

Because the <embed /> tag is not supported in XHTML, it will prevent your pages from validating. Unfortunately, there really is no workaround for this problemwe'll just have to wait for browsers to fully support the <object> tag by itself.


Wait a minute, there's some extra code that didn't appear in the earlier <object> tag example. Unfortunately, as I alluded to earlier in the lesson, not all web browsers are entirely consistent in their support of the <object> tag. In fact, Opera simply won't show anything if you use the <object> tag to embed the media player. For this reason, it is necessary to include an <embed /> tag within the <object> tag to account for browser inconsistencies. This isn't an ideal solution but it's all we have while browser vendors continue to lag behind prevailing standards. If you pay close attention, you'll notice that the <embed /> tag contains all the same information as the <object> tag.

By the Way

I continue to use the <embed /> tag throughout the remainder of the lesson to help ensure maximum compatibility across all major browsers. At some point in the near future, hopefully we'll be able to use the <object> tag exclusively and do away with the <embed /> tag once and for all.


I haven't entirely let on that the <object> tag is a bit more complex than I've revealed here. The reason is that you don't need to know how to use the more advanced facets of the <object> tag just to play multimedia content. In other words, it isn't important for you to become a multimedia guru in order to share some multimedia clips on your web pages.




SAMS Teach Yourself HTML and CSS in 24 Hours
Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
ISBN: 0672328410
EAN: 2147483647
Year: 2005
Pages: 345

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net