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.
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.
Figure 2.
Now set build action -> Resource property.
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.
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.
Figure 5.
Now to play the video click on the play Button.
Figure 6.
To Pause the Video click on the Pause Button.