Playing Video in Windows Store App Using C#

Introduction

In a Windows 8 Apps we can also play a video file using the Media Element control of Windows 8 Apps. To play videos in a Windows 8 Apps we use the MediaElement class. We can play audio and video using the HTML5 audio and video tags, or using C#. The Media Element class has many properties and methods that create media more attractively. It provides the options of play, pause, forward etc. To play video files we have set the source to the media file to play. We can set the source at the design time or by selecting from the local system using the FileOPenPicker class.

In this article we create a page that plays a video file with various buttons such as Play, Pause, Forward and Normal. We use the FileOpenPicker class to open a local media file and play it using the Media Element with various options.

Steps to be followed:

Step1: To create a new Windows Store project:

• Start Visual Studio 2012.
• Select File > New Project. The New Project dialog box opens.
• Select the Windows Store template.
• In the center pane, select Blank Application.
• Enter a name for the project.
• Click OK. Your project files are created
  

Step 2: Create a MediaElement in the MainPage.xaml page and give it a Name. Set the height and width of the element.

<Page

    x:Class="media.MainPage"

    IsTabStop="false"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:media"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Margin="20,50">

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black"/>

                <GradientStop Color="#FFC5947D" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

 

        <StackPanel x:Name="content" Margin="120,40,-10,0">

            <MediaElement DefaultPlaybackRate="0.5"  x:Name="media" HorizontalAlignment="Left"  Height="442" VerticalAlignment="Top" Width="877" Margin="165,150,0,0"/>

        </StackPanel>

      <Button x:Name="select" Click="b_Click_1" Height="63"  Width="229" Content="Select Media file" Margin="24,35,0,576"></Button>

      <Button x:Name="play" Click="play_Click_1"  Height="63" Width="177" FontSize="15" Content="Play" Margin="47,109,0,496"/>

      <Button x:Name="pause" Click="stop_Click_1"  Height="63" Width="177" FontSize="15" Content="Pause" Margin="47,198,0,407"/>

     <Button x:Name="btnForward" Click="btnForward_Click"  Content="Forward" Height="63" Width="177"  FontSize="15" Margin="47,283,0,322" />

     <Button x:Name="normal" Click="normal_Click_1"  Height="63" Width="177" FontSize="15" Content="Normal" Margin="47,369,0,236"/>

   </Grid>

</Page>

Step 3: Include the following namespaces in the MainPage.xaml.cs file:
 

using Windows.Storage.Pickers;

using Windows.Storage;

Step 4: Then, we use the FileOpenPicker class to select a media file from the user in the MainPage.xaml.cs file:

private async void b_Click_1(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);

     / mediaControl is a MediaElement defined in XAML

     media.SetSource(stream, file.ContentType);

     media.Play();
}

In the above code we use the FileOpenPicker class. We set the SuggestedStartLocation properties that specify the default location of where the user selects the media file from and the FileTypeFilter properties that specify the type of media file to be play by the Media Element. Here we use Async Calling to pick a file and give the stream of the file to the setSource properties of MediaElement.

Step 5: Then, we provide code for the various buttons that we have created:
 

private void btnForward_Click(object sender, RoutedEventArgs e)

{

    media.DefaultPlaybackRate = 2.0;

    media.Play();

}

private void stop_Click_1(object sender, RoutedEventArgs e)

{

    media.Pause();

}

private void normal_Click_1(object sender, RoutedEventArgs e)

{

    media.DefaultPlaybackRate = 0.5;

    media.Play();

}

private void play_Click_1(object sender, RoutedEventArgs e)

{

    media.Play();
}

Step 6: The full code is here that enables the user to choose a file from the local system and play it with various control options:

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

using Windows.Storage.Pickers;

using Windows.Storage;

 

namespace media

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

       private async void b_Click_1(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);

            // mediaControl is a MediaElement defined in XAML

            media.SetSource(stream, file.ContentType);

            media.Play();

         }

        private void btnForward_Click(object sender, RoutedEventArgs e)

        {

            media.DefaultPlaybackRate = 2.0;

            media.Play();

        }

        private void stop_Click_1(object sender, RoutedEventArgs e)

        {

            media.Pause();

        }

        private void normal_Click_1(object sender, RoutedEventArgs e)

        {

            media.DefaultPlaybackRate = 0.5;

            media.Play();

        }

        private void play_Click_1(object sender, RoutedEventArgs e)

        {

            media.Play();

        }

    }

}

Step 7: Press F5 to run the program. Click the "Select Media File" button to select the file to be played:



Step 8: Select Media file from the local system drives and click "Open" button.



Step 9: The media is playing on the Media Element control on the page. The user can use various control options to pause, play, forward and normal buttons. When the user clicks on the "Pause" button the video is paused until the user plays it again.

If we want to fast forward a video then we click on the "Forward" button. To return to normal speed click the "Normal" button.