How to play a Video in Silverlight

Vuyiswamb
Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 6012 red flag

It has been a while since I have written an article. This is because of the load of work that I am doing at my job, privately and here in DNF. Since well I have free time, I will dedicate this time to write new and finish the series that I have started and never finished. This is a small article that i use to demonstrate to you 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 ! 

Page copy protected against web site content infringement by Copyscape

About the Author

Vuyiswamb
Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com
Vuyiswa Junius Maseko is a Founder of Vimalsoft (Pty) Ltd (http://www.vimalsoft.com/) and a forum moderator at www.DotnetFunda. Vuyiswa has been developing for 16 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect for Windows,Unity 3D. He has been using .net since the beta version of it. Vuyiswa believes that Kinect and Hololen is the next generation of computing.Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Microsoft) They have made vuyiswa what he is today.

Login to vote for this post.

Comments or Responses

Posted by: SheoNarayan on: 1/13/2012 | Points: 25
Extension of this article "How to access a video and snap a picture from webcam in Silverlight?" is at http://www.dotnetfunda.com/articles/article1751-how-to-access-a-video-and-snap-a-picture-from-webcam-in-silverlight.aspx here.

Thanks

Login to post response

Comment using Facebook(Author doesn't get notification)