I spent a couple hours and threw together this simple media player. It show's playing, pausing, stopping, and full-screen. You can see it in action here, with the xaml / javascript (the important parts) bellow. You can download the full source in a Visual Studio project here. Note that you will need to have the Silverlight Community Technology Preview for Windows (Feb 2007) or Silverlight Community Technology Preview for Mac (Feb 2007) to view the sample and the Silverlight Software Development Kit (SDK) Community Technology Preview (Feb 2007) for the Visual Studio project. Enjoy!
Xaml for the player:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="javascript root_Loaded">
<TextBlock Canvas.Left="50" Foreground="White" Text="Click the movie for full screen!" />
<Canvas x:Name="mediaCanvas" Canvas.Left="8" MouseLeftButtonUp="javascript toggle_fullScreen">
<Rectangle Canvas.Top="35" Stroke="#FF8E8E8E" StrokeThickness="2" RadiusX="2" RadiusY="2" Height="230" Width="304" />
<MediaElement x:Name="media" Source="xbox.wmv" Canvas.Left="2" Width="300" Height="300" />
</Canvas>
<Canvas x:Name="buttonPanel">
<Canvas x:Name="playButton" Canvas.Left="20" Canvas.Top="275">
<Rectangle Stroke="#FF8E8E8E" StrokeThickness="2" RadiusX="2" RadiusY="2" Height="23" Width="75">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,2.109" EndPoint="0.5,-1.109">
<GradientStop x:Name="gradientStop1" Color="#FFFF9E00" Offset="1"/>
<GradientStop x:Name="gradientStop2" Color="#FFEAEAEA" Offset="0.218"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="playText" Canvas.Top="3" Canvas.Left="25" FontSize="12" Foreground="#FF5A5A5A" Text="Play" />
</Canvas>
<Canvas x:Name="pauseButton" Canvas.Left="120" Canvas.Top="275" >
<Rectangle Stroke="#FF8E8E8E" StrokeThickness="2" RadiusX="2" RadiusY="2" Height="23" Width="75">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,2.109" EndPoint="0.5,-1.109">
<GradientStop x:Name="gradientStop3" Color="#FFFF9E00" Offset="1"/>
<GradientStop x:Name="gradientStop4" Color="#FFEAEAEA" Offset="0.218"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Top="3" Canvas.Left="22" FontSize="12" Foreground="#FF5A5A5A" Text="Pause" />
</Canvas>
<Canvas x:Name="stopButton" Canvas.Left="220" Canvas.Top="275">
<Rectangle Stroke="#FF8E8E8E" StrokeThickness="2" RadiusX="2" RadiusY="2" Height="23" Width="75">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,2.109" EndPoint="0.5,-1.109">
<GradientStop x:Name="gradientStop5" Color="#FFFF9E00" Offset="1"/>
<GradientStop x:Name="gradientStop6" Color="#FFEAEAEA" Offset="0.218"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Top="3" Canvas.Left="25" FontSize="12" Foreground="#FF5A5A5A" Text="Stop" />
</Canvas>
</Canvas>
</Canvas>
Javascript for the player:
function root_Loaded(sender, args) {
var button = sender.findName("playButton");
button.mouseEnter = "javascript playMouseEnter";
button.mouseLeave = "javascript playMouseLeave";
button.mouseLeftButtonUp = "javascript playMouseUp";
button.mouseLeftButtonDown = "javascript playMouseDown";
...
var wpfeControl = sender.getHost();
wpfeControl.fullScreenChanged = "javascript onFullScreenChanged";
}
// ------------------------------------------------------ //
// play button event handlers
// ------------------------------------------------------ //
function playMouseEnter(sender, eventArgs) {
var gradientStop1 = sender.findName("gradientStop1");
var gradientStop2 = sender.findName("gradientStop2");
gradientStop1.offset = 1;
gradientStop2.offset = .403;
}
function playMouseLeave(sender, eventArgs) {
var gradientStop1 = sender.findName("gradientStop1");
var gradientStop2 = sender.findName("gradientStop2");
gradientStop1.offset = 1;
gradientStop2.offset = .218;
}
function playMouseUp(sender, eventArgs) {
var gradientStop1 = sender.findName("gradientStop1");
var gradientStop2 = sender.findName("gradientStop2");
gradientStop1.offset = 1;
gradientStop2.offset = .403;
sender.findName("media").play();
}
function playMouseDown(sender, eventArgs) {
var gradientStop1 = sender.findName("gradientStop1");
var gradientStop2 = sender.findName("gradientStop2");
gradientStop1.offset = .7;
gradientStop2.offset = .475;
}
// ------------------------------------------------------ //
// pause button event handlers
// ------------------------------------------------------ //
function pauseMouseUp(sender, eventArgs) {
...
sender.findName("media").pause();
}
// ------------------------------------------------------ //
// stop button event handlers
// ------------------------------------------------------ //
function stopMouseUp(sender, eventArgs) {
...
sender.findName("media").stop();
}
// ------------------------------------------------------ //
// fullscreen button event handlers
// ------------------------------------------------------ //
function toggle_fullScreen(sender, eventArgs) {
var wpfeControl = sender.getHost();
wpfeControl.fullScreen = !wpfeControl.fullScreen;
}
function onFullScreenChanged(sender, args) {
var wpfeControl = sender.getHost();
var buttonPanel = sender.findName("buttonPanel");
var width = 300;
var height = 300;
if (wpfeControl.FullScreen == true) {
width = wpfeControl.actualWidth;
height = wpfeControl.actualHeight;
buttonPanel.opacity = 0;
}
else {
buttonPanel.opacity = 1;
}
var mediaPlayer = sender.findName("media");
mediaPlayer.width = width;
mediaPlayer.height = height;
}
P.S. The html editor in community server does not like the javascript tag, so that is why there is a space between the javascript keyword and the functions.