Automatically Embedding the Appropriate Player
| Thus far you've seen how to use the <object> tag (plus the <embed /> tag) to embed a media player in a web page. The problem is that you've had to make an assumption regarding which player a typical user has at his disposal. By and large, Windows users tend to have Windows Media Player installed, whereas Apple users tend to have QuickTime, RealPlayer, or both installed. One way to help tailor your media pages to fit each user is to attempt to use the appropriate media player based on the user's operating system. One reasonable assumption is to go with Windows Media Player for Windows computers and RealPlayer for everything else (Mac, Linux, and so on). Fortunately, there is a simple line of JavaScript code you can use to make this operating system check. Hour 17, "Web Page Scripting for Nonprogrammers," covers JavaScript and how to use it in your web pages. The following line of JavaScript code checks to see whether the user's operating system is Windows: navigator.appVersion.indexOf("Win")
This line of code is either true or false, and can therefore be placed into a conditional if statement, like this: if (navigator.appVersion.indexOf("Win") != -1) // Play a media file using Windows Media Player else // Play a media file using RealPlayer
You now have the script code necessary to switch between media players. Listing 19.4 uses this code in the context of a page that plays an Amazon.com music sampling using a media player as determined by the user's operating system. Listing 19.4. JavaScript Code Intelligently Chooses between Windows Media Player or RealPlayer to Play an Amazon.com Song Sampling <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Tom Waits on Amazon.com</title> </head> <body> <div style="text-align:center"> <h1>Tom Waits - The Heart of Saturday Night</h1> <p> This song is titled "New Coat of Paint," and appears on the Tom Waits CD, "The Heart of Saturday Night."<br /> This CD is available on Amazon.com via the following link: </p> <p> <iframe src="/books/4/158/1/html/2/http://rcm.amazon.com/e/cm?t=michaelmorris-20&o=1&p=8& l=as1&asins=B000002GXS&fc1=000000&=1&lc1=0000ff&bc1=ffffff&l& #116;1=_top&IS2=1&bg1=ffffff&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="text-align:center"></iframe> </p> <p> <script type="text/javascript"> <!-- Hide the script from old browsers if (navigator.appVersion.indexOf("Win") != -1) document.write("<object classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' width='290' height='65'><param name='type' value='audio/x-ms-wma' /> <param name='URL' value='http://www.amazon.com/exec/obidos/ clipserve/B000002GXS001001/0/104-1401177-1194303' /><param name='uiMode' value='full' /><param name='autoStart' value='true' /><embed width='290' height='65' type='audio/x-ms-wma' src='/books/4/158/1/html/2/http://www.amazon.com/exec/obidos/ clipserve/B000002GXS001001/0/104-1401177-1194303' controls='All' loop='false' autostart='true' pluginspage='http://www.microsoft.com/windows/windowsmedia/' /> </object>"); else document.write("<object classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA' width='290' height='65'><param name='type' value='audio/x-pn-realaudio-plugin' /><param name='src' value='http://www.amazon.com/exec/obidos/clipserve/ B000002GXS001001/1/104-1401177-1194303' /><param name='controls' value='All' /><param name='loop' value='false' /><param name='autostart' value='true' /><param name='prefetch' value='false' /><embed width='290' height='65' type='audio/x-pn-realaudio-plugin' src='/books/4/158/1/html/2/http://www.amazon.com/ exec/obidos/clipserve/B000002GXS001001/1/104-1401177-1194303' controls='All' loop='false' autostart='true' pluginspage='http://www.real.com/player/' /></object>"); // Stop hiding the script --> </script> </p> </div> </body> </html> This code looks a lot messier than it really is. The first bit of messiness comes from a chunk of code that was generated automatically by Amazon.com. I'm referring to the code appearing within the <iframe> tag, which was generated by the Amazon.com Build-A-Link tool at https://associates.amazon.com/gp/associates/network/build-links/main.html. This tool is very handy, and allows you to quickly and easily create links to Amazon.com products. The tool generates HTML code that you can just cut and paste into your web pages. In this case, I used the tool because the audio clip played by the page is a track on a CD that is available on Amazon.com.
The other source of messiness in the Amazon.com music player example is the code that dynamically selects a different media player based on the operating system. The JavaScript code has to generate the HTML code for the appropriate media player, which looks jumbled because all the code must be packed into a continuous run of text. The end result is an embedded media player object, as shown in Figure 19.5. Figure 19.5. The media player in this example was selected and used based on the operating system being Windows, as opposed to some other operating system.
|
EAN: 2147483647
Pages: 345