Running Video in Silverlight Site using Expression Blend

• Download source - 1.97 MB

Introduction

This article is useful for those beginning to develop a Silverlight site using Expression Blend. Here, I have developed one simple Silverlight site for beginners. Here one video is playing with play, pause and stop facility.

Background

Those working in Expression Blend can follow this article very easily.

Using the Code

Step 1

Create a new SilverLightsite project, named SilverlightSiteVideo.

In the Project window, you can see four files.

• Default.html
• Page.xaml
• Page.xaml.js
• Silverlight.js

In Page.xaml, we are going to put the controls and we write the JavaScript code in Page.xaml.js file.

Step 2

• Place a MediaElement in Page.xaml [Click on the asset library and check the “Show All” and select MediaElement control and place in Page.xaml.]
• Change the name to ‘Wave” in the properties window. [In XAML, x:Name=”Wave”]
• Select the source of the MediaElement under Media to the WMA file.
• Now that WMA file is copied into our project automatically, switch to XAML view of Page.xaml.
• And in the MediaElement, add the attribute AutoPlay=”false”.

Now the page looks like this:

Step 3

• Place two TextBlocks.
• Click on the first textblock.
• Take Properties.
• At the top, type “Play” as the Name.
• Under Common Properties. Change the Text to “Play”.
• Do this for the next textblock. Name and Text will be “Stop”.

Now the page looks like this:

And the total view becomes:

Step 4

Write JavaScript code for Play and Stop button in Page.xaml.js:

Take Page.xaml.js. It will look like this:

Here rootElement is the canvas.

Next, we have to find the play and stop buttons. The code for this is:

var playbutton = rootElement.children.getItem(1);
var stopbutton = rootElement.children.getItem(2); 

Here the rootElement is the canvas. In the canvas, we placed two textblocks (play and stop).

The next step is to add the event handler for play & stop control.

playbutton.addEventListener("MouseLeftButtonDown", 
Silverlight.createDelegate(this, this.playpause)); 

stopbutton.addEventListener("MouseLeftButtonDown", 
Silverlight.createDelegate(this, this.stop)); 

Here we added MouseLeftButtonDown event to both play and stop control.

Here this.playpause is the function to be invoked.

And also, this.stop is the function to be invoked for stop button.

The next step is to implement the playpause and stop function.

playpause:function(sender,eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Wave");
if(sender.Text=="Play")
{
theMedia.Play();
sender.Text="Pause";
}
else
{
theMedia.Pause();
sender.Text="Play";
}
},
stop:function(sender,eventArgs)
{
var play=sender.findname("Play");
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Wave");
theMedia.Stop();
play.Text="Play";
} 

So finally, it becomes:

Please note that I put a comma after the handleMouseDown function.

History

• 15^th May, 2008: Initial post