My First Silverlight Video Player Application
I always wanted to create my own web-based video player to share vacation videos with relatives and friends back home. But I didn’t have an idea where to start. I initially considered Adobe Flash but it’s not free and I didn’t have a license for it. Of course it is easier to just store the video files in YouTube and it will be immediately accessible to everyone. But I don’t like splitting each video into 10-min segments, 10 minutes being the current maximum length of video clips allowed in YouTube.
Then I came across Silverlight, Microsoft’s cross-browser and cross-platform plug-in for delivering rich interactive applications on the web. I read about it several months ago. And the first thing that came to mind was whether it could be used to create a self-hosted video player for sharing videos on the Internet. Last weekend, I finally had the time to try it out. I visited Silverlight’s web site and looked for some introductory materials to work on. Fortunately, I found a tutorial on how to use Silverlight for video playback. I tried it and it worked!
So here is an outline of my first Silverlight video player application. This is based on the tutorial from Silverlight.net. The brief explanation is based on my understanding of the original tutorial.
The application consists of five files plus the video file. These are:
- default.htm
- my-script.js
- createSilverlight.js
- Silverlight.js
- myxaml.xaml
- myvideo.wmv
default.htm is the HTML file hosting an instance of the Silverlight video player application. Silverlight.js is a JavaScript file included to enable Silverlight contents to be viewed on multiple platforms. This file is included in the Silverlight 1.0 SDK. createSilverlight.js is a JavaScript file containing a single function to create an instance of the Silverlight application. my-script.js is another JavaScript file which contains other JavaScript functions that will be used in the application. myxaml.xaml is a XAML file defining the application’s interface. Finally, myvideo.wmv is the video file you would like to share.
The content of default.htm is shown below.
default.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My First Silverlight Application</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
<script type="text/javascript" src="my-script.js"></script>
</head>
<body>
<!-- Where the Silverlight plug-in will go-->
<div id="mySilverlightPluginHost" align="center">
</div>
<script type="text/javascript">
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
</script>
</body>
</html>
This is just your usual HTML file. Within the <head> tag, a reference to each of the JavaScript file is included so that they will also be retrieved when the page is loaded. Within the <body> tag, a container for the Silverlight application is defined. This is the <div> element with id called mySilverlightPluginHost. This is followed by a <script> block where an instance of the Silverlight application is actually created by calling the createSilverlightPlugin() function. A reference to the <div> element defined earlier is also obtained and assigned to the parentElement variable. This variable is used in the createSilverlightPlugin() function.
The createSilverlight.js file contains the function to create an instance of the Silverlight application. The code is given below.
createSilverlight.js:
function createMySilverlightPlugin() <br>{ <br> Silverlight.createObject( <br> "myxaml.xaml", // Source property value. <br> parentElement, // DOM reference to hosting DIV tag. <br> "mySilverlightPlugin", // Unique plug-in ID value. <br> { // Per-instance properties. <br> width:'300', // Width of rectangular region of <br> // plug-in area in pixels. <br> height:'300', // Height of rectangular region of <br> // plug-in area in pixels. <br> inplaceInstallPrompt:false, // Determines whether to display <br> // in-place install prompt if <br> // invalid version detected. <br> background:'#D6D6D6', // Background color of plug-in. <br> isWindowless:'false', // Determines whether to display plug-in <br> // in Windowless mode. <br> framerate:'24', // MaxFrameRate property value. <br> version:'1.0' // Silverlight version to use. <br> }, <br> { <br> onError:null, // OnError property value -- <br> // event handler function name. <br> onLoad:null // OnLoad property value -- <br> // event handler function name. <br> }, <br> null); // Context value -- event handler function name. <br>}
To create the instance, the function calls the Silverlight.createObject function and passes along some parameters such as the filename of the XAML file (myxaml.xaml) defining the application’s interface, the reference to the hosting <div> tag parentElement, among others. A brief explanation of each parameter is included as a comment. This function creates an instance of the Silverlight application which is 300 x 300 in dimension, with a gray background, etc.
The specification of the application’s interface is given in the myxaml.xaml. For this video application, the code is shown next.
myxaml.xaml:
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="media"
Source="myvideo.wmv" Width="300" Height="300" />
<!-- Stops media playback.-->
<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Red"
Height="30" Width="50" 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>
<!-- Pauses media playback. -->
<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="125" Canvas.Top="265">
<Rectangle Stroke="Orange"
Height="30" Width="50" 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>
<!-- Begins media playback. -->
<Canvas MouseLeftButtonDown="media_begin"
Canvas.Left="180" Canvas.Top="265">
<Rectangle Stroke="Green" RadiusX="5" RadiusY="5"
Height="30" Width="50">
<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>
Every Silverlight XAML file should contain at least one <Canvas> object as the root element. Other objects can then be inserted between the <Canvas> tag. Here, the main <Canvas> contains four objects. The first object is the MediaElement with the Source property set to myvideo.wmv. This object will be used to control the included video’s playback. It is also assigned a name “media” so that it can be referenced in other JavaScript functions. The three other objects define the three buttons for controlling the video playback – stop, pause, and play. These are also <Canvas> objects with rectangles and texts as sub-elements. For these elements to function as buttons, it is necessary to capture mouse button events using the MouseLeftButtonDown property. Depending on which <Canvas> the button is clicked, a corresponding function is called to either stop (media_stop), pause (media_pause), or play (media_begin) the video. The implementation of these functions is in the my-script.js file, which is shown next:
my-script.js:
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();
}
myxaml.xaml and my-script.js define the core video player application. The former provides the interface, while the latter provides the functionality. To control the video playback, the stop(), pause(), and play() functions are called depending on which button is pressed.
This basically covers all the files necessary for this Silverlight video player application. You can save the files into your computer, test the application locally by opening default.htm using your browser, and see for yourself how it works. You can also view this simple Silverlight video application in action here. It’s still very rudimentary but functional. Note that you will also need to install the Silverlight plug-in before you can run the application. Finally, if you want to learn more, you can visit Silverlight’s Quick Start page where some introductory materials about Silverlight can be found.
Hi
This tutorial is fantastic.
I’ve developed a Video Player work with Silverlight 2
http://www.silverlight-blog.it/ontheroad/videoplayer/index.html
Mino