MediaElement control in Silverlight using VB.NET

In this article we will learn how to use MediaElement control in Silverlight 4 using VB.NET.
  • 2668

In this article we will learn how to use MediaElement control in Silverlight 4 using VB.NET.

MediaElement control

MediaElement control is used to Represent an object that contains audio, video, or both.

Properties - This control has the following properties.

me1.gif
 

Figure 1.

Source - The Source property specifies name of the media file to be played immediately after the MediaElement object has loaded.

AutoPlay - To stop the the media from starting automatically, set the AutoPlay property to false.

Silverlight supports WMA media.

WMV (Windows Media video)

Short for Windows Media video, a Microsoft file format for encoding digital video files similar to video file though can compress files at a higher rate than video file. WMA files, which use the .wmv file extension, can be of any size compressed to match many different connection speeds, or bandwidths. You can download it with the given below link.

Download WMV Converter 

Creating MediaElement in XAML

<MediaElement Height="238" HorizontalAlignment="Left" Margin="12,12,0,0" Name="mediaElement1"

 

VerticalAlignment="Top" Width="424" Source="tere.wmv" Volume="1" />

 

The Width and Height property represents the width and the height of the control. Name property represents name of the control.

 

How to set Video file

 

If you dont want to store your file to the ClientBin folder do this: from Visual Studio right click on the Video file and select Properties. Now in Properties window change Build Action to Resource. This ensures the file gets copied to the ClientBin folder during execution.

me3.gif
Figure 2.

Now set build action -> Resource property.

me4.gif
 

Figure 3.

 

Source property

The following code snippet sets the Source property to a .wmv file.

<MediaElement Source="tere.wmv" />

For Example

Drag and drop a MediaElement and three Button controls on the page and name them mediaElement1, Play Button, Pause Button. The form looks like this.

me2.gif
 

Figure 4.

XAML code

<UserControl x:Class="SilverlightApplication49.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" Width="460" Height="360">

 

        <MediaElement Height="238" HorizontalAlignment="Left" Margin="12,12,0,0"Name="mediaElement1"

 

         VerticalAlignment="Top" Width="388" Source="tere.wmv" Volume="1" />

 

        <Button Content="Play" Height="28" HorizontalAlignment="Left" Margin="12,258,0,0"

 

       Name="PlayButton" VerticalAlignment="Top" Width="88" Click="PlayButton_Click" />

 

        <Button Content="Pause" Height="30" HorizontalAlignment="Right" Margin="0,258,255,0"

 

              Name="PauseButto" VerticalAlignment="Top" Width="85" Click="PauseButto_Click" />

    </Grid>

 </UserControl>

 

Now double click on the play button and add the following code.

 

Private Sub PlayButton_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs)

        Me.mediaElement1.Play()

    End Sub

 

Now double click on the pause button and add the following code.

 

Private Sub PauseButto_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs)

        Me.mediaElement1.Pause()

    End Sub

Set AutoPlay property to false

Public Sub New()

        InitializeComponent()

        mediaElement1.AutoPlay = False

    End Sub

 

Now run the application press CTRL+F5.


 

me5.gif 

Figure 5.

 

Now to play the video click on the play Button. 
 


 

me6.gif 

Figure 6.

 

To Pause the Video click on the Pause Button.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.