MediaPlayerElement

See Microsoft API reference for MediaPlayerElement.

Media formats

Supported Formats iOS Android Wasm Skia Desktop Remarks
Local/Remote MP3 Support ✅ ✅ ✅ ✅
Local/Remote MPEG4 Support ✅ ✅ ✅ ✅
HLSv3 Support ✅ ✅ ✅ ✅
HLSv4 Support ✅ ✅ ✅ ✅
3GP Support ✅ ✅ ✅ ✅ 3GP with AMR Narrow Band (SAMR) audio codec does not work on iOS (See notes)
FLV Support - ✅ ✅ ✅
MOV Support ✅ - - -
MKV Support - ✅ ✅ ✅
AVI Support - ✅ ✅ ✅
OGG Support - - ✅ ✅
MPEG-Dash Support - - - -
Smooth Streaming Support - - - -

Notes

  • Uno's MediaPlayerElement relies on AVPlayer for iOS and AndroidMediaPlayer for Android. Please, refer to those native players documentation for more information about supported audio and video formats.
  • Uno's MediaPlayerElement relies on VLC and libvlc on Linux. please follow these instructions to get the necessary dependencies.
  • If you need to set source programmatically (i.e., using _mediaPlayerElement.Source = [source]), please note that only sources created with MediaSource.CreateFromUri() are currently supported.

Features

Section Feature iOS & Android (native) Wasm (native) Skia Remarks
MediaPlayerElement AutoPlay ✅ ✅ ✅
Poster image ✅ ✅ ✅ Does not show when playing music
Enable/Disable MediaTransportControls ✅ ✅ ✅
Stretch ✅ ✅ ✅ Stretch.None behaves like Stretch.Fill on iOS
Pause media when headphones unplugged ✅ - -
TransportControls Transport controls custom style ✅ ✅ ✅
Play/Pause ✅ ✅ ✅
Stop ✅ ✅ ✅
Seek ✅ ✅ ✅
Volume change ✅ ✅ ✅
Mute ✅ ✅ ✅
Show elapsed time ✅ ✅ ✅
Show remaining time ✅ ✅ ✅
Show/Hide MediaTransportControls automatically ✅ ✅ ✅
MediaTransportControls compact mode ✅ ✅ ✅
Show/Hide MediaTransportControls commands ✅ ✅ ✅
Enable/Disable MediaTransportControls commands ✅ ✅ ✅
Skip forward ✅ ✅ ✅
Skip backward ✅ ✅ ✅
Show buffering progress ✅ ✅ ✅
Zoom mode ✅ ✅ ✅
Full-screen mode ✅ ✅ -
Playlists support ✅ - -
Change playback rate - ✅ ✅
Player controls on locked screen support - - -
Subtitles support - - -
Languages support - - -

Getting Started

To add video playback functionality, include the following XAML snippet:

<MediaPlayerElement Source="ms-appx:///Assets/SampleMedia/myfile.mp4"
                    MaxWidth="400"
                    AutoPlay="False"
                    AreTransportControlsEnabled="True" />

Make sure to enable the required feature in your UnoFeatures to include the necessary packages. Add MediaPlayerElement; as shown below:

<UnoFeatures>
<!-- Existing features -->
+  MediaPlayerElement;
</UnoFeatures>

iOS

Add the following to your info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionMinimumTLSVersion</key>
    <string>TLSv1.2</string>
</dict>

Note: Don't just copy/paste, but properly setup NSAppTransportSecurity as required by your project

Android

Add the following to your AndroidManifest.xml

<!-- Required to play remote media -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- Required to keep the screen on while playing -->
<uses-permission android:name="android.permission.WAKE_LOCK" />

Skia

On some weaker devices, the first load of a MediaPlayerElement instance is extremely slow. To attempt to preload media playback resources on app startup, enable the PreloadMediaPlayer option in the host builder where supported.

var host = UnoPlatformHostBuilder.Create()
            .App(() => new App())
            .UseX11(hostBuilder => hostBuilder.PreloadMediaPlayer(true))
            .UseWin32(hostBuilder => hostBuilder.PreloadMediaPlayer(true))
            .Build();

Future improvement

  • React to audio focus changes (pause/stop playback or reduce audio volume)
  • Subtitles support
  • Languages support
  • Buffering of next playlist element when using MediaPlaybackList
  • Cast to device
  • Playlist for Wasm
  • Download option

Known issues

  • [iOS] Volume flyout does not display (Uno issue)
  • [All] Dynamic width/height not supported when playing audio
  • [All] Sometimes flickers during resizing when using dynamic width/height