How to Use the MediaElement in Xamarin.Forms

We explore the MediaElement in Xamarin.Forms — a new way to easily include audio and video in your Xamarin.Forms apps.

Easy Media Playback in Xamarin.Forms 4.5

Looking for a straightforward way to include audio and video media in your Xamarin.Forms app? Take a look at the new, and currently "experimental" control, the MediaElement. This control, available in v.4.5, renders a media player on your page, along with default OS controls. Alternatively you can provide your own UI and get the exact look and feel that you want.

Set the Flags

As this control is still in preview, you'll need to opt-in to use it. Just set the following flag in your app.xaml.cs before the call to InitializeComponent():

Device.SetFlags(new string[]{ "MediaElement_Experimental" });

Display Settings

The MediaElement display properties include VideoHeight, VideoWidth and an Aspect property that works pretty much the same as an Image element. So AspectFill will keep the source aspect, filling the entire height and width but may bleed outside, while AspectFit will also maintain the source aspect, but fit within the height and width of the control. Fill will fill the height and width regardless of the aspect.

URI or Local Sources

The Source property can be set to either a URI or a local path if you want to embed the media into your application package:

<MediaElement Source="https://sec.ch9.ms/ecn/ch9/wp7.mp4"
  ShowsPlaybackControls="True"
  VerticalOptions="FillAndExpand" />

or

<MediaElement Source="ms-appx:///wp7.mp4"
  ShowsPlaybackControls="True"
  VerticalOptions="FillAndExpand" />

If you are following along with your own app, be aware that the video in the sample code is 250 MB, so you might want to make sure you are on WiFi.

(The VerticalOptions is required at the time of writing due to a layout issue — you may find it unnecessary, depending on your specific version.)

Note the use of the "ms-appx" scheme for the local source and the following locations if using local media:

• On iOS, media files must be stored in the Resources folder, or a subfolder of the Resources folder. The media file must have a Build Action of BundleResource.
• On Android, media files must be stored in a subfolder of Resources named raw. The raw folder cannot contain subfolders. The media file must have a Build Action of AndroidResource.
• On UWP, media files can be stored in any folder in the project. The media file must have a BuildAction of Content.

By default, the media will begin playing as soon as it's loaded, so if that's all you need then you're done!

In Control

By default, the platform's native media controls will be used, but it's pretty straightforward to prevent that if you want to provide your own.

Set ShowPlaybackControls="False" and use the Play(), Pause() and Stop() methods to control playback with your own buttons.

You can further tweak the experience using some extra properties:

• AutoPlay specifies whether the media will automatically begin playing upon loading
• Volume controls the volume
• CanSeek specifies whether seeking is enabled
• IsLooping controls automatical repeat when playback ends

You can also hook into a selection of events that will help you give a little polish to your app. You could use them to drive loading indicators or custom playback controls:

• Opening, when the control is attempting to open and validate the source
• Buffering, the media is loading
• Playing, the media is currently playing
• Paused, playback is paused and the control is displaying the current frame
• Stopped, the control contains media but is not playing or paused; in this state the control will display the first frame
• Closed, a transparent frame is displayed as the control has no media

Keeping the Lights On

There is one more property that you may find useful — KeepScreenOn. Set this to True and the device should keep the screen on during playback.

Wrapping up

The MediaElement makes it really easy to get your media playing in your cross platform apps. Check out the official docs for more information.