MediaPlayerElement MediaPlayerElement MediaPlayerElement MediaPlayerElement Class

Definition

public : class MediaPlayerElement : Control, IMediaPlayerElementpublic class MediaPlayerElement : Control, IMediaPlayerElementPublic Class MediaPlayerElement Inherits Control Implements IMediaPlayerElement// This API is not available in Javascript.

<MediaPlayerElement .../>

Inheritance

DependencyObjectDependencyObjectDependencyObjectDependencyObject

UIElementUIElementUIElementUIElement

FrameworkElementFrameworkElementFrameworkElementFrameworkElement

ControlControlControlControl

MediaPlayerElementMediaPlayerElementMediaPlayerElementMediaPlayerElement

Attributes

ComposableAttribute ContractVersionAttribute MarshalingBehaviorAttribute StaticAttribute ThreadingAttribute WebHostHiddenAttribute

Inherited Members

Inherited properties

Inherited events

Inherited methods

Examples

This code creates a MediaElement with the AutoPlay property explicitly set to true and the Source set to the path of a video file that is included in the app.

<MediaElement Source="Media/video1.mp4" AutoPlay="True" />

<MediaElement x:Name="mediaPlayer" 
              Source="Videos/video1.mp4" 
              Width="400" 
              AutoPlay="False"
              AreTransportControlsEnabled="True" />

<Grid>
    <Button Content="Show Popup" Click="ShowPopupClicked"/>
    <Popup x:Name="mediaPlayerPopup">
        <StackPanel Height="1400" Width="1400" Background="Blue">
            <MediaPlayerElement x:Name="mediaPlayer" 
                  AreTransportControlsEnabled="True" 
                  Source="Media/Intro.wmv"/>
            <TextBlock Text="Simple Popup"/>
            <Button Content="Close" Click="ClosePopupClicked"/>
        </StackPanel>
    </Popup>
</Grid>

long token;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    token = mediaPlayer.RegisterPropertyChangedCallback(MediaPlayerElement.IsFullWindowProperty, OnMPEFullWindowChanged);
    base.OnNavigatedTo(e);
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    mediaPlayer.UnregisterPropertyChangedCallback(MediaPlayerElement.IsFullWindowProperty, token);
}

private void OnMPEFullWindowChanged(DependencyObject sender, DependencyProperty dp)
{
    MediaPlayerElement mpe = (MediaPlayerElement)sender;

    if (mpe != null && dp == MediaPlayerElement.IsFullWindowProperty)
    {
        if (mpe.IsFullWindow == true)
        {
            mediaPlayerPopup.Visibility = Visibility.Collapsed;
        }
        else
        {
            mediaPlayerPopup.Visibility = Visibility.Visible;
        }
    }  
}

private void ClosePopupClicked(object sender, RoutedEventArgs e)
{
    // If the Popup is open, then close it. 
    if (mediaPlayerPopup.IsOpen) { mediaPlayerPopup.IsOpen = false; }
}

// Handles the Click event on the Button on the page and opens the Popup. 
private void ShowPopupClicked(object sender, RoutedEventArgs e)
{
    // Open the Popup if it isn't open already.
    if (!mediaPlayerPopup.IsOpen) { mediaPlayerPopup.IsOpen = true; }
}

Remarks

For info about the media formats that MediaPlayerElement supports, see Supported codecs.

Architectural overview

MediaPlayerElement is a lightweight XAML control that serves as a rendering surface for the robust MediaPlayer class, which is part of the Windows.Media.Playback namespace. The majority of the media functionality is located on the underlying MediaPlayer class, which you can access through the MediaPlayerElement.MediaPlayer property. To change the underlying MediaPlayer for an instance of MediaPlayerElement, use the SetMediaPlayer method.

For more information about the MediaPlayer class, including guidelines on how to transition from MediaElement to MediaPlayerElement, see the Media playback page.

Set the media source

Set the Source property of the MediaPlayerElement to point to an audio or video file. You can set it to a MediaSource, MediaPlaybackItem, or MediaPlaybackList. The media files can be included with the app package or be on a network.

By default, the media that is defined by the Source property does not immediately play after the MediaPlayerElement object has loaded. To start media playback automatically, set the AutoPlay property to true.

Here’s how to create a MediaPlayerElement in XAML with the Source set to the path of a video file that is included in the app and the AutoPlay property explicitly set to true.

<MediaPlayerElement Source="Media/video1.mp4" AutoPlay="True"/>

Here’s how to create the MediaPlayerElement in code.

MediaPlayerElement mediaPlayerElement1 = new MediaPlayerElement();
mediaPlayerElement1.Source = MediaSource.CreateFromUri(new Uri("ms-appx:///Media/video1.mp4"));
mediaPlayerElement1.AutoPlay = true;

Handle media events

You can respond to common media events located on the underlying MediaPlayer such as MediaOpened, MediaEnded, and MediaFailed. If you have set the source to a MediaPlaybackItem or MediaPlaybackList, you should respond to the media events on those classes instead as they provide more information.

Transport controls

Set the AreTransportControlsEnabled property to programmatically enable and disable the built in transport controls for the MediaPlayerElement. The built in transport controls provide UI for playing, stopping, pausing, and seeking the media as well as UI for volume, mute, full window, track selection, closed captions and remaining time.

You can create your own media transport controls by setting AreTransportControlsEnabled to false, and using the Play and Pause methods on MediaPlayer. You can also control a rich set of properties by using the underlying MediaPlayer such as Position, Volume, IsMuted, IsLoopingEnabled, and PlaybackRate.

For more info and examples, see Create custom transport controls.

Full window playback

Use the IsFullWindow property to enable and disable full window rendering. When in full-window mode the display is automatically prevented from being deactivated when user action is no longer detected.

Keep media playing

To prevent the display from being deactivated when MediaPlayerElement is not in full-window mode, you can call DisplayRequest.RequestActive. To conserve power and battery life, you should call DisplayRequest.RequestRelease to release the display request as soon as it is no longer required.

Here are some situations when you should release the display request:

• Video playback is paused, for example by user action, buffering, or adjustment due to limited bandwidth.
• Playback stops. For example, the video is done playing or the presentation is over.
• A playback error has occurred. For example, network connectivity issues or a corrupted file. Here, you use the PlaybackStateChanged event to detect these situations. Then, use the NaturalVideoHeight property of the MediaPlayer.PlaybackSession to determine whether an audio or video file is playing, and keep the screen active only if video is playing.

<MediaPlayerElement x:Name="mpe" Source="Media/video1.mp4"/>

// Create this variable at a global scope. Set it to null.
private DisplayRequest appDisplayRequest = null;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    mpe.MediaPlayer.PlaybackSession.PlaybackStateChanged += MediaPlayerElement_CurrentStateChanged;
    base.OnNavigatedTo(e);
}

private void MediaPlayerElement_CurrentStateChanged(MediaPlaybackSession sender, object args)
{
    MediaPlaybackSession playbackSession = sender as MediaPlaybackSession;
    if (playbackSession != null && playbackSession.NaturalVideoHeight != 0)
    {
        if(playbackSession.PlaybackState == MediaPlaybackState.Playing)
        {
            if(appDisplayRequest == null)
            {
                // This call creates an instance of the DisplayRequest object
                appDisplayRequest = new DisplayRequest();
                appDisplayRequest.RequestActive();
            }
        }
        else // PlaybackState is Buffering, None, Opening, or Paused.
        {
            if(appDisplayRequest != null)
            {
                // Deactivate the display request and set the var to null.
                appDisplayRequest.RequestRelease();
                appDisplayRequest = null;
            }
        }
    }
}

Poster source

You can use the PosterSource property to provide your MediaPlayerElement with a visual representation before the media is loaded or while audio-only media is playing. . A PosterSource is an image, such as a screen shot, movie poster, or album cover, that is displayed in place of the media. The PosterSource is displayed in the following situations:

• When a valid source is not set. For example, Source is not set, Source was set to Null, or the source is invalid (as is the case when a MediaFailed event fires).
• While media is loading. For example, a valid source is set, but the MediaOpened event has not fired yet.
• When media is streaming to another device.
• When the media is audio only.

public : MediaPlayerElement()public MediaPlayerElement()Public Sub New()// This API is not available in Javascript.

public : PlatForm::Boolean AreTransportControlsEnabled { get; set; }public bool AreTransportControlsEnabled { get; set; }Public ReadWrite Property AreTransportControlsEnabled As bool// This API is not available in Javascript.

<MediaPlayerElement AreTransportControlsEnabled="bool"/>

public : static DependencyProperty AreTransportControlsEnabledProperty { get; }public static DependencyProperty AreTransportControlsEnabledProperty { get; }Public Static ReadOnly Property AreTransportControlsEnabledProperty As DependencyProperty// This API is not available in Javascript.

public : PlatForm::Boolean AutoPlay { get; set; }public bool AutoPlay { get; set; }Public ReadWrite Property AutoPlay As bool// This API is not available in Javascript.

<MediaPlayerElement AutoPlay="bool" .../>

public : static DependencyProperty AutoPlayProperty { get; }public static DependencyProperty AutoPlayProperty { get; }Public Static ReadOnly Property AutoPlayProperty As DependencyProperty// This API is not available in Javascript.

public : PlatForm::Boolean IsFullWindow { get; set; }public bool IsFullWindow { get; set; }Public ReadWrite Property IsFullWindow As bool// This API is not available in Javascript.

<MediaPlayerElement IsFullWindow="bool" />

public : static DependencyProperty IsFullWindowProperty { get; }public static DependencyProperty IsFullWindowProperty { get; }Public Static ReadOnly Property IsFullWindowProperty As DependencyProperty// This API is not available in Javascript.

public : MediaPlayer MediaPlayer { get; }public MediaPlayer MediaPlayer { get; }Public ReadOnly Property MediaPlayer As MediaPlayer// This API is not available in Javascript.

public : static DependencyProperty MediaPlayerProperty { get; }public static DependencyProperty MediaPlayerProperty { get; }Public Static ReadOnly Property MediaPlayerProperty As DependencyProperty// This API is not available in Javascript.

public : ImageSource PosterSource { get; set; }public ImageSource PosterSource { get; set; }Public ReadWrite Property PosterSource As ImageSource// This API is not available in Javascript.

<MediaPlayerElement PosterSource="imageUri" />

public : static DependencyProperty PosterSourceProperty { get; }public static DependencyProperty PosterSourceProperty { get; }Public Static ReadOnly Property PosterSourceProperty As DependencyProperty// This API is not available in Javascript.

public : IMediaPlaybackSource Source { get; set; }public IMediaPlaybackSource Source { get; set; }Public ReadWrite Property Source As IMediaPlaybackSource// This API is not available in Javascript.

public : static DependencyProperty SourceProperty { get; }public static DependencyProperty SourceProperty { get; }Public Static ReadOnly Property SourceProperty As DependencyProperty// This API is not available in Javascript.

public : Stretch Stretch { get; set; }public Stretch Stretch { get; set; }Public ReadWrite Property Stretch As Stretch// This API is not available in Javascript.

<MediaPlayerElement Stretch="stretchMemberName" />

public : static DependencyProperty StretchProperty { get; }public static DependencyProperty StretchProperty { get; }Public Static ReadOnly Property StretchProperty As DependencyProperty// This API is not available in Javascript.

public : MediaTransportControls TransportControls { get; set; }public MediaTransportControls TransportControls { get; set; }Public ReadWrite Property TransportControls As MediaTransportControls// This API is not available in Javascript.

public : void SetMediaPlayer(MediaPlayer mediaPlayer)public void SetMediaPlayer(MediaPlayer mediaPlayer)Public Function SetMediaPlayer(mediaPlayer As MediaPlayer) As void// This API is not available in Javascript.

See Also

• Control Control Control Control