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.
• 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 MediaElement; as shown below:

<UnoFeatures>
<!-- Existing features -->
+  MediaElement;
</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" />

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