Introduction
Today I am going to explain how to use the Media Element control in Windows Store apps. This control is used to play an audio or video file in the Windows Store apps. We can give the name of the video that we want to play directly in the Source property of the Media Element or we can use the FileOpenPicker object so that we can select the video that we want to play. The AutoPlay property of Media Element is set to true, so that the Video is played automatically when it is loaded. To see how it works let's use the following steps.
Step 1
Open Visual Studio 2012 and select BlankPage in it.
Step 2
Open MainPage.xaml file and perform the design by writing the following code:
<Page
x:Class="mediaElement.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:mediaElement"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#FFF7C6EE">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="300"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Media Player Application" FontSize="25" Grid.Row="0" HorizontalAlignment="Center" Margin="50,50,0,0" Width="350"/>
<StackPanel Orientation="Horizontal" Grid.Row="1">
<Button Content="Pick Vedio" Height="50" Width="250" FontSize="25" Margin="50,0,0,0" Click="Pick_Click"/>
<MediaElement x:Name="Media" Width="462" Height="250" Margin="50,1,0,0" AutoPlay="True" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="2">
<Button Content="Play" FontSize="20" Height="50" Width="150" Margin="50,50,0,0" Click="Play_click"/>
<Button Content="Pause" FontSize="20" Height="50" Width="150" Margin="50,50,0,0" Click="Pause_click"/>
<Button Content="Stop" FontSize="20" Height="50" Width="150" Margin="50,50,0,0" Click="Stop_Click"/>
<Button Content="Fast Forword" FontSize="20" Height="50" Width="150" Margin="50,50,0,0" Click="Forword_Click"/>
<Button Content="Rewind" FontSize="20" Height="50" Width="150" Margin="50,50,0,0" Click="Rewind_Click"/>
</StackPanel>
</Grid>
</Page>
Step 3
To pick the Video file make the FileOpenPicker object as:
private async void Pick_Click(object sender, RoutedEventArgs e)
{
var openPicker = new FileOpenPicker();
openPicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
openPicker.FileTypeFilter.Add(".wmv");
openPicker.FileTypeFilter.Add(".mp4");
var file = await openPicker.PickSingleFileAsync();
var stream = await file.OpenAsync(FileAccessMode.Read);
Media.SetSource(stream, file.ContentType);
Media.Play();
}
Step 4
To perform the Play operation write the code as:
private void Play_click(object sender, RoutedEventArgs e)
{
if (Media.DefaultPlaybackRate != 1)
{
Media.DefaultPlaybackRate = 1.0;
}
Media.Play();
}
To play a video if the DefaultPlaybackRate is not 1.0, sets the DefaultPlaybackRate to 1.0. The handler then calls the Play method.
Step 5
Perform the Pause and Stop operation as:
private void Pause_click(object sender, RoutedEventArgs e)
{
Media.Pause();
}
private void Stop_Click(object sender, RoutedEventArgs e)
{
Media.Stop();
}
Step 6
To the Perform Fast forward operation we set the value of the DefaultPlaybackRate property to 2.0. We can adjust this value to increase or decrease the rate of the fast-forward. Then the handler calls the Play method. So that the video is played with:
private void Forword_Click(object sender, RoutedEventArgs e)
{
Media.DefaultPlaybackRate = 2.0;
Media.Play();
}
Step 7
Perform a Rewind operation by setting the DefaultPlaybackRate property to -2.0, then the handler calls the Play method.
private void Rewind_Click(object sender, RoutedEventArgs e)
{
Media.DefaultPlaybackRate = -2.0;
Media.Play();
}
Step 8
The full code for playing a Video is:
namespace mediaElement
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Play_click(object sender, RoutedEventArgs e)
{
if (Media.DefaultPlaybackRate != 1)
{
Media.DefaultPlaybackRate = 1.0;
}
Media.Play();
}
private void Pause_click(object sender, RoutedEventArgs e)
{
Media.Pause();
}
private async void Pick_Click(object sender, RoutedEventArgs e)
{
var openPicker = new FileOpenPicker();
openPicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
openPicker.FileTypeFilter.Add(".wmv");
openPicker.FileTypeFilter.Add(".mp4");
var file = await openPicker.PickSingleFileAsync();
var stream = await file.OpenAsync(FileAccessMode.Read);
Media.SetSource(stream, file.ContentType);
Media.Play();
}
private void Stop_Click(object sender, RoutedEventArgs e)
{
Media.Stop();
}
private void Forword_Click(object sender, RoutedEventArgs e)
{
Media.DefaultPlaybackRate = 2.0;
Media.Play();
}
private void Rewind_Click(object sender, RoutedEventArgs e)
{
Media.DefaultPlaybackRate = -2.0;
Media.Play();
}
}
}
Step 9
Run the application by pressing F5.
When I click on the Pick Video the window is opened from where I select the video and perform various operations. In this way this application demonstrates the simple Media player in windows Store application.
Summary
In this article I explained how to work with the Media Element control in Windows Store apps.
Join the conversation! Your thoughts help the community grow.