Streaming Media Bible - Streaming Magazine Column

Streaming Magazine Column - May 2003


	Table of Contents

	Chapter Excerpt

	Updates

	Order the Book

	Resources

	Tips & Tricks

	Streaming Magazine Column

	Feedback

	Author

	Home

Getting Fancy, Part II:Detecting Browser Version and Platform

Last month we opened up Pandora's Box when we decided to embed a streaming media player in a browser window. Embedding a streaming media player can make your presentation look slick, but it can be a frustrating authoring experience if you're trying to support the widest possible audience.

When authoring pages with an embedded QuickTime player or RealPlayer, you can include the code for both the Netscape Plug-in and the Internet Explorer ActiveX control. Browsers render code they recognize, and ignore code they can't, so this approach generally works. However, the Windows Media Player is different for a number of reasons:

Windows Media discontinued support for the Netscape plug-in with the 7.0 player, though you can still embed a 6.4 player
The 6.4 plug-in doesn't work on newer Netscape browsers (NS6+)
IE on Mac uses the Netscape plug-in
Windows Media now offers a Java Applet for 9 Series support on Netscape browsers, but this obviously requires the 9 Series player

We're faced with an array of embedded player options, summarized in the table below.

Player\Browser Pre-Netscape 6.x Netscape 6.x+ IE on Mac IE on Win

WMP 6.4 Yes No Yes Yes

WMP 7.0/8.0 No (use 6.4) No No (use 6.4) Yes

WMP 9 series No (use 6.4) Yes (using Java Applet) Yes (using Java Applet) Yes

To be clear, this is only a problem if you want to support the widest possible audience. Authoring your presentation for IE users on Windows caters to the majority, but assuming you don't want to leave Mac and or Unix users in the dark, you're going to have to do some sleuthing to find out the platform and browser so you can use the appropriate code, or notify the user that they need additional software.

There are a number of ways to go about doing this, but in general you'll use JavaScript to test the properties of the browser. You can then embed the appropriate player based on the information the JavaScript reveals.

Polling a Browser Using JavaScript

Browsers store information about themselves in a variable that you can access via JavaScript. For instance, to test for IE, use the following code:

if (navigator.appName == "Microsoft Internet Explorer")

To find out the operating system, test another navigator property:

if (navigator.Platform == "Win32")

Detecting a browser version involves extracting it from the appVersion property as follows:

parseFloat(navigator.appVersion)

Putting this all together, you could write a JavaScript function that used the right code in virtually every situation. The code for the appropriate embedded player is omitted here, but the JavaScript testing would look like this:

function whichWMP () {
	if (navigator.appName == "Microsoft Internet Explorer") {
		if (navigator.Platform == "Win32") {
			\\ IE on Windows
			}
		else {
			\\ Mac OS
		}
	}
	else { 
		if (parseFloat(navigator.appVersion) >= 6) {
			\\ Netscape 6+
		}
		else {
			\\ Older Netscape
		}
	}
}

This function could be called as the page was loading, and the embedded player code could be written out accordingly. You can do all sorts of other things with JavaScript, such as allowing users to set a favorite media player. There are many JavaScript resources out there - I've listed a couple to get you started.

MSDN for embedding WMP for Mac IE

Detecting Streaming Media Players and Connection Speed Tutorial:

Next Month: Authoring - Using the Windows Media 9 Series Java Applet