Click here to Skip to main content
13,087,902 members (76,104 online)
Click here to Skip to main content
Add your own
alternative version


26 bookmarked
Posted 14 May 2008

Running Video in Silverlight Site using Expression Blend

, 14 May 2008
Rate this:
Please Sign up or sign in to vote.
Running video in Silverlight site using Expression Blend


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.


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.

Silverlight.createDelegate(this, this.playpause)); 
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.

var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Wave");
var play=sender.findname("Play");
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Wave");

So finally, it becomes:


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


  • 15th May, 2008: Initial post


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


About the Author

Praveen Chandran
Technical Lead Infosys Limited
India India
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralShowing Source Code Pin
John Simmons / outlaw programmer14-May-08 23:10
mvpJohn Simmons / outlaw programmer14-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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170813.1 | Last Updated 15 May 2008
Article Copyright 2008 by Praveen Chandran
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid