.NET MAUI – CommunityToolkit – MediaElement

The most requested feature from Xamarin.CommunityToolkit package, MediaElement, is now ported to the .NET MAUI CommunityToolkit following the MAUI’s very own handler-based implementation.

Due to the dependencies involved, this is released as a separate NuGet package titled CommunityToolkit.Maui.MediaElement. The NuGet package is now available to access from the public NuGet feed. The stable version supports only .NET 7 and .NET 6 backward compatibility supported in the earlier developer preview version is now out of context.

It is highly recommended to update to this latest v1.0.1 release as this aligns with the .NET MAUI’s implicit Windows AppSDK package dependency.

This MediaElement is supported on Android, iOS, macOS, Windows, and Tizen. Follow the below steps to play Audio/Video in a .NET MAUI app.

Step 1:

Launch the NuGet Package Manager window (option available in the Project context menu – Manage NuGet Packages …).

From the Browse tab, look for the package named CommunityToolkit.Maui.MediaElement and add the latest release of the package to the project.

Can also be added from the CLI with the below command.

dotnet add package CommunityToolkit.Maui.MediaElement --version 1.0.1

Step 2:

For the MediaElement handlers to get registered in the .NET MAUI startup pipeline. Call this UseMauiCommunityToolkitMediaElement() method on the MauiAppBuilder object. This change needs to be done in the MauiProgram.cs source file.

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder.UseMauiApp<App>()
           .UseMauiCommunityToolkitMediaElement()
           .ConfigureFonts(fonts =>
           {
               fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
               fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
           });
 
    return builder.Build();
}

Step 3:

In the XAML page/view of your interest, add the following XML namespace to the root element:

Note: From the developer preview, the namespace has been updated to CommunityToolkit.Maui.Views to better align with the other offerings from the CommunityToolkit.Maui. Hence the URL-based xml namespace also works fine.

xmlns:media="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui.MediaElement"

xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

And then make use of the MediaElement view within the content:

Note: In this sample, have set the source to the Oct 2022 episode of the .NET MAUI Podcast – https://www.dotnetmauipodcast.com/115-2 (Source is one of the bindable properties, which can also be set from the ViewModel property).

<media:MediaElement ShouldAutoPlay="True" Source="https://chtbl.com/track/84EGD/aphid.fireside.fm/d/1437767933/306e7564-d5eb-4af3-b3b2-e6aa1f21a9ce/8d384f50-213b-4345-9cbe-3a890db26bdd.mp3" />

<mct:MediaElement Source="embed://Intro.mp4" />

To play the media that is packaged as part of the App as an embedded resource, use the embed:// URL scheme. Add the media file to the Resources\Raw folder and set its BuildAction as MauiAsset. Here, the Source property is set assuming the media file is placed directly under the Raw folder. If it’s in a sub-folder, the Source URL needs to be updated accordingly. To know more about how to manage app resources in a .NET MAUI app, take a look at this article.

If ShouldAutoPlay property is set to false (default value, if not defined), then media needs to be commenced with Play() method.

MediaElement supports both Audio and Video playback (mp3, mp4) … And Live Streaming with HTTPS (HLS) is also supported.

Note: The ones marked in italic font faces are the ones updated/introduced in the stable release.

This has multiple BindableProperties such as ShouldAutoPlay, CurrentState, Duration, ShouldLoopPlayback, Position, ShouldShowPlaybackControls, Source, Speed, MediaHeight, MediaWidth, Volume, and ShouldKeepScreenOn.

And exposes the following events to interact with: StateChanged, PositionChanged, MediaEnded, MediaFailed, MediaOpened, and SeekCompleted.

And the following methods to control it: Play(), Pause(), Stop(), and SeekTo().

A working sample for .NET 7, following all these steps, is now uploaded into my GitHub samples repository. Check out the src/MediaElement folder for the projects.

Adding this NuGet package and configuring it in the MauiProgram.cs is now automated in the All-in-One .NET MAUI Project and Item Templates package. Supported in v2.3.0 or higher version.

Install the CLI template using the below command:

dotnet new install VijayAnand.MauiTemplates::2.3.1

mauiapp is the short name to create the .NET MAUI app and -ime / --include-media-element is the parameter name that opt-in for including and configuring the MediaElement NuGet package.

dotnet new mauiapp -o MediaApp -ime

For a detailed list of supported parameters to include/configure some of the most important toolkits, run the below command:

dotnet new mauiapp -h

The same is supported via the Project Creation UI itself after installing this Visual Studio 2022 extension.

Happy coding. Stay connected as we continue to learn and share the experiences from this exciting journey of being a .NET developer.