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 withMediaSource.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