Fabulous.MauiControls.MediaElement
10.0.1
dotnet add package Fabulous.MauiControls.MediaElement --version 10.0.1
NuGet\Install-Package Fabulous.MauiControls.MediaElement -Version 10.0.1
<PackageReference Include="Fabulous.MauiControls.MediaElement" Version="10.0.1" />
<PackageVersion Include="Fabulous.MauiControls.MediaElement" Version="10.0.1" />
<PackageReference Include="Fabulous.MauiControls.MediaElement" />
paket add Fabulous.MauiControls.MediaElement --version 10.0.1
#r "nuget: Fabulous.MauiControls.MediaElement, 10.0.1"
#:package Fabulous.MauiControls.MediaElement@10.0.1
#addin nuget:?package=Fabulous.MauiControls.MediaElement&version=10.0.1
#tool nuget:?package=Fabulous.MauiControls.MediaElement&version=10.0.1
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.
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 | Versions 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. |
-
net10.0
- CommunityToolkit.Maui (>= 4.0.0)
- CommunityToolkit.Maui.MediaElement (>= 1.0.2)
- Fabulous.MauiControls (>= 10.0.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
### Added
- Document how to build, run, and debug the generated MAUI template's `net10.0-windows10.0.19041.0` target in the MAUI tutorial (#1171).
### Changed
- Fix the MAUI get-started documentation to reference `net10.0-android` / `net10.0-ios` instead of the retired `net7.0-android` / `net7.0-ios` TFMs (Repo Assist, #1174).
- Document the triage of the 60 `FS0044` deprecation warnings from the MAUI Release build in `.github/RELEASE_CHECKLIST.md`; none of the flagged `EntryCell`, `SwitchCell`, `Page.IsBusy`, or per-edge safe-area APIs have been removed from the supported MAUI 10 baseline (#1148).
- Mark the excluded, Xamarin-era legacy documentation trees under `docs/advanced`, `docs/basics`, and `docs/samples-and-tutorials` with an unmistakable legacy content notice (Repo Assist).
- Require an entry in `CHANGELOG.md` for every pull request, documented in `AGENTS.md` (Repo Assist).
- Replace retired docs.fabulous.dev links across `docs/` with the current documentation site at https://fabulous-dev.github.io/Fabulous/ (Repo Assist, #1207).
- Pin `actions/github-script` to a commit SHA (v9.0.0) in `pr-artifacts.yml` for supply-chain safety (#1301, #1300).
### Fixed
- Default the `fabulous-mauicontrols` template's Windows target to `RuntimeIdentifier=win-x64` / `Platform=x64` (when not already set by the caller) so `dotnet publish` for `net10.0-windows10.0.19041.0` no longer fails with `error: Packaged .NET applications with an app host exe cannot be ProcessorArchitecture neutral`, and document the workaround in the deployment guide (Repo Assist, #1286).
- Regenerate `docs/api/source-inventory.md` via `eng/monorepo/generate-api-reference.py` so the Build website CI check passes again (Repo Assist, #1283).
- Rename `website/themes/fabulous.dev-theme` to `website/themes/fabulous-theme` and update the SCSS `@import` paths in `website/assets/sass/root*.scss` accordingly, matching `theme = 'fabulous-theme'` already set in `website/config.toml` (Repo Assist, #1264).
- Fix `StackArray3.sortInPlace` using the wrong key (`v1` instead of `v2`) for the third element when sorting a 3-element `StackArray3`, which could produce an incorrectly ordered result (Repo Assist, #1170).
- Fix NU1605 package downgrade warnings when building a new project from the MAUI template by aligning the template's default `Microsoft.Maui.Controls`/`Microsoft.Maui.Controls.Compatibility` version with Fabulous.MauiControls's minimum required version (#1171).
- Bump the `fabulous-avalonia` template's default `FSharp.Core` package version from the stale 8.0.301 to 10.0.100, matching the `fabulous-mauicontrols` template (#1179).
- Update the website home page's "Choose your own adventure" section to link to the current MAUI and Avalonia get-started docs instead of the archived Fabulous.MauiControls, Fabulous.XamarinForms, and Fabulous.Avalonia repositories, and remove the outdated paid/commercial support section (Repo Assist, #1166).