Click here to Skip to main content
15,867,686 members
Articles / Web Development / XHTML

Running Video in Silverlight Site using Expression Blend

Rate me:
Please Sign up or sign in to vote.
4.00/5 (3 votes)
14 May 2008CPOL2 min read 33.9K   341   26   1
Running video in Silverlight site using Expression Blend

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.

1.JPG

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:

2.JPG

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:

3.JPG

And the total view becomes:

4.JPG

Step 4

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

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

5.JPG

Here rootElement is the canvas.

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

C#
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.

C#
playbutton.addEventListener("MouseLeftButtonDown", 
Silverlight.createDelegate(this, this.playpause)); 
C#
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.

C#
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:

6.JPG

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

History

  • 15th May, 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Infosys Limited
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralShowing Source Code Pin
#realJSOP14-May-08 23:10
mve#realJSOP14-May-08 23:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.