The main feature of Silverlight that I am really excited about is the capability playing back videos. It does mean that we do not have to embed WMP controls on the HTML page anymore, but it will be possible to playback Windows Media Videos with Silverlight only, that means that Silverlight does not rely on WMP for video playback and it will be possible to playback Windows Media videos on other platforms as well. I have not tried this capability on the Mac yet, so I do not know how well the video playback works or does not work. But here is a quick way how to do this:
I am reusing the files from my Silverlight scratch project:
Quick sample for starting with Silverlight The first step is to get a video file and copy to folder, where the .html and .xaml file will be. Right now I am trying to play video only locally. Then you will need to create a new .xaml file (player.xaml), which looks like this:
<Canvas Width="800" Height="800" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="VideoLayer">
<MediaElement x:Name="VideoElement" Canvas.Top="0" Canvas.Left="0" Stretch="Uniform" AutoPlay="True" Source="butterfly.wmv" />
</Canvas>
</Canvas>
In the .xaml snippet we have a Canvas and a MediaElement inside the Canvas. The source attribute is set to butterfly.wmv - this is the name of the video I copied to the same folder with the .html and .xaml files - and the autoplay property set to true, so it will start playing right away.
The next step is to modify the .html file, so it loads the right .xaml file (player.xaml) and change the size, so it can display the whole video.
So it will look like this:
<script type="text/javascript">
function createMySilverlightControl()
{
Sys.Silverlight.createObject(
"player.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"mySilverlightControl", // Unique control ID value.
{ // Control properties.
width:'720', // Width of rectangular region of
// control in pixels.
height:'480', // Height of rectangular region of
// control in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#D6D6D6', // Background color of control.
isWindowless:'false', // Determines whether to display control
// in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'0.9' // Control version to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler function name.
}
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightControlHost");
// This function creates the Silverlight control.
createMySilverlightControl();
</script>
Now the only thing is left to launch the html page and enjoy the video.