Silverlight is Microsoft’s next generation rich media platform for the Web. Using Silverlight you can deliver Rich Interactive Applications (RIA) to any platform like Linux, Windows, Mac and more. In this post I will explain how to make a simple video player for Silverlight 1.0 using Microsoft Expression Blend 2.
What tools do you need?
- Basically you only need a text editor like Notepad, but to make it more user friendly you use Microsoft Expression Blend 2. You can download Blend and test it for free the first 60 days.
- The Silverlight Add-in for your web browser.
- A movie to use for this demo.
Let’s make the video player
Start Microsoft Expression Blend 2 and create a new Silverlight 1.0 Application (JavaScript) and give it the name VideoPlayer.
This will create a new Silverlight project and a canvas. We use this canvas to draw or movie and controls on. We need a movie for or video player to play, so we will add one to ore project. Use the dropdown menu of the project to add an existing item and browse for your movie. The movie I used is called demo.wmv, we need this movie name later for the stop and play controls.
Now that you added the movie to the project you can drag and drop the movie form the tree onto the canvas. The canvas is the white rectangle in the middle of Blend. Probably the movie dimensions are too big or too small to fit on the canvas, we will fix this in the XAML of ore page. You can switch to the XAML code using the view tables on the right of the canvas.
In the XAML code we remove, from the MediaElement, the Canvas.Left and Canvas.Right properties so the movie will be in the left upper corner of the canvas. We also need to change is the width and height of ore movie to fit on the canvas. Change the size of the MediaElement to width 640 and height 480 or any size you like.
Lets test the new video player, hit F5 on your keyboard or use the dropdown menu; Project > Test Solution. A new Internet Explorer window will start, showing the new video player and the movie.
But this is not a video player! We need controls to play or stop the movie. Quit Internet Explorer and go back to Blend. Switch to Design mode using the tabs on the right.
Adding controls and functionality
To make it simple we only add a Start and Stop control for our video player. To do this we need two TextBlock controls. Add two TextBlock elements to the canvas and give the TextBlocks a nice place and a name, something like StartButton and StopButton. We also change the movie settings, so it will not start auto playing. Add AutoPlay=”False” to the MediaElement.
Now that we have two controls and the movie is not auto playing any more, we need to add functionality to our controls. If the user clicks on the controls noting will happen. We need to add the event MouseLeftButtonDown.
To handle the events we add to the file Page.xaml.js the following code:
Now we have a simple video player. Test your video player and add more functionality. Let me know what you have done.
