BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Media Controls - MediaElement - Media Information

The eighty-seventh part of the Windows Presentation Foundation Fundamentals tutorial continues to look at the MediaElement control. This article describes some properties that provide information about the opened media.

Determining the Video Dimensions

By default, when video is loaded into a MediaElement, it is resized to fit within either the height or the width of the control, whilst retaining its aspect ratio. This is actually controlled by the Stretch and StretchDirection properties, which operate in the same manner as for the Image control. In some situations you will want to identify the size of the original video. This information can be found in the NaturalVideoHeight and NaturalVideoWidth properties.

To demonstrate, modify the ShowMediaInformation method, as follows, to include the video dimensions in the TextBlock.

private void ShowMediaInformation()
{
    var sb = new StringBuilder();

    var duration = Media.NaturalDuration.HasTimeSpan
        ? Media.NaturalDuration.TimeSpan.TotalSeconds.ToString("#s")
        : "No duration";
    sb.Append(duration);

    if (Media.HasVideo)
    {
        sb.Append(", video");
    }

    if (Media.HasAudio)
    {
        sb.Append(", audio");
    }

    if (Media.HasVideo)
    {
        sb.Append(" (")
            .Append(Media.NaturalVideoWidth)
            .Append("×")
            .Append(Media.NaturalVideoHeight)
            .Append(")");
    }

    MediaInformation.Text = sb.ToString();
}

Obtaining and Changing the Playback Position

The last property we'll look at allows you to determine the current position in a video or audio file, as a TimeSpan. You can also use the Position property to set the position for playback. We'll demonstrate this by adding two new buttons to the media player. These will allow the user to skip forwards or backwards through the media. One button will move the position forwards five seconds and one will skip backwards.

To start, add the following StackPanel containing the two buttons immediately after the TextBlock that we used to show the media information. The StackPanel will appear at the bottom right corner of the first Grid cell, overlapping the video.

<StackPanel VerticalAlignment="Bottom"
            HorizontalAlignment="Right"
            Orientation="Horizontal"
            Margin="3">
    <Button Click="Back_Click">&lt;&lt;</Button>
    <Button Click="Forward_Click">&gt;&gt;</Button>
</StackPanel>

We can now add the two methods that handle the Click events for the buttons. Each reads the Position property, adds or removes five seconds and sets the property's new value. The conditional statements ensure that we don't try to move beyond the end of the video or prior to its start.

private void Back_Click(object sender, RoutedEventArgs e)
{
    if (!Media.NaturalDuration.HasTimeSpan) return;

    var position = Media.Position;
    if (position.TotalSeconds < 5)
        Media.Position = TimeSpan.FromSeconds(0);
    else
        Media.Position = position.Add(TimeSpan.FromSeconds(-5));
}

private void Forward_Click(object sender, RoutedEventArgs e)
{
    if (!Media.NaturalDuration.HasTimeSpan) return;

    var targetPosition = Media.Position.Add(TimeSpan.FromSeconds(5));
    if (targetPosition > Media.NaturalDuration.TimeSpan)
        Media.Position = Media.NaturalDuration.TimeSpan;
    else
        Media.Position = targetPosition;
}

Run the program for a final time, play some media and try the two buttons to see the results.

11 August 2014