Embedding the Controls

In Column 51, A Streaming Media JukeBox, we showed you two ways to play a streaming media file. The first one is through an external Media Player. If you haven't install it yet on your computer, this link will connect you immediately to the download area:

To invoke the external Media Player, just place a link to an ASF or ASX file in your Web page. To see a live demo of a streaming media, try this Media Player Introduction. The minimum modem baud rate should be 28.8K. The video stream will look more like still pictures with lower-rate communication link. Also, make sure you are not connected via a proxy server.

The second method to play a streaming media is to embed the Media Player in the Web page as an ActiveX control for Internet Explorer and as a plugin for Netscape Navigator. When using the above download link, the Microsoft server will identify your operating system and will download both the Media Player ActiveX control as well as its Plugin, either one or both, whatever is playable on your computer.

The HTML tag that embeds the Media Player's ActiveX control is the <OBJECT> tag. The Plugin is embedded within the <OBJECT> tag. Here is how we use these tags in our jukebox:

<SCRIPT LANGUAGE="JavaScript">
with (document) {
  writeln('<OBJECT');
  writeln('  ID="mediaPlayer"');
  writeln('  CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"');
  writeln(
 'CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/
   nsmp2inf.cab#Version=5,1,52,701"');
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
  writeln('  STANDBY="Loading Microsoft Windows Media Player components..."');
  writeln('  TYPE="application/x-oleobject">');
  writeln('<PARAM NAME="fileName" VALUE="http://msdn.microsoft.com/downloads
   /samples/Internet/imedia/netshow/smedia/NS3/JavaScript/
   Buttons/control.asx">');
  // (The three lines above should be joined as one line.
  // They have been split for formatting purposes.)
  writeln('<PARAM NAME="animationatStart" VALUE="true">');
  writeln('<PARAM NAME="transparentatStart" VALUE="true">');
  writeln('<PARAM NAME="autoStart" VALUE="true">');
  writeln('<PARAM NAME="showControls" VALUE="true">');
  writeln('<EMBED TYPE="application/x-mplayer2"');
  writeln('  PLUGINSPAGE="http://microsoft.com/windows/mediaplayer/
    en/download/"');
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
  writeln('  ID=mediaPlayer');
  writeln('  NAME="mediaPlayer"');
  writeln('  DISPLAYSIZE="4"');		// Fit To Size
  writeln('  AUTOSIZE="-1"');
  writeln('  BGCOLOR="darkblue"');
  writeln('  SHOWCONTROLS="-1" ');
  writeln('  SHOWTRACKER="-1"');
  writeln('  SHOWDISPLAY="0"');
  writeln('  SHOWSTATUSBAR="-1"');
  writeln('  VIDEOBORDER3D="-1"');
  writeln('  WIDTH=320');
  writeln('  HEIGHT=313');
  writeln('SRC="http://msdn.microsoft.com/downloads/samples/Internet/imedia/
    netshow/smedia/NS3/JavaScript/Buttons/control.asx"')
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
  writeln('  AUTOSTART="-1" ');
  writeln('  DESIGNTIMESP="5311"');
  writeln('  >');
  writeln('</EMBED>');
  writeln('</OBJECT><P>');
  writeln('<FORM NAME="playerCtrl">');
  writeln('<SELECT NAME="streams" onChange="change()">');
  for (var i = 0; i < streams.length; i++) {
    writeln('  <OPTION VALUE="', streams[i].url, '">', streams[i].name);
  }
  writeln('</SELECT>');
  writeln('</FORM>');
}
</SCRIPT>

We have shown here a sample of attributes supported by each tag. More are listed in our previous installments, Column 51 and Column 52. You can figure out the comprehensive list of attributes from this and next installments of our Media Streaming series. The name of an attribute is identical to the name of the corresponding property in Internet Explorer.