Ok here's where I'm at that works:
HTML (note that I'm using two .xaml files for each player:
The two .xaml files are identical except for the MediaElement source. hihglighted in red: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 contents of createSilverlight.js (note that Silverlight.js is standard MS file for silverlight plug-in):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 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.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; }
------------------------------------------------
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:
And add this function to createSilverlight.js:Code:<MediaElement x:Name="media" Loaded="media_loaded" Width="300" Height="300" />
It still works but both players have the same video playing. I can still control them independentlyCode:function media_loaded(sender, args) { sender.findName("media").source = sourcevideo; }
------------------------------------------------------------------------------
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?
Try StreamFab Downloader and download from Netflix, Amazon, Youtube! Or Try DVDFab and copy Blu-rays!
+ Reply to Thread
Results 1 to 1 of 1
Thread
Similar Threads
-
Playing Multiple DVD Players on a PC?
By Tchail in forum Software PlayingReplies: 9Last Post: 28th Dec 2011, 13:59 -
How to add volume levelling for multiple software players?
By Rudyard in forum ComputerReplies: 0Last Post: 9th Dec 2011, 19:53 -
How can I capture silverlight streams
By RMWolfe in forum Newbie / General discussionsReplies: 1Last Post: 21st Aug 2011, 23:00 -
Silverlight content not seen
By Gyongyi in forum Software PlayingReplies: 3Last Post: 26th Mar 2011, 08:30 -
Microsoft Silverlight
By JaredKnight in forum Software PlayingReplies: 7Last Post: 26th Aug 2008, 18:31