|
|
|
 |
Magazine |
| | Community |
| | Workshop |
| | Tools & Samples |
| | Training |
| | Site Info |
 |
 |
||||||||
 |
Samples
|
||||||||
NetShow ServicesWindows Media Logo Usage |
||||
 |
Download sample |  |
Demo | |
Description
GOAL: To properly incorporate the Windows Media logo into a Web page. The two examples we've provided illustrate how to use the Windows Media logo with
Note: The Windows Media logo, usage guidelines, and a usage agreement is available from the Member Community area. See the Windows Media Technology Branding and Logos page for a definition of terms and overview of logos.In this first example, we are using the Windows Media logo in combination with a simple HTML link, to launch the Windows Media Player as a stand-alone application. This is an example of an HREF link to an ASX file, which will launch the Windows Media Player:
<A HREF="28.asx">Place text or image here.</A>
This code is used to embed the Windows Media logo in the Web page:
<img src="sample.gif" border=0 alt="Windows Media Player GIF Image">
In this second example, we are using the Windows Media logo in combination with an embedded version of the Windows Media control. You will need to follow the five steps below to embed the player in your Web page.
Step 1. Enable the Windows Media Player to run more smoothly with Netscape Navigator
Add this code between the </HEAD> and <BODY> tags:
<script language="JavaScript">
<!-- if ( navigator.appName == "Netscape" ) {
navigator.plugins.refresh();
document.write("\x3C" + "applet MAYSCRIPT
Code=NPDS.npDSEvtObsProxy.class" )
document.writeln("width=5 height=5 name=appObs\x3E \x3C/applet\x3E")
} //-->
</script>
The code above performs two functions that are important when using Netscape Navigator. First, it ensures that the plug-ins are installed and updated in the browser. Second, it enables the plug-in to send and receive script events from the Web page.
Step 2. Embed the Windows Media Player via the ActiveX control and plug-inAdd this code to your Web page between the <BODY> and </BODY> tags:
<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"
width=120 height=90
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject" background="top.jpg">
<PARAM NAME="FileName" VALUE="">
<PARAM NAME="TransparentAtStart" Value="true">
<PARAM NAME="AutoStart" Value="true">
<PARAM NAME="AnimationatStart" Value="false">
<PARAM NAME="ShowControls" Value="false">
<Embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
src="keister.asf"
Name=MediaPlayer
ShowControls=0
ShowDisplay=0
ShowStatusBar=0
TransparentatStart=O
AutoStart=0
Width=120
Height=90
>
</embed>
</OBJECT>
This control includes the code for embedding the control in Internet Explorer pages, as
well as in Netscape using the Netscape plug-in that ships with Windows Media Player. We
have also included the codebase parameter so that if a user doesn't yet have
Windows Media Player installed, the code will go out and automatically install it (or
upgrade to the most current version of the player). Keep in mind that using codebase
has two risks. First, it works only on Internet Explorer Win32-based (Windows 95 and
Windows NT) browsers, so users on other platforms won't have access to the Windows Media
Players for Windows 3.1, Windows NT 3.51, Macintosh, and UNIX as they would if they were
linked to the Windows
Media Player download page 
. To make all players available to users, we recommend that you use an HREF link that will launch a
stand-alone version of the player outside the HTML page.
Advanced Web developers can customize the Windows Media Player control through parameters. Here is a brief summary of the parameters you can use in the NetShow Services control:
| Parameter | Value | Description |
|---|---|---|
| Filename | Specifies the location and
name of the ASF file to be played. Syntax for locations:
Note: It's usually a good idea to link to ASX files wherever possible so that you can use protocol rollover features in NetShow Services to specify alternative locations, protocols, or servers if playback fails. |
|
| ShowControls | 0 1 |
No controls Full controls |
| AutoStart | TRUE FALSE |
Starts ASF when page opens. Doesn't start ASF when page opens. |
| TransparentAtStart | TRUE FALSE |
Makes the player
transparent at the start of play. Doesn't make the player transparent. (Note: Default is FALSE; TransparentAtStart takes precedence over AnimationAtStart.) |
| AnimationAtStart | TRUE FALSE |
NetShow Services animation
plays at beginning of ASF NetShow Services animation doesn't play at the beginning of ASF (Note: Default is true; ignored if TransparentAtStart is true.) |
Step 3. Create the buttons and control bar
Add this code between the <BODY> and </BODY> tags:
<Table> <TR> <TD></a><img src="part1.jpg" border=0></TD> <TD> <a href="#top" name="button1" border=0 onClick="sniffandload(56)"> <img src="part2.jpg" border=0 ></a> </TD> <TD> <a href="#top" name="button2" border=0 onClick="sniffandload(28)"> <img src="part3.jpg" border=0 ></a> </TD> </TR> </Table>
This code is composed of three separate images placed side by side, creating the illusion of one image. The first image is the logo, the second image is the 56 Kbps button, and the third image is the 28 Kbps button. The second and third images are HREF links. The OnClick event for these links will take the user to the sniffandload JavaScript function.
Step 4. Load the embedded player with a new ASF file
Add this code after the </BODY> and before the </HTML> tags:
<script language="JavaScript" >
function sniffandload (connectionspeed) {
if (navigator.appName == "Microsoft Internet Explorer") {
MediaPlayer.Filename= connectionspeed + '.asf'; MediaPlayer.Play()}
else if (navigator.appName == "Netscape") {
document.MediaPlayer.Open(connectionspeed+ '.asf' );
setTimeout ("document.MediaPlayer.Play()",3000) }
else {
alert (" Windows Media Player did not load.
Use the link underneath the player.") }
}
</script>
This code does two things. First, it detects the browser that the viewer is using (Microsoft Internet Explorer or Netscape Navigator). The code uses this information to decide which piece of code it will run next. If the viewer is using Netscape, it loads a new file into the plug-in located between the <embed> and </embed> tags. It gives the plug-in three seconds to load the file, and then it tells the plug-in to begin playing the new file. If the viewer is using Internet Explorer, the ActiveX control loads the new file and then begins to play the file immediately.
Step 5. Final touches
The final step in this process is to put the table containing your control bar images, including the Windows Media Player logo, under the embedded Windows Media Player. You should use a <TABLE> tag to align these two objects. If you use the TransparentAtStart parameter in your ActiveX control, you will be able to see through the player to the background underneath. Add a background image to the table that the user will be able to see before the Windows Media Player starts. The demo uses an image called top.jpg. Remember to resize your ASF file so that it will fit correctly in the top cell of the table. It is a good idea to create your ASF for the exact size that it will appear in the embedded player.
Additionally, we added a link that will launch the stand-alone player underneath the embedded player. This link is important because some older browsers may not be able to access the <OBJECT> and the <EMBED> tags, and some users may prefer to launch an instance of the stand-alone player so they can continue to use the browser to access Web pages. This link ensures that the user can still receive the media even if they have to receive it in the Windows Media Player running as an outside application. You cannot use script events if the player is launched externally. This can be a big disadvantage in many scenarios.