Click here to Skip to main content
Click here to Skip to main content
Go to top

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

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:

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:

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)

Share

About the Author

Praveen Chandran
Technical Lead Infosys Limited
India India
No Biography provided

Comments and Discussions

 
GeneralShowing Source Code PinmvpJohn Simmons / outlaw programmer14-May-08 23:10 

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

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

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