Geek asks and answers

Associating MediaElement with slider in WPF

Tried binding The maximum value of the slider to the duration of the media element and the current value of the slider binding to the position of the media element, but for some reason this is not so.

I want the slider to move it with my thumb during video playback.

<Slider x:Name="videoSlider" Value="{Binding ElementName=mp3MediaElement, Path=Position}" 
ValueChanged="videoSlider_ValueChanged" IsMoveToPointEnabled="True" 
Maximum="{Binding ElementName=mp3MediaElement, Path=NaturalDuration}" 
AllowDrop="True" DataContext="{Binding ElementName=mp3MediaElement}" />
+3
source share
4 answers

I did not use binding. I had a similar problem and I used a timer for this (my code is in Silverlight, suppose it will be the same in WPF):

The first direction (the film updates the slider)

private TimeSpan TotalTime;

private void MyMediaElement_MediaOpened(object sender, RoutedEventArgs e)
        {
            TotalTime = MyMediaElement.NaturalDuration.TimeSpan;

            // Create a timer that will update the counters and the time slider
            timerVideoTime = new DispatcherTimer();
            timerVideoTime.Interval = TimeSpan.FromSeconds(1);
            timerVideoTime.Tick += new EventHandler(timer_Tick);
            timerVideoTime.Start();
        }

void timer_Tick(object sender, EventArgs e)
        {
            // Check if the movie finished calculate it total time
            if (MyMediaElement.NaturalDuration.TimeSpan.TotalSeconds > 0)
            {
                if (TotalTime.TotalSeconds > 0)
                {
                    // Updating time slider
                    timeSlider.Value = MyMediaElement.Position.TotalSeconds /
                                       TotalTime.TotalSeconds;
                }
            }
        }

The second direction (the user updates the slider)
on the ctor form or something like this write the following line:

timeSlider.AddHandler(MouseLeftButtonUpEvent, 
                      new MouseButtonEventHandler(timeSlider_MouseLeftButtonUp), 
                      true);

and event handler:

private void timeSlider_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (TotalTime.TotalSeconds > 0)
            {
                MyMediaElement.Position = TimeSpan.FromSeconds(timeSlider.Value * TotalTime.TotalSeconds);
            }
        }
+10
source

Double. TimeSpan Duration , .

NaturalDuration.TimeSpan.TotalSeconds.

, .

, , "" Visual Studio.

+3

, MediaElement.
, , , .
, - , , ScrubbingEnabled, MediaElement .
, .
: ScrubbingEnabled="True" XAML MediaElement.

0

UWP.

This answer addresses only a specific issue; moving the thumb of the slider in response to playback. It does not handle changing the position of the video in response to a user moving the slider.

First add:

private DispatcherTimer timerVideoPlayback;

private void TimerVideoPlayback_Tick(object sender, object e)
{
    long currentMediaTicks = mediaElement.Position.Ticks;
    long totalMediaTicks = mediaElement.NaturalDuration.TimeSpan.Ticks;

    if (totalMediaTicks > 0)
        slider.Value = (double)currentMediaTicks / totalMediaTicks * 100;
    else
        slider.Value = 0;
}

Then, when your video starts, start the timer:

timerVideoPlayback = new DispatcherTimer();
timerVideoPlayback.Interval = TimeSpan.FromMilliseconds(10);
timerVideoPlayback.Tick += TimerVideoPlayback_Tick;
timerVideoPlayback.Start();

I used a 10 ms interval to keep the slider moving steady. Use whatever value you like.

And do not forget to stop this timer when playback ends:

timerVideoPlayback.Stop();
0
source

More articles:


All Articles