JavaScript API for SL2VideoPlayer

Oct 13, 2009 at 4:03 PM
Edited Jan 24, 2011 at 5:23 PM

For a recent Hack Day I wrote a quick JavaScript file to add functionality to the SL2VideoPlayer. The JavaScript code is below, in case anybody finds it useful, e.g. as the basis for a JS API.

In my example, I attach some events to the MediaElement to hook our JS code directly into the video player. I then use a JavaScript event handler to hide the controls when the video plays. (By default the controls were only hiding when the mouse moved out of the player area. I was using autostart=true so there was no mouse activity. As a result, the controls weren't being hidden after the video had started to play.) We could easily have done the same thing in the C# code, but sometimes it's nice to have such added flexibility of JavaScript.

Silverlight is so versatile, we can extend and manipulate it with pure JavaScript, without having to write any C# or even touch the project source code. Silverlight gives us really comprehensive extensibility through JavaScript, and of course in other ways too. No wonder I love working with Silverlight so much.


JavaScript file

A very simple JavaScript library for working with the MediaElement in any Silverlight media player:-

SilverlightMedia JavaScript Library


Web page HTML

  • "Player" is the id attribute of the HTML object element you use to embed the Silverlight application. Change this according to your web page.
  • "mediaPlayer" is the x:Name attribute of the XAML mediaElement in SL2VideoPlayer. This is already correct for recent versions of Sl2VideoPlayer.
<body onload="sl2VideoPlayer.setup('Player', 'mediaPlayer');">
 
<object id="Player" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="200" height="150">
	<param name="source" value="/ClientBin/VideoPlayerM.xap" />
	<param name="initParams" value="m=http://www.yourdomain.com/video.wmv" />
</object>

Enjoy!

 

Oct 13, 2009 at 4:32 PM
Edited Oct 13, 2009 at 4:33 PM
  1. Working example 1
  2. Working example 2 (click on any thumbnail to show the video player)

 

Jan 24, 2011 at 5:05 PM

I eventually wrote a nice simple JavaScript library to make it easy to work with the MediaElement in a Silverlight application using pure JavaScript:

http://silverlightmedia.codeplex.com/