How to play a Video in Silverlight

Introduction

It has been a while since I have written an article, this is because the load of work that I am doing at my job, privately and here in DNF. Since I have free time, I will dedicate this time to write new and finish the series that I have started and never finish them. This will rather be a small article that will demonstrate to you how to play a video in Silverlight.  

Objective

In this article I will show you how to play a Video in Silverlight.

Using the code

At some point in your website or web application, you might want to show a video of some in Silverlight. This article will demonstrate on how to do that.

 

Displaying a video in Silverlight is very simple. We are going to use a Media element that comes with Silverlight and we are going to add nice functionality to play, pause, increase the volume and decrease the volume. The following is my xaml

<UserControl x:Class="StreamingvideosSilverlight.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="531" d:DesignWidth="669">
 
    <Grid x:Name="LayoutRoot" Background="White" Height="526">
    
         <MediaElement x:Name="VideoPlayer"  AutoPlay="False" Source="HOLLYOXYGEN.wmv" Margin="5,0,0,67"></MediaElement>
 
            <Button Content="Pause" Height="23"   Name="btnpause"  Width="75" Click="btnpause_Click"Margin="233,472,0,30" HorizontalAlignment="Left" />
            <Button Content="Vol -" Click="btndown_Click" Name="btndown"   Width="75" Margin="314,472,0,30"HorizontalAlignment="Left" />
            <Button Content="Vol +" Click="btnup_Click"   Name="btnup"  Width="75" Margin="394,473,200,30" />
            <Button Content="Play" Height="23" Click="button1_Click"  Name="btnplay" Width="75"  Margin="152,474,0,29" HorizontalAlignment="Left" />
   
 
    </Grid>
</UserControl>

Now from above, I have a media element and it have a name “videoPlayer” and it has a video “HOLLYOXYGEN.wmv” and when the element loads it will not play the video because I have set the property AutoPlay="False". So which brings me to other elements of the in the xaml. The Button that will play, pauses, increase the Volume and decrease the volume. The Volume can either be 1 or 0. 1 is the loudest and 0 is like mute, you will not hear anything.  Let us see how simple the code behind is.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace StreamingvideosSilverlight

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

        }

 

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            VideoPlayer.Play();

        }

 

        private void btnpause_Click(object sender, RoutedEventArgs e)

        {

            VideoPlayer.Pause();

        }

 

        private void btnup_Click(object sender, RoutedEventArgs e)

        {

            VideoPlayer.Volume =1;

        }

 

        private void btndown_Click(object sender, RoutedEventArgs e)

        {

 

            VideoPlayer.Volume =0;

        }

    }

}

 

And  when you run your application you will see your video as depicted in mine , but it will not play until you click the play button as depicted below

Oops, but buttons are all over the place, but that is not the purpose of this article, I wanted to show you how to play a video in Silverlight.

Thank you for visiting DotNetFunda.com and reading this article !