Home > DeveloperSection > Articles > Media Element in WPF

Media Element in WPF


WPF WPF 
Ratings:
0 Comment(s)
 14197  View(s)
Rate this:

Media Element in WPF

We can create a simple Media player by using XAML MediaElement element. WPF provides a wrapper around current Media Player 10 ActiveX (OCX) control. A computer where this functionality is used must have media player 10 or later version. In this demonstration I will show you that how we can create a Simple media player by using MediaElement.

The following XAML elements create a MediaElement

<Grid>

        <MediaElement Height="431" HorizontalAlignment="Left" LoadedBehavior="Manual" UnloadedBehavior="Stop" Margin="12,12,0,0" x:Name="mediaPlayer1" VerticalAlignment="Top" Width="794" />

        <Button Content="Play" Height="29" HorizontalAlignment="Left" Margin="31,466,0,0" x:Name="btnPlay" VerticalAlignment="Top" Width="149" Click="btnPlay_Click" />

        <Button Content="Pause" Height="29" HorizontalAlignment="Left" Margin="216,466,0,0" x:Name="btnPause" VerticalAlignment="Top" Width="156" Click="btnPause_Click" />

        <Button Content="Stop" Height="29" HorizontalAlignment="Left" Margin="407,466,0,0" x:Name="btnStop" VerticalAlignment="Top" Width="163" Click="btnStop_Click" />

        <Button Content="Browse" Height="29" HorizontalAlignment="Right" Margin="0,466,48,0" x:Name="btnBrowse" VerticalAlignment="Top" Width="151" Click="btnBrowse_Click" />

</Grid>

The output of the above code snippet is as follows

Media Element in WPF

When user click on Browse button then a dialog box opens and ask to select a media file which needs to be played. When user click on Play button then media plays file from beginning, when the user click on stop button then current file will be stop and when user click on Pause button then it will be pause.

Codes to perform these action are as follows

/// <summary>

        /// On the click event of browse button we browse a file that

        /// needs to be played by using OpenFileDialog box and then play

        /// that file by calling Play() method of mediaelement control.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void btnBrowse_Click(object sender, RoutedEventArgs e)

        {

            OpenFileDialog ofd = new OpenFileDialog();

            if (ofd.ShowDialog().Value)

            {

                string fileName = ofd.FileName;

                mediaPlayer1.Source = new Uri(fileName);

                mediaPlayer1.Play();

            }

        }

 

        /// <summary>

        /// On the click event of button control we play loaded media

        /// by calling Play() method of MediaElement control.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void btnPlay_Click(object sender, RoutedEventArgs e)

        {

            if (mediaPlayer1.HasVideo)

            {

                mediaPlayer1.Play();

            }

        }

 

        /// <summary>

        /// On the click event of Pause button we pause the playing media

        /// by calling Pause method.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

 

        private void btnPause_Click(object sender, RoutedEventArgs e)

        {

            if (mediaPlayer1.HasVideo)

            {

                if (mediaPlayer1.IsLoaded)

                {

                    mediaPlayer1.Pause();

                }

            }

        }

 

        /// <summary>

        /// By calling the stop button  we pause the media which stops.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

 

        private void btnStop_Click(object sender, RoutedEventArgs e)

        {

            if (mediaPlayer1.HasVideo)

            {

                mediaPlayer1.Stop();

            }

        }

 

The output of the above code snippet is as follows

Media Element in WPF

Browsing file which needs to be played.

Media Element in WPF

Playing the current file.

When user click on Pause button then file should be paused and when user click on Play button then file should be resumed.

 


Don't want to miss updates? Please click the below button!

Follow MindStick