One of the coolest Silverlight features is the ease with which you can use media on your web site. There are numerous quickstarts, tutorials, videos, and webcasts to show you how easy you can build your own video player. The power of Silverlight can be released with a little XAML, and here is one of the simplest XAML video players around:
<MediaElement xmlns="http://schemas.microsoft.com/client/2007"
Source="http://www.businessanyplace.net/chris/slintro.wmv"/>
You need a Silverlight control on your page to make it work, but it works. If you have .NET Framework 3.0 installed, you can change the namespace to...
<MediaElement xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Source="http://www.businessanyplace.net/chris/slintro.wmv"/>
...place it in a file (e.g. videoplayer.xaml), and then you can open it file in Internet Explorer. That's already cool, but let's get back to how to use it with Silverlight.
In a minimal approach, there is only one file that you need to put up on your web site, it's called silverlight.js and comes with the Silverlight SDK. It basically takes care of creating the actual Silverlight plugin on the web page (with support for PC or Mac and the most common browsers). Put this file in a script directory (e.g. "js" below you web page root).
With that file in place, you are ready to create your first web page that include video playback, and it can look like this...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Video Player</title>
<script type="text/javascript" src="js/Silverlight.js"></script>
</head>
<body>
<p>Here's some text, and here comes the video...</p>
<script type="text/xaml" id="firstXaml"><?xml version="1.0"?>
<MediaElement xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Source="http://www.businessanyplace.net/chris/slintro.wmv" x:Name="Video"
AutoPlay="false" MouseLeftButtonDown="onVideoMouseDown"
MediaEnded="onVideoMediaEnded"/>
</script>
<div style="width: 208; height: 160;" id="firstHost">
<script type="text/javascript">
Silverlight.createObjectEx({
source: "#firstXaml",
parentElement: document.getElementById("firstHost"),
id: "firstPlugIn",
properties: {
width: "100%",
height: "100%",
version: "1.0",
inplaceInstallPrompt:true,
background: "white",
isWindowless: false
},
events: {}
});
function onVideoMouseDown(sender, eventArgs)
{
if(sender.CurrentState != "Playing")
sender.Play();
else
sender.Pause();
}
function onVideoMediaEnded(sender, eventArgs)
{
sender.stop();
}
</script>
</div>
<p>...and some more text!</p>
</body>
</html>
...and note how I reference the script file mentioned above. The actual XAML is located in the firstXaml script tag, and you can see that I've added some attributes like a name (required by the event functions), event handlers, etc. Then I just call the Silverlight.createObjectEx method with the name of the XAML (script) tag, the script (div) host, and the name of this instance of the plugin. I have also added two methods to support the video playback by allowing the click of the mouse on the video player to play and pause, and to automatic rewind of the video when it's done. Note that there's nothing preventing me from adding various videos on the same page as long as I give all parts unique names.
Using this approach I have included the cool intro video from the REMIX 2007 event (click below to play/pause the video).