Fabulous.MauiControls.MediaElement
2.0.0
dotnet add package Fabulous.MauiControls.MediaElement --version 2.0.0
NuGet\Install-Package Fabulous.MauiControls.MediaElement -Version 2.0.0
<PackageReference Include="Fabulous.MauiControls.MediaElement" Version="2.0.0" />
paket add Fabulous.MauiControls.MediaElement --version 2.0.0
#r "nuget: Fabulous.MauiControls.MediaElement, 2.0.0"
// Install Fabulous.MauiControls.MediaElement as a Cake Addin #addin nuget:?package=Fabulous.MauiControls.MediaElement&version=2.0.0 // Install Fabulous.MauiControls.MediaElement as a Cake Tool #tool nuget:?package=Fabulous.MauiControls.MediaElement&version=2.0.0
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.MauiControls.MediaElement
type MauiProgram =
static member CreateMauiApp() =
MauiApp
.CreateBuilder()
.UseFabulousApp(App.program)
.UseFabulousMediaElement()
...
.Build()
3: Open Fabulous.MauiControls.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 ShouldAutoPlay
property 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 | net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net7.0
- CommunityToolkit.Maui (>= 4.0.0)
- CommunityToolkit.Maui.MediaElement (>= 1.0.2)
- Fabulous.MauiControls (>= 2.3.0 && < 3.0.0)
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 |
---|---|---|
2.0.0 | 343 | 3/3/2023 |
### Added
- Initial release