Using Embedded Controls for Streaming Video on a Web Page

What made the Web so exciting in 1995 was the opportunity to merge audio, video, design and interactive components into one Web page. It's true that the implementation has been a bit rocky, but today all these ingredients are finally simmering nicely in a delicious Web gumbo.

This integration is greatly aided by the OBJECT and EMBED tags, which allow you to insert media playback devices right into a Web page. You know how when you click on a link to a movie or sound file movie file it usually launches a separate application and takes you away from the Web page you were looking at? Well, that won't happen if the streaming media playback device is embedded. And nothing will be downloaded to your hard drive. It's a seamless, user friendly way to add audio or video to an HTML document.

Since 1999, we have explored many different methods for streaming digital media over the Internet, from RealAudio to Shockwave to MP3s. Along the way it has been anyone's guess as to which of these formats would be most widely accessible in the future.

Both RealMedia and QuickTime can be embedded into a Web page, but versioning issues with Quicktime reduce the odds of seamless functionality because the user frequently has to download a newer version of the third-party software. QuickTime and RealNetworks have a sizable installed base, Microsoft's Windows Media Player is probably your best bet for the widest possible audience.

At this point you should download version 7.1 of the Windows Media Player (although the code will work for older versions) and install it. If you are preparing the player for Netscape, you will also want to make sure you have ActiveX installed.

This code will work with Microsoft Internet Explorer 4.0+ and Netscape Navigator 4+ on systems that support the Windows Media Player plug-in and ActiveX control. It is not universally workable for every Internet user.

This is an old and persistent problem. Inherent differences in the Windows, Mac, and UNIX operating systems make for a less than universal set of standards. And there are other problems.

To begin with, the Windows Media Player is a Microsoft product. In the race to dominate the desktop market, Microsoft software has not always been designed to be universal, but has been skewed towards the Microsoft OS. Similarly, Netscape has developed its own standards to stream media, and the two don't always play nicely together.

So while not a totally complete or universal solution, streaming media through the Windows Media Player is a pretty good one. Visitors to your site will not need any external player, just a Windows or Unix operating system. However, Macintosh users will still have to download the Windows Media Player in order to view the content. More information about making the player available to Mac users can be found at the Windows Media Player 7 site.

To optimize usability, you should link to the Media Player 7.1 in your HTML document, advise users of system requirements (Microsoft Internet Explorer 4.0+ and Netscape Navigator 4+ with Windows Media Player plug-in and ActiveX control), and you may even wish to recommend that the player be used only with Microsoft Internet Explorer 4.0+.

We'll provide examples of a player that works well with IE, and one that works with both browsers.

Got your MP3 file prepared? Upload it to a publicly accessible Web server, and it's time to stream.

A few simple lines of code will embed the ActiveX controls into your HTML document, and Internet Explorer on Windows will automatically launch the embedded player using this code. It works so well, and it's so easy, you'll be amazed.

Here's the code that you need to add to your HTML to embed the player in your Web page. Copy and paste this code fragment into your HTML document, and then we'll modify it. Note: Some of these lines are truncated to fit on the screen. When you drop this code onto your page, make sure the URLs and longer lines of code appear in one line.

<OBJECT

ID="mediaPlayer"

CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

CODEBASE="http://activex.microsoft.com/activex/
controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

STANDBY="Loading Microsoft Windows Media Player components..."

TYPE="application/x-oleobject">

</OBJECT>

It's important to recognize that the heavy lifting is actually being accomplished by a remote ActiveX applet, called by the CODEBASE parameter in the OBJECT tag.

It's important for two reasons.
One, your development machine needs to be online for testing, because the CODEBASE tag needs to access the Microsoft ActiveX code library to operate.
Two, going forward you need to be aware that the functionality of your player is in part dependent on code that is maintained by a third party, which means you may need to update the URL in the off chance that Microsoft drops the ball somewhere along the line.

Let's take a moment and look at the parameters we're using in the <OBJECT> tag, which are customizable. You can assign a "true" or "false" value to animationatStart, transparentatStart, autoStart, and showControls. These all do pretty much what they sound like, and customizing your player with the <PARAM> tag is part of what makes embedding the Windows Media Player cool, so you should fool around with these options.

Now that the code is in your HTML document, we need to add the URL of your file between the second set of quotation marks in this string:

Reload the page and test the page in Internet Explorer. The audio stream should load and begin playing automatically.

Of course, things are never as simple as they should be, what with Netscape/AOL and Microsoft still locked into a struggle to the death over all things browser and OS.

So we'll need to account for Netscape's method for calling embedded players, the EMBED tag. Here the EMBED tag is contained inside the OBJECT tag, so that the player will also work with Internet Explorer.

We'll also use a video as the example this time in order to hip you to some of the other possibilities of a streaming media player.

Copy and paste this code fragment into your HTML document, and then we'll modify it. Note: Some of these lines are truncated to fit on the screen. When you drop this code onto your page, make sure the URLs and longer lines of code appear in one line.

<OBJECT ID="MediaPlayer1" width=160 height=162

classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/activex/
controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"

standby="Loading Microsoft Windows Media Player components..."

type="application/x-oleobject">

<EMBED type="application/x-mplayer2"

pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"

SRC="yourfilehere.asf"

name="MediaPlayer1"

width=160

height=162

AutoStart=true>

</EMBED>

</OBJECT>

When you've pasted this code in, simply change these two strings to point to your file. <PARAM NAME="FileName" VALUE="yourfilehere.asf"> and SRC="yourfilehere.asf"

Now, test the code in both browsers. This codebase is, I've noticed, variously effective for different versions of Netscape Navigator; some versions will attempt to load Java if ActiveX isn't installed.

Always Test Carefully

For more info on Active X controls click here:

Last Reviewed: 9/15/2006