Fabulous.MauiControls.MediaElement 10.0.4

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package Fabulous.MauiControls.MediaElement --version 10.0.4
                    


                    

                
NuGet\Install-Package Fabulous.MauiControls.MediaElement -Version 10.0.4
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Fabulous.MauiControls.MediaElement" Version="10.0.4" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Fabulous.MauiControls.MediaElement" Version="10.0.4" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Fabulous.MauiControls.MediaElement" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Fabulous.MauiControls.MediaElement --version 10.0.4
                    


                    

                
#r "nuget: Fabulous.MauiControls.MediaElement, 10.0.4"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Fabulous.MauiControls.MediaElement@10.0.4
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Fabulous.MauiControls.MediaElement&version=10.0.4
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Fabulous.MauiControls.MediaElement&version=10.0.4
                    


                            Install as a Cake Tool

MediaElement for Fabulous.MauiControls

The MediaElement control is a cross-platform view for playing video and audio. You can find all the details about this control in the .NET MAUI Community Toolkit Media Element documentation.

alternate text is missing from this package README image

How to use

Please see the HelloMediaElement sample app in this repo to see a working example, or follow the steps below to get up and running with the MediaElement.

Initial Set-up

1: Add the Fabulous.MauiControls.MediaElement package to your project.

2: Add .UseFabulousMediaElement() to your MauiProgram after .UseFabulousApp().

open Fabulous.Maui.MediaElement

type MauiProgram =
static member CreateMauiApp() =
    MauiApp
        .CreateBuilder()
        .UseFabulousApp(App.program)
        .UseFabulousMediaElement()
        ...
        .Build()

3: Open Fabulous.Maui.MediaElement at the top of the file where you declare your Fabulous program (eg. Program.stateful).

open Fabulous.Maui.MediaElement

The MediaElement uses native media controls under the hood that shouldn't require any additional config i.e. in general you probably won't need to touch AndroidManifest.xml on Android or info.plist on iOS.

However, you will need to make sure that your app has the relevant permissions to access to the source of the media you are planning on playing with the media element. e.g. if you are going to be playing remote media from a url then your app will require permissions to make network requests, but it will most likely have these permissions by default anyway.

Using the MediaElement Widget

Now you can use the MediaElement widget in your Fabulous app as follows:

MediaElement()
    .source("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")
Binding to the MediaElement's properties

You can access and bind to the MediaElement's properties by using modifiers. E.g. you can set the ShouldAutoPlayproperty to true as follows:

MediaElement()
    ...
    .shouldAutoPlay(true)
Note: The widthRequest and heightRequest properties have been renamed width and height in Fabulous, for convenience.
Binding to the MediaElement's events

To bind to the MediaElement's events you can also use the corresponding modifiers. E.g. if you'd like to bind to the MediaOpened and OnPositionChanged(Position) events then you can do the following:

type Msg =
| MediaOpened
| PositionChanged of System.TimeSpan

...

MediaElement()
    .onMediaEnded(MediaEnded)
    .onPositionChanged(fun x -> PositionChanged(x.Position))
Using a controller to call the MediaElement's methods

To call the MediaElements's methods (e.g. Play, Pause, etc...) you can use a controller as follows:

let controller = MediaElementController()

    let update msg model =
        match msg with
        ...
        | VideoPaused -> model, Cmd.none

let pauseVideoCmd () =
    async {
        do controller.Pause()
        return VideoPaused
    }
    |> Cmd.ofAsyncMsg

...

MediaElement()
    .controller(controller)

A full, working example is included in the HelloMediaElement sample project in the /samples directory.

Accessing read-only bindable properties

You can access read-only bindable properties of the media element as follows:

let mediaElementRef = ViewRef<MediaElement>()

let update msg model =
    | Msg ->
    mediaElementRef.Value.Duration // Here you will get the read-only value
    model


let view model =
    VStack() {
        MediaElement(...)
        .reference(mediaElementRef)
    }
Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
10.0.4 109 10/12/2026
10.0.3 103 9/30/2026
10.0.2 98 9/27/2026
10.0.1 161 9/7/2026
10.0.0 138 8/24/2026
2.0.0 651 3/3/2023

### Added
- Add unit tests for `Reconciler.update`, covering that it forwards exactly one diff to `IViewNode.ApplyDiff`, correctly reports scalar-attribute added/unchanged/changed cases, and handles a missing previous widget and an attribute-less widget pair (Repo Assist, #1341).
- Add unit tests covering `WidgetDiff.ScalarChanges` diffing (Added/Removed/Updated cases, empty prev/next, and the `SkipRepeatingScalars` duplicate-key behavior) (Repo Assist, #1311).
- Add unit tests for `WidgetDiff.EnvironmentChanges`, covering empty prev/next, all-Added/all-Removed cases, `Updated` on differing values, no-op on identical values, disjoint key sets, and the `SkipRepeatingScalars` duplicate-key dedup behavior (Repo Assist, #1312).
- Add unit tests for `WidgetDiff.WidgetChanges`, covering Added/Removed/Updated/ReplacedBy cases, empty prev/next, no-op on identical widgets, `canReuseView` true/false branching, and disjoint attribute sets (Repo Assist, #1316).
- Add unit tests for `WidgetDiff.WidgetCollectionChanges` and `WidgetDiff.WidgetCollectionItemChanges` diffing, covering attribute-level added/removed/updated collection attributes and item-level insert/replace/update/remove behavior for collections of differing lengths (Repo Assist, #1332).

### Changed

- Simplify `Cmd.map`'s closure composition to avoid allocating an extra intermediate function per effect on every call (Repo Assist, #1357).
- Implement `CollectionBuilder.YieldFrom` using `MutStackArray1.addMut` directly (addressing a `TODO` left in the code), avoiding the intermediate `Seq.map`/`Seq.toArray` allocations previously used to compile a sequence of widgets (Repo Assist, #1357).
- Revise the Windows development instructions in the MAUI tutorial and get-started guide, the MAUI/Avalonia tutorials and get-started guides, and the migration guide, and update the website index page and header.
- Change the MAUI template (`Fabulous.MauiControls.Templates`) to generate an unpackaged Windows project by default: `NewApp.fsproj` now sets `WindowsPackageType=None` with the FS0226 workaround (`WindowsAppSdkUndockedRegFreeWinRTInitialize=false`), and `Properties/launchSettings.json` uses the `Project` command instead of `MsixPackage`. F5 debugging in Visual Studio and `dotnet run` now work on Windows without manual edits. This only affects projects created with this template version or later; projects generated earlier keep their current setup and can be converted by hand as described in the MAUI tutorial. To use MSIX packaging in a new project, set `WindowsPackageType=MSIX` and use `MsixPackage` in `launchSettings.json` (#1408, #1409).
- Update the MAUI tutorial for the unpackaged Windows default: keep the manual conversion steps for projects created before 10.0.4, fix the "Why not packaged (MSIX)?" anchor links, and document how to switch back to a packaged build (#1410).
- Update the `FSharp.Maui.WinUICompat` README to reflect that the Fabulous MAUI template now generates an unpackaged Windows project by default, while the stock MAUI template and earlier Fabulous templates still use `MsixPackage` (#1412).
- Change the MAUI samples to build as unpackaged Windows applications, matching the updated MAUI template: each sample's `.fsproj` now sets `WindowsPackageType=None` with the FS0226 workaround, and `Properties/launchSettings.json` uses the `Project` command instead of `MsixPackage` (Repo Assist, #1411, #1413).

### Fixed

- Correct the `Cmd` module migration section in `docs/guides/migration.md` (Repo Assist, #1391).