Ok here's where I'm at that works:

HTML (note that I'm using two .xaml files for each player:

Code:
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>A Sample HTML page</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="createSilverlight.js"></script>
  </head>
  <body>

    
    <div id="cbgbHost">
    </div>
    <script type="text/javascript">
        
        // This function creates the Silverlight plug-in.
        createSilverlight("videoplayercbgb.xaml", "cbgbHost", "cbgb");
        
    </script>
	
    
    <div id="testHost">
    </div>
    <script type="text/javascript">
        
        // This function creates the Silverlight plug-in.
        createSilverlight("videoplayertest.xaml", "testHost", "test");
        
    </script>
	

  </body>
</html>
The two .xaml files are identical except for the MediaElement source. hihglighted in red:
Code:
<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Loaded="canvas_loaded">
    
  <MediaElement x:Name="media" 
     Source="cbgb.wmv or test.wmv"
     Width="300" Height="300" />
     
  <Canvas x:Name="buttonPanel">
  
        
    <Canvas MouseLeftButtonDown="media_stop" 
       Canvas.Left="10" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Orange" Offset="0.0" />
            <GradientStop Color="Red" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
    </Canvas>
  
    
    <Canvas MouseLeftButtonDown="media_pause" 
       Canvas.Left="70" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Orange" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
    </Canvas>
  
    
    <Canvas MouseLeftButtonDown="media_begin" 
       Canvas.Left="130" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="55">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="LimeGreen" Offset="0.0" />
            <GradientStop Color="Green" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
    </Canvas>
  
    
    <Canvas MouseLeftButtonDown="toggle_fullScreen" 
      Canvas.Left="190" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="85">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Gray" Offset="0.0" />
            <GradientStop Color="Black" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5"
        Foreground="White" >full screen</TextBlock> 
    </Canvas>  
  
  </Canvas>
     
</Canvas>
The contents of createSilverlight.js (note that Silverlight.js is standard MS file for silverlight plug-in):
Code:
function createSilverlight(source, parentElement, id)
{  
    Silverlight.createObjectEx({
        source:source,          // Source property value.
        parentElement:document.getElementById(parentElement),    // DOM reference to hosting DIV tag.
        id:id,                  // Unique plug-in ID value.
        properties:{                    // Plug-in properties.
            width:'300',               // Width of rectangular region of plug-in, in pixels.
            height:'300',               // Height of rectangular region of plug-in, in pixels.
            inplaceInstallPrompt:false, // Determines whether to display in-place install prompt if invalid version is detected.
            background:'white',         // Background color of plug-in.
            isWindowless:'false',       // Determines whether to display plug-in in windowless mode.
            framerate:'24',             // MaxFrameRate property value.
            version:'1.0'},             // Silverlight version.
        events:{
            onError:null,               // OnError property value -- event-handler function name.
            onLoad:null},               // OnLoad property value -- event-handler function name.
        initParams:null,                // initParams property value -- user-settable string for information passing.
        context:null});                 // Context value -- passed to Silverlight.js onLoad event handlers.
}


function media_stop(sender, args) {

    sender.findName("media").stop();
}

function media_pause(sender, args) {
    
    sender.findName("media").pause();
}

function media_begin(sender, args) {

    sender.findName("media").play();
}

function canvas_loaded(sender, args)
{
    
    var plugin = sender.getHost();
    plugin.content.onfullScreenChange = onFullScreenChanged;
	
   
}

function toggle_fullScreen(sender, args)
{
    var silverlightPlugin = sender.getHost();
    silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;  
   
}

function onFullScreenChanged(sender, args)
{

  
    var silverlightPlugin = sender.getHost();
    var buttonPanel = sender.findName("buttonPanel");
    
    if (silverlightPlugin.content.fullScreen == true)
    {
      buttonPanel.opacity = 0;
    }
    else 
    {
      buttonPanel.opacity = 1;
    }
    
    var mediaPlayer = sender.findName("media");
    mediaPlayer.width = silverlightPlugin.content.actualWidth;
    mediaPlayer.height = silverlightPlugin.content.actualHeight;
     

}
The above combination will work for two players on the same page but they require that I have two seperate hardcoded .xaml files. What I want to do is set the source in HTML file so the .js file and the .xaml file are standalone.




------------------------------------------------





Everything that I've tried and both players will play the same video for example if I add a var to the script in the HTML and and set the xaml file to same file:

Code:
    
    <div id="cbgbHost">
    </div>
    <script type="text/javascript">
        var sourcevideo = "cbgb.wmv";
        // This function creates the Silverlight plug-in.
        createSilverlight("videoplayer.xaml", "cbgbHost", "cbgb");
        
    </script>
	
    
    <div id="testHost">
    </div>
    <script type="text/javascript">
        var sourcevideo = "test.wmv";
        // This function creates the Silverlight plug-in.
        createSilverlight("videoplayer.xaml", "testHost", "test");
        
    </script>

Change the MediaElement in the .xaml file to this:

Code:
  <MediaElement x:Name="media" 
     Loaded="media_loaded"
     Width="300" Height="300" />
And add this function to createSilverlight.js:
Code:
function media_loaded(sender, args) {

    sender.findName("media").source = sourcevideo;
}
It still works but both players have the same video playing. I can still control them independently

------------------------------------------------------------------------------

I need to be able to have multiple players on the same page and creating multiple hardcoded .xaml files is out of the question. I can do it dynamically with php but there must be some way to avoid it so i can just set the source in the HTML. I'm assuming i need to reference the correct host in the function above but my JS knowledge is lacking and I can't find any examples anywhere.

Anyone have any ideas?