Page 1 of 1

Silverlight 4: A Simple Video Player

#1 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 256
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Posted 11 November 2010 - 10:35 AM

First off, This is my first tutorial, and it is to teach you how to make a very simple video player in silverlight 4! but you will need the following;

- Visual Studio 2010
- Silverlight SDK 4 for Visual Studio 2010


Some Quick notes here too; I have uploaded some resources for you to add into your project as sample materials, Included is a video and three images for the pause, play and stop buttons.

Link: http://www.plainengl...ad/tutorial.zip
This website is safe, It is my own personal one! The file is about 5MB

Who made what?: I personally made the three images and the video is downloaded from this website which is an example .wmv file: http://www.jhepple.c...ple_movies1.htm

Ok, Once you have that lets make the project, We want to make a Silverlight Application and after naming your project, on the next dialogue select Silverlight 4 from the combo box.

The Pre-created code for our project should look like this:
<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>



However, We don't need all those links, We only need a couple they are
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"



So you can delete the others, Once you have your code should look like this:
<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid x:Name="LayoutRoot" Background="White">
        
    </Grid>
</UserControl>



After that minor tweak, We now need to add a Canvas tag to hold all of our video player elements together for us, To do this we need to put the <Canvas> Tag between the <Grid> Tags.

 
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Name="Holder" Width="350" Height="220" Background="Black">
        </Canvas>
    </Grid>



These properties of the Canvas are very common in our project, All our elements will have a Name, A Height and a Width. They are measured in Pixels so you can easily make this pixel-perfect if you want to.

The name is what we use to address the element of the project, We will need this later on.

Ok, So We have in effect a black shape. We now need to add the video in, to do this we need to use the <MediaElement> tag.

This have three main properties that we need in addition to a Name, Width and Height we need the Source, Volume and AutoPlay settings.

- The source is what we want the media element to find and play, In our case the video is at media/media.wmv so, Our source would look like this
 Source="media/media.wmv" 


- The volume setting is pretty self explanitoriy so we will set it to 100 for this tutorial.

- The AutoPlay setting has two values, True or False, It determines if the video should automatically play when it has loaded, for this tutorial we will set it to False.

So after all that, Our MediaElement Code should look like this
 <MediaElement Name="Video" Source="media/media.wmv" AutoPlay="False" Volume="100" /> 

I have named the element video so that we will not get confused to it's function later on in the tutorial.

Right ok, Now we have a video lets add some controls so that we can uh.... control it..

Using the resources I have provided, We will add a new image tag into our code, this will be our Play Button.

The code for this will be like so;
  <Image Name="btnPlay" Height="17" Width="49" Source="media/play.png" /> 


As you can see, The element has a name, height, width and source. Because we have put all our resources into a folder in the project called media we always address the image as media/play.png instead of just play.png

We can also add other properties to this, As well as position it. To do so we will change the opacity to 0.4 and move it 220 pixels down from the canvas so we can see the button clearly. So, The code will now look like this;
 <Image Name="btnPlay" Height="17" Width="49" Source="media/play.png" Opacity="0.4" Canvas.Top="220" /> 


The Opacity property can be any value between 0 and 1.

Right, We have an image that doesn't do anything which isn't entirely useful at the moment so lets add some code to it. Open the event window while the image is selected and find the event for MouseLeftButtonDown this is silverlights version of click.

It will take you to the code behind the project for that event and this bit is very simple, the only code we need to put in this bit is Video.Play(); and thats all, That will make the video play! easy!

If your confused where to put it, this is what it should look like:
 private void btnPlay_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Video.Play();
        }



You may notice that the source of the media element has an error on it, To fix this you find the media.wmv in the media folder and change it's Build Action to Resource and it will work fine.

You can run it now and the video will play!

Heres something to try for yourself:

Add a Pause and Stop button into the project the same way we made the Play button, The methods for pausing and stopping are just as easy, They are:

 
Video.Stop();
Video.Pause();



Don't forget you can change the images to your own if you want!

Ok it works but it isn't very....detailed even for a basic one. Lets add a progress bar so we can see how far we are into the video.

To do this we will use the <ProgressBar /> tag.

As before we will need the standard Name, Width and Height properties, But we also need a Value property and a Maximum property.

The Value property sets how far the progress bar is in, and the Maximum sets the maximum value the progress bar can be.

With this new information here is the code we will use in this tutorial:
 
<ProgressBar Height="17" Name="Progress"  Width="133" Maximum="34" Value="{Binding Path=Position.Seconds, Mode=TwoWay, ElementName=Video}" /> 



As you can see the value property looks slightly odd, So I will explain.

What the code in the value property does is Binds the Property to the position of the video, As you can see the Binding Path is the aspect we want to bind to, The ElementName is the name of the element we want to link to.

Don't forget to position your progress bar so you can see it, you can also change the colours if you like.

And there you have it, A Simple Silverlight Video Player!

Possible Expansion:

If you enjoyed this tutorial, You could try adding more to your video player, Try some of the following:

- Add a label to show the progress of the Video exactly
- Add a Slider to change the Volume
- Make the images become more opaque when they are hovered over

Like I said earlier, This is my first tutorial so be gentle!


[Edit#3 Statement Removed.]

This post has been edited by Fungle: 11 November 2010 - 01:27 PM


Is This A Good Question/Topic? 3
  • +

Replies To: Silverlight 4: A Simple Video Player

#2 eclipsed4utoo  Icon User is online

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1524
  • View blog
  • Posts: 5,958
  • Joined: 21-March 08

Posted 11 November 2010 - 11:05 AM

Nice tutorial.
Was This Post Helpful? 0
  • +
  • -

#3 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Posted 11 November 2010 - 02:22 PM

Very nice tutorial, well done. Personally I try my best to avoid Silverlight, but I am sure many people will find this very useful!
Was This Post Helpful? 0
  • +
  • -

#4 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Posted 12 November 2010 - 07:04 PM

Note that Microsoft has had a "change of direction" with Silverlight and is promoting its use on mobile only.
Was This Post Helpful? 0
  • +
  • -

#5 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 256
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Posted 12 November 2010 - 07:34 PM

View Postdrhowarddrfine, on 12 November 2010 - 06:04 PM, said:

Note that Microsoft has had a "change of direction" with Silverlight and is promoting its use on mobile only.


I am aware of that, Though Mobile devices need video players too right?
Was This Post Helpful? 0
  • +
  • -

#6 Janitor  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 56
  • Joined: 30-July 10

Posted 16 November 2010 - 06:41 AM

Very nice tutorial, well done! Found it fascinating how easy it is to produce a Silverlight video player...
Was This Post Helpful? 0
  • +
  • -

#7 eclipsed4utoo  Icon User is online

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1524
  • View blog
  • Posts: 5,958
  • Joined: 21-March 08

Posted 28 November 2010 - 08:26 AM

View Postdrhowarddrfine, on 12 November 2010 - 09:04 PM, said:

Note that Microsoft has had a "change of direction" with Silverlight and is promoting its use on mobile only.


No they have not.

http://timheuer.com/...ilverlight.aspx

Please keep up with a technology a little better before posting incorrect information about it.
Was This Post Helpful? 0
  • +
  • -

#8 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Posted 28 November 2010 - 02:11 PM

View Posteclipsed4utoo, on 28 November 2010 - 02:26 PM, said:

View Postdrhowarddrfine, on 12 November 2010 - 09:04 PM, said:

Note that Microsoft has had a "change of direction" with Silverlight and is promoting its use on mobile only.


No they have not.

http://timheuer.com/...ilverlight.aspx

Please keep up with a technology a little better before posting incorrect information about it.


Thank you for this link, I had only seen the "misreported" articles!
Was This Post Helpful? 0
  • +
  • -

#9 ncaminada  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 16-November 11

Posted 16 November 2011 - 11:16 AM

Ok, followed the instructions but my video stream started automatically.

That's a problem I've been having, my streams start on heir own, even with AutoPlay set to false. I'm no Silverlight expert, just need to write a simple player for a project.

Any suggestions?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1