WPF MediaElement Introduction

WPF MediaElement Introduction

URL:http://blog.nelsondev.net/?m=201007

Tuesday, July 13th, 2010

WPF supports a powerful class for adding video and audio to controls and surfaces – the MediaElement.
I made a little demo program to show a few of its features. It’s still a progress bar, filename display and a whole bunch of other stuff short of a real media player.
The XAML . . .

    <Grid>
        <Button Height="32" Margin="54,32,0,0" Name="button_Open" 
                VerticalAlignment="Top" Click="button_Open_Click" 
                HorizontalAlignment="Left" Width="143">Open File</Button>
        <Button Margin="54,89,0,0" Name="button_Play" Height="32" 
                VerticalAlignment="Top" HorizontalAlignment="Left" Width="76"
                Click="button_Play_Click">Play</Button>
        <Button Margin="54,146,0,0" Name="button_Pause" HorizontalAlignment="Left"
                Width="76" Click="button_Pause_Click" Height="32" 
                VerticalAlignment="Top">Pause</Button>
        <Button Height="32" Margin="54,0,0,78" Name="button_Stop" 
                VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="76"
                Click="button_Stop_Click">Stop</Button>
        <Button Height="32" HorizontalAlignment="Right" Margin="0,89,109,0" 
                Name="button_TimePlay" VerticalAlignment="Top" Width="89" 
                Click="button_TimePlay_Click">Time Play</Button>
        <Slider Height="32" Margin="160,0,109,22" Name="slider1" 
                VerticalAlignment="Bottom" ValueChanged="slider1_ValueChanged"
                Ticks="0   0.5  1.0 " TickPlacement="BottomRight" Value="0.5"
                Minimum="0" Maximum="1" />
        <Label Height="28" HorizontalAlignment="Left" Margin="53,0,0,26"
               Name="label1" VerticalAlignment="Bottom" 
               Width="91">Volume</Label>
    </Grid>

produces this …

The MediaElement essentially has two modes – an indepenedent mode so you can control playing, stopping, etc, “manually”, and a “clock” mode so you can put it under the control of .Net’s timeline engine.
In the constructor, we set behavior to manual to be able to Stop, Play, etc . . . The file-open, and play, pause, stop, and volume slider functionality are bare-bones in this example, and pretty self-explanatory . . .

namespace WpfMP3
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        MediaElement _MyMediaElement;
        String _sMP3PathName;
        public Window1()
        {
            _sMP3PathName = "";
            _MyMediaElement = new MediaElement();
            _MyMediaElement.LoadedBehavior = MediaState.Manual;
            _MyMediaElement.UnloadedBehavior = MediaState.Manual;
            InitializeComponent();
        }

        private void button_Open_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog FileChooser = new OpenFileDialog();
            if (FileChooser.ShowDialog() != System.Windows.Forms.DialogResult.OK)
            {
                return;
            }
            _sMP3PathName = FileChooser.FileName;
            _MyMediaElement.Source = new Uri(_sMP3PathName);
        }

        private void button_Play_Click(object sender, RoutedEventArgs e)
        {
            _MyMediaElement.Play();
        }

        private void button_Pause_Click(object sender, RoutedEventArgs e)
        {
            _MyMediaElement.Pause();
        }

        private void button_Stop_Click(object sender, RoutedEventArgs e)
        {
            _MyMediaElement.Stop();
        }

        private void slider1_ValueChanged(object sender,
                 RoutedPropertyChangedEventArgs<double> e)
        {
            double value = e.NewValue;
            _MyMediaElement.Volume = value;
        }

Instead of having the MediaElement strictly under manual control, we can use a MediaTimeLine, which is a media analogue of .Net’s animation timeline. In this example we use a literal to set it to play 5 seconds and then stop . . .

        private void button_TimePlay_Click(object sender, RoutedEventArgs e)
        {
            MediaTimeline myTimeLine = new MediaTimeline();
            
            myTimeLine.Source = _MyMediaElement.Source;
            myTimeLine.Duration = (TimeSpan.FromMilliseconds(5000));
            MediaClock mc = myTimeLine.CreateClock();
            _MyMediaElement.Clock = mc;
            _MyMediaElement.Play();
         }
    }
}