Detecting Streaming Media Players and Connection Speed Tutorial

Wouldn't we all love a world in which all streaming video content could be played with any streaming video player? Sure ... just like any browser can render any HTML page, right? Unfortunately, the reality we deal with is one in which the three major streaming media systems are largely incompatible with each other. What's more, your users will be using a variety of operating systems, browsers, media players, and types of internet connections. One solution to this problem is to choose a single streaming format to support. This can be a good option if you can control the configuration of your viewers' computers, as in many corporate or educational settings. If you can do this, it certainly is a very cost-effective approach.

But if you're like many of us, you'll need to support multiple streaming media formats to make your content easily available to as many users as possible. Well, roll up your sleeves, because we're going to get our hands dirty with some code that will let you determine which players your users have installed, and what bandwidth they have available on their Internet connection to stream your content.  For simplicity, we’ll set this information in a cookie.  In a real-world implementation, you could display a form to let users choose which of their players they'd like to use to view your content, or you could read the cookie on the server-side and select the streaming format most appropriate for their configuration. 

There are two major approaches required for determining which media players (or other plugins) a user has installed: one for browsers that use plugins and another for browsers that use ActiveX controls.  

Browsers that use plugins: Opera, Mozilla, Netscape Navigator/Communicator, IE on Macintosh, and any browser not on Windows

Browsers that use ActiveX: IE on Windows

Let's walk through the client-side code that lets us deal with each of these possibilities. First we'll look at detecting plugins. Listing 1 shows a fragment of JavaScript code that you can place in your HTML page. Browsers store information about the installed plugins in an array of plugin objects that's accessible from JavaScript. First, on Line 19, we double check to see that we are not on IE on Windows. Then, starting on line 22, we begin to check the name of each of the plugins in our plugins array. You'll notice that we have to know exactly what the plugins are named in order to detect them. You can see these by typing "about:plugins" in the Location field of your browser. If we find a match for any plugin, we add a short name for it to our 'playerString' variable (lines 27, 31 and 35).

Once you've checked all the plugins, you'll want to store the results somewhere useful. This is what cookies are made for — storing small bits of data on a user's computer for future use. A cookie is saved with the host site's domain name, so only the site that originated the cookie can read it. This means no other sites can take advantage of the information you're storing here — it's just between you and your user.

So, line 38 calls the setCookie() function, storing the playerString in a cookie named "MediaPlayers." If you don't provide an expiration date for your cookie, it will go away when the user closes the browser. Here, we've arbitrarily chosen to set our cookie to expire in 365 days. If you have all three major media players installed, your playerString will look something like this: "REAL,QT,QT,QT,WMP."  Try it!

We don't care about the order of the names here. Yours may vary, depending on the order in which your browser loaded its plugins.  You may also notice that if you use Internet Explorer 5.5 SP2 or 6.x on Windows, you may not see the QuickTime control listed, even though you know you have QuickTime installed.  Microsoft recently discontinued support for browser plugins in these products, in favor of their own proprietary ActiveX control architecture.  If you use one of these browsers, or if you've recently updated IE5.5, Apple's QuickTime plugin no longer functions.  To circumvent this change, Apple has released an ActiveX version of the QuickTime player available at http://quicktime.apple.com

The next block of code in Listing 1 lets you do the same thing for users of IE on Windows.  Since this is written in VBScript, other browsers will simply ignore this code.  Here on lines 49 through 51 we try to create ActiveX instances of each player using VBScript. We simply check to see if each attempt was successful. The same JavaScript functions we used for the plugin example set the cookie value.

Next Page: Bandwidth Detection