Maui CommunityToolkit MediaElement
I'm trying to use the
MediaElement
component from CommunityToolkit.Maui
to add a media player. Their guide supports 3 different schemes(?) as defined here: https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/views/mediaelement?tabs=windows
I don't want to use a URI resource, I would prefer to use either an embed://
or filesystem://
source but I don't know how to set either of them. I've tried filesystem with no luck. Assuming my .mp4
is located at Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"Assets\Music\guidgen.mp4")
what would the corresponding filesystem://
or embed://
value be?MediaElement - .NET MAUI Community Toolkit - Community Toolkits for...
This article explains how to use MediaElement to play video and audio in a .NET MAUI application.
157 Replies
In the same link you provided it explains how to use embed: https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/views/mediaelement?tabs=android#play-media-embedded-in-the-app-package
it also explains that if u dont want to do it from xaml u have to use
that doesnt work
MediaSource.FromFile() or MediaSource.FromResource()
and where are u placing the file? are u marking the file as resource in the properties?
that doesnt give a
string
are u doing blazor with maui?
yeh
idk, nothing ive tried from their docs work
err, everything ive tried from their docs, none of it works
well FromResource works for me just fine
song.mp3 is inside Resources/Raw as described in the docs
and is set as MauiAsset
which would be equal to doing
Source="embed://song.mp3" via xaml
but unhappily I do not know how that translates over to blazor
so I can't help u on that end
where did it say to put the files in Resource\Raw?
all I can say is it works on maui
that is to handle it as resource
embed
Raw is the root level you can further add folders if u want to organize
show me your component code
and then it would be say Raw/Videos/somevideo.mp4
I also suggest u to not have files with space and weird characters
what component code? my XAML?
I just added the xmlns and mediaelement to it with a x:Name to access it from code behind for a quick sample
im not using blazor so I doubt it will serve to any reference
oh, thats xaml
yeah I dont do blazor
that is pure MAUI
ah
i dont know how to do that
whats the namespace i need to add?
the package name is CommunityToolkit.Maui.MediaElement but to get the MediaSource it added
using CommunityToolkit.Maui.Views;
i mean the xaml namespace
i found it
although i have no idea what to do now so ill have to learn xaml
👆
u can also refer to their sample here https://github.com/CommunityToolkit/Maui/blob/main/samples/CommunityToolkit.Maui.Sample/Pages/Views/MediaElement/MediaElementPage.xaml#L6
@A Certain Scientific Railgun maybe u could try asking for support on $mauitoolkit
the devs are very active there
and answer questions often so they might be able to help u with how u bridge the mediaelement between maui and blazor
if u havent got it yet
nice!
im gonna have to go learn MAUI first cause I have no idea how to do anything in there that isnt blazor
yeah I would imagine u dont use the community toolkit for this but some blazor media element
and u just give blazor the resource
https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/static-files?view=aspnetcore-6.0#net-maui
so in this scenario I would expect song.mp3 to be just FileSystem.OpenAppPackageFileAsync("song.mp3");
so yeah u would just use a video element or something I guess
or something around those lines
so make my own component
and not even need communitytoolkit
I dont think communitytoolkit works on blazor thou
let me check
I mean the "controls" one
yeah I dont see any reference that the community toolkit controls would work directly on blazor
it does for maui, winui3, uwp etc
https://github.com/CommunityToolkit/WindowsCommunityToolkit/discussions/4141
not bad
learning xaml is not bad imo it open doors for a lot, but since you're previously webdev it makes sense to go for blazor
https://github.com/Blazored/Video
anyway see if that works for u
I wonder myself if it would because I honestly dont know if blazor would be able to pick that file in that way
but apparently that could work the documentation is not very clear tbh
https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/single-project?view=net-maui-8.0#raw-assets
alternatively there is this https://stackoverflow.com/a/78475703/342740
assuming it doesn't let u access the asset direclty
I didn’t know audio and video were native html elements
yeah they have been for a good while on html5
yeah, i just search for how to play audio file in blazor
and it gave me community toolkit
maybe u had maui included in it
possibly
this doesnt work
this doesnt work
how frustrating this is lol
everything ive tried does not work
I dont expect this to work, but I expect this to at least set the source to the name in there does it do that?
I expect this to work
because u need access to the file
and that seems logical since you're doing it from blazor and not maui
so you're essetially creating a bridge between maui and blazor with the jsinterop
and passing over the stream
which u obtain from the filestream but I assume u might need to use the
FileSystem.OpenAppPackageFileAsync
instead of just FileStream just a hunch since you're on maui
it adds that
yes but did u look at the source
how do i see that?
developer's tool?
and then u check if this was set properly <source src="@_source" type="video/mp4">
it added the souirce
so it added
i nested it under a folder called Audio
ok thats good
sure and its inside Resources/Raw/Audio?
so its Resource\Raw\Audio\guidgenmp4
ok good so we know blazor cannot access those resource directly like that
it seems like its missing something
so u do need to go that other route apparently
what file do i place that js function in?
nvm
what path does this need to be?
"/data/user/0/com.mypackage.whatever/files/Content/VideoContent/MyVideo.mp4"
relative to Raw?https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/static-files?view=aspnetcore-6.0#net-maui
I suppose u would need to use FileSystem.OpenAppPackageFileAsync
there is an example there
so u would need only the relative path Audio\guideen.mp4
it works
its a slow on the start
I would hope there is an easier way to do it but I dont do blazor so I really dont know
i would hope so too
thanks for all the help
yeah because its loading the whole stream to pass over
I would have expected the resources to be available in the root folder
and that u would be able to just use the path
i wonder why i cant just host the file as a static file in wwwroot
maybe you can I dont know, maybe instead of making the mp4 a mauiasset
u make it available in the blazor project
so it would be available in the wwwroot
and u can u just call the path
yeah
im sure theres some benefit to putting it in Resource
which if the file is public anyway makes sense
I doubt given this is a emulation
if it was for maui itself I am sure
but since its maui wrapping blazor in a webview
¯\_(ツ)_/¯
HA
that works
there could also be limitations on say the webview not letting u play local files or something
as a mauiasset?
ah ok
in the blazor root
yeah
and that will be faster anyway as long as the file is not sensitive or anything and u can make it available
yeah, idc if its public
currently its a free rip of a yt video
🫡
but i would replace it with a file that i got from an official free mp4 sample site
like free stock photos but audio files
or ask my music friend for one
whatever floats your boat its working and u know both ways of doing it
althou I would hope it could use the mauiassets what a shame
whats the benefit of maui assets?
a centralized way to store assets?
ill have to make this app and have it be my first public repo
or do a Hello world console app in as many languages that will support it
well because its embed so technically it would not ask u for access or anything to run the video
that work around seems jank
because the filesystem on winui3,android and ios suck balls
its not like when u write a console app and can directly call say FIle.ReadAllLines
ur tied to an API where u need to request access to certain things
so reason why u need to add certain rules to the config options if ur writing it for android for example
i think iOS does that in the name of security
that tells the user before ahead this app use this that and this
do u agree
right
I mean so does android right
when u want to share a file in app X
iOS keeps reminding me its been x months since some app has had full access to photos, do i want to keep allowing it?
it says I need access to this and that
do u agree
before u can select photos or w/e from your storage
android does have something like that as well
"Mango's awesome guid generator wants access to your files to play a fire edm song, do you concur?"
either way if you're doing public stuff to demonstrate your knowledge for your cv
then I would suggest u learn blazor by it self nad maui by it self
there is only benefits to knowing xaml
ive dabbled in blazor a bit
but that was during the .netcoreapp3.1 days
it hasnt changed significantly since then, other than the new hosting models
and that its much faster then before
but still slow
and that
i still dont think its as mature as the JS offerings
but depending on what you want, its more than enough
well its obviously not because u still need to write js in it
perhaps u could look at Hydro
you dont NEED to
but then again its not backed by any big companies
you can
you do need to depending on what you're doing
as there are limitations of what blazor can do for u
yeah
Hydro extends it further
i had to when i was wanting to call bootstrap jQuery methods
which is cool
basically anything client side
localstorage
cookies
Hydro | Hydro
Stateful components for Razor Pages
i dont often find myself needing guid literals for stuff
but when i do
i dont want to have to go to ssms or some website do get one
i want to use a Guid generator thats blasting edm music like its 2005
this is the background im using
:bigthonk:
what am i thinking??
if im going to have a background of our goddess, then i have to use a Hatsune Miku song
PR denied
question, how do i give the page a title? I thought it was this property on
MainPage.xaml
Title=
nothing is showing
because that is not the shell so I think u either need to disable the backbutton in the shell or mmm
or just set the title in the shell
or alternatively u remove the bar and handle it all from blazor
in the Shell.xaml in the header u add
Shell.NavBarIsVisible="True"
then u should be able to see the title per ContentPage but its like a white bar at the topI’ll have only one page
I know Blazor has a
PageTitle
component. Tried it, doesn’t workbut that is for the browser page title
it would set the html <title ...>
inside the header
u would need to the set the maui counter part
either u do it in the shell and forget
or do it in the content page and set the navbar I mentioned above
i dont have a Shell.xaml
AppShell?
can u show me your solution explorer I dont know which template u used to create it
I see so its the non-mvvm approach, so I assume your MainPage has all the stuff
i guess so?
does it have 2 projects?
or that is all
can u show me what your MainPage.xaml looks like
and your App.xaml
I see
since u dont have a shell I honestly dont know, maybe try setting appWIndow.Title = "..."?
well, its not in the MainPage
that would be in the last file u posted above
just wonder if it has a Title property
trying this now https://stackoverflow.com/questions/70258689/how-to-set-window-title-for-a-maui-blazor-app-targeting-windows
Stack Overflow
How to set window title for a MAUI Blazor App targeting Windows?
Ive created a small application from the MAUI Blazor app template in MAUI preview 10 and have it targeted and running on windows. I however wish to set the title of the application which I imagined...
u already have the appWindow in the code above
it would be a matter of u doing what I just said
appWIndow.Title = "..."?
no dice
what about with the override method in the link above?
this did it:
the
CreateWindow
override methodyeah probably because it needs to be done on creationg which is why it works on lifecycle
xaml is hella strange
so thats the standard for desktop UI?
winui3 and maui are a different beasts
but no that is not
if u had a shell
all u had to dos is set the title
but u used some old template or something
i used what it gave me for Maui Blazor Hybrid
I see, yeah I never tried that to know
normally u have a shell
and setting it there is all u need to do
with the NavBarIsVisible to true
normally on a desktop app the title never changes regardless of what "view" or "page" you are on
web is different
when I use Spotify, the title is always "Spotify"
etc
$itdepends
I for one like appending to the title
so it changes
it depends on what the PO wants i guess
when I use spotify the title is always Spotify - song playing
if the PO says "static title"
sure
actually, i dont even see a title rn
are u doing this just for windows?
yeah, its for me
windows only
i dont have linux
I mean maui doesnt do linux anyway
Avalonia is much better option for desktop thou
ill try that next
im doing this app for the lulz
anyway, I dont know as I dont use blazor hybrid I have no idea what kind of maui template it uses
me neither
i only know the blazor aspect of it
the only maui parts i had to touch were setting the default window size and setting the title bar text
everything is blazor
this is the only page it has:
but why a input box thou
bind it to some text with transparency to make it look cooler
true, it actually can be just in a <p> tag or not
also, wip
i dont drop character until ive done the dvd commentary
is hotreload supported on apps like these?
it is on standalone blazor apps
maui does support it dunno about hybrid blazor
80% opacity on the guid background
its not a text input anymore