The moment a lot of people have been
waiting for is finally here. We have ported the MediaElement
to .NET MAUI. With this, we get a control that allows you to
play audio and video inside of your .NET MAUI app. Let's go check
it out. You might already know about the
MediaElement from the Xamarin Community Toolkit, where it's still available
for your Xamarin.Forms applications. And it allows you to play audio, video
and video from within your own app. Now we've rebuilt it from the
ground up. It's still called Media Element, but now we've reimplemented
it for .NET MAUI. So now you can play audio and video
files, even live streams, HLS some amazing cool things from your
.NET MAUI application. In this video, we're
going to see how to get started with the MediaElement. And at the end of
the video, I'm going to talk a little bit about what it can and can't
do and where the future is going for this marvelous control. Let's
switch over to my computer and see how to get started yourself. Can
everyone see my screen? Oh, wait, this is not an online meeting. This is
my YouTube video. Of course you can see my screen. All right, here we are
in Visual Studio 2022. I just created a File, New .NET MAUI application and
to get started with the MediaElement, we need to install the library
for that. Now, while it lives with the Community
Toolkit, it doesn't really have a dependency on the Community
Toolkit and it lives in a separate package. So, let's just right
click on our project in the Solution Explorer, Manage NuGet Packages and
we're going to search for CommunityToolkit.Maui.MediaElement and it should pop up.
At the time of recording, it should have version 1.0.1. We
already had a minor update so that we could get rid
of a crazy little bug that was preventing you from having a
nice first time experience. So we have this and we have a couple
of dependencies here actually, for Android, we're using the ExoPlayer
now, which gives us a lot of opportunity out of the box for some
nice stuff. And the thing that you can take from
here is that it supports .NET 7. So from .NET 7 and up is the
support which a couple of people already asked like,
hey, but .NET 6 is the long term support version. Yes. For the bigger
.NET framework, that is definitely the case. For .NET MAUI, the support policy
is a little bit different. So for .NET MAUI apps, you probably want to be on
the latest net version anyway. If that confuses you, I can totally
understand. Let me know down in the comments and I'll maybe make a video explaining
how that all works. So .NET 7 and up, just install this
on your project, don't need anything
else. You can see all the dependencies that are coming in here and we click.
OK. Make sure that you read all the license agreements. I already
did so I can accept them. And whenever you do, we're going to be presented
with that README. Now I'm going to explain all of this
to you. And we're developers so we're not going to read documentation
anyway. But the thing that's really neat about this README is that we can copy
and paste this little line right here. So let's just close this one and go
over to our MauiProgram.cs. Go to your Solution Explorer,
MauiProgram.cs and here we have our AppBuilder,
right? And you can see it already starts giving us reds squiggles saying
that we need to use UseMauiCommunityToolkitMediaElement, that
call in our App Builder because it sees that we have
included our Media Element package, but we didn't do the
initialization line yet. Smart, right? Because we know you don't read
documentation. So we included something so that you cannot build your app
without doing the proper thing here. So let's just paste that in here. You can also
type it yourself of course: UseMaui CommunityToolkitMediaElement and
make sure that that imports this: using CommunityToolkit.Maui. Now you're all
good to go. You don't need any extra
permissions. Of course if you're going to do things
from the file system then you might need extra permissions. But
just for playing videos from remote URLs, you're not going to need any extra
permissions or other stuff. So we're done with this MauiProgram.
Let's close that and we're going to go to our MainPage.xaml. Now one
other thing that we want to do before we get started here is add
that XML namespace so that we can actually grab the toolkit
without doing all kinds of crazy stuff. So we're going to say xmlns. I'm
going to name this toolkit, you can name the toolkit part,
whatever you want to make it more recognizable or shorter or whatnot. And here just
search for toolkit and you will get this URL kind of thing which,
the only thing this does is bundle all the namespaces
that are inside of this toolkit package under one identifier here, which is the toolkit. So that
you don't have to specify a number of separate XML namespaces. Here I'm
going to leave this ScrollView, VerticalStackLayout and I'm going to
remove all of this. Maybe keep the Button so I can trigger
some functionality there. But now what I can do is add this
toolkit:MediaElement and boom. We've implemented the
MediaElement. There we are. There is a couple of other things that
you might want to do. So you might want to set a WidthRequest,
let's set that to 400, a HeightRequest, 300, something like
that. And of course you want to set a Source right? Now I don't know
where this came from, if you do know, please let me
know down in the comments. For all media players, it seems like everyone
is doing something with Big Buck Bunny, which is an
animated little movie and every media player that's being
demoed basically shows that movie. So I have this link right here that
will actually show us that as well. And let's just deploy this to Android
and you can see the MediaElement showing up on Android with just, you
know, two lines of code, a little bit of initialization and a little bit of
XAML. Of course, you can also do this in C# code if that's what you want.
And it will start playing this video inside of your .NET MAUI app. So
that is how easy it is. Now, while this is deploying,
let's see some other APIs here. So we have a bunch of other properties. Of
course, I don't know, we can set the Volume, we can set the Speed. We
also have a couple of "shoulds". So ShouldAutoPlay
whenever the media is loaded successfully, should
it automatically start playing? Yes or no? The default is false. So we should see
the MediaElement, but it's not going to play
automatically whenever it pops up. Here we are. We do have some other things. What do
we have? ShouldKeepScreen on. So whenever the media is actually
playing, should it keep the screen on and not go to sleep? Which is more
relevant, I guess, it is definitely implemented for the desktops as well,
but it's more relevant on the mobile devices where your device will not go
to sleep. Whenever a video is playing. ShouldLoopPlayback. So
whenever it reaches the end of the video, is it going to
go back to the beginning and play the full video again. So you can
loop your media like that as well, or should ShowPlaybackControls. So
if we go to the actual Android emulator now, we
can see the playback controls right here from the
platform and ShouldShowPlayback Controls. True or false. Whenever we
set it to false, it's not going to show those controls and you have to do stop
and play and pause, which are methods on the
MediaElement, you should do that yourself. Or you cannot do that and the
user just cannot interact with the video, right?
You're just going to play it in their face. So whenever I start play here,
you can see this Big Buck Bunny video is going to start to play. Of
course there's audio, it's not going to be in this video, but this is just
going here and you can scrub through it. You can go to other
places in the video. You can, I don't know, select the
speed here. You can do all kinds of things. So this is how easy it is to
just get started with playing a video. Now if we stop this and explore a little bit more. So
maybe, let's give this a little reference here. So x:Name=" mediaElement". So I can reference
it from code and let's go to this little button. "Click me", here so
that we actually can show the things here
as well. So maybe I can do something from code here as well and explore
some APIs here. So like I said, we have Play, we have Stop, we have Pause, so we can all do all these
things, right? And I also have a CurrentState, right? So what I can
say here is if mediaElement.CurrentState ==
whatever the state is going to be, so is it
Playing, then it's going to, I don't know what it's going
to do, then it's probably going to Stop or Pause, right? So mediaElement.Pause(); and whenever it's actually else, if (mediaElement.CurrentState == and then we say Stopped or Paused,
then maybe... I said pause, right? We are going to
actually well, we're not going to pause, we're going to play. There
we are. So we have that. And what else do we have? So we
also have like the Position, right? So you can implement a little
slider or some other progress bar that shows the position. We also have
an event PositionChanged. So whenever the position changes, you
can do things with that. I think I already handled the volume.
We have some other events as well. We have MediaEnded. So whenever the end of the media has
been reached. MediaFailed. Whenever something happens, the width
and the height of the media, of course that's only applicable whenever it's a
video and the MediaOpened. So whenever the media has successfully
been opened, all kinds of events that you can work with. So there is already a
lot of power incorporated in this MediaElement right here, which
is pretty cool. Now all these properties that you're seeing here, let's run it
for Windows just for fun so that you can see it runs on Windows as well.
All these properties that you've just seen are also
bindable properties. So you can also just bind to it from XAML and not even
use code at all, which makes it really powerful. Now
this sample is going to be available on GitHub. Find the link down below.
But there's also a sample incorporated in the Community
Toolkit sample app in the repository, which is, I think
it covers all the functionality that's in the MediaElement right now. So if
you're not sure how to do something, definitely go check that out. Here
you can see how it shows on Windows. And I can use this play button, but I
should be able to use this button as well. And you can see that
it starts playing and whenever I click it again, it's going to pause,
right? So you can also use that state and implement your own controls
if that's what you want. And use it with this button. Now this is using it with
a URL. What I also did a short thing that I just
want to show you is in the Solution Explorer, I already added
a resource to my .NET MAUI app. Here in the resources and Raw
folder. I have this. It's called AndroidVideo.mp4 because it came from a
demo where I wanted to show setting a different video for each
platform. So I'm using the Android video right here. But you can use that
inside of your resources. Just stick it in there and don't do anything
else. And then here in your XAML to make sure that it gets it from the
embedded resources, we came up with a little bit of, I don't know,
syntax if you will. So instead of doing this source, I'll put this in
a comment down here so you can see it for the sample code whenever
you get to that. But what you can then also do
is just say embed://. And you can say
AndroidVideo.mp4. It can be in a folder. So if it
would be in a folder called Videos, you could go to Videos,
AndroidVideo.mp4, you can do all of that and whenever it's in
the local file system. So the difference is embedded is delivered with your
application whenever it's on the local file system. So on your C drive, on
Windows for example, you can say filesystem:// and then that
thing, right, that makes it a little bit easier to discover
these things and work with them. So let's just do this. You can also
set it from code, right, where we have like MediaSource
and that makes it a little bit different. But from XAML you
can't do these kinds of stuff right? So you can say MediaSource. I
need to add the right using here and, whoops don't need to do that, and
then I can say FromUri or FromFile or FromResource,
right? So then it's kind of like clear from the context what you're actually
doing. So there we have that. But if you want to do the embed one and I run it
on Windows again, then it's now going to get that Android video.
You're going to see me. So I'm going to be down here, but I'm also going to
be on the screen. So let's just play this. And you can see here
it loads it from that embedded things and it's going to show it here
as well. So that's a little syntactic thing that you can use to make it
easier to play videos from your embedded resources. And that is how easy it is
to get started with the MediaElement for .NET MAUI. This is already pretty
powerful stuff. But there is much more that you can think of
whenever you think of a MediaElement, right? Like playing playlists using
videos with DRM. Digital Rights Management, something like
that. Live streaming. There is live streaming support
already in there. HLS should work HTTP Live Streaming, some other things.
There is a little bit of difference between platforms, what is supported
and what is not. We have the documentation already in place that links to the
platform counterparts that tell more about what formats are
supported, yes or no. So definitely go check that out. The link is down below.
Sending different like custom headers for
accessing, maybe protected resources that you
want to load. There is a lot of stuff to think of whenever you
think of a media player and please let us know in the repository or down
below in the comments at least so I can point you to the right
direction. What is the stuff that is important to you? What do you want to
see in the MediaElement? And of course if you're going to use it
yourself and what did you think, what did you run into? I basically want to know
everything and most of all I want to see amazing projects that you are
building with this. Thank you so much for watching again one of my videos.
Please don't forget to click the like button so even more people get to know
about the MediaElement that has now been implemented for .NET MAUI. And
check out this video, well actually this playlist with .NET
MAUI videos, this playlist with more .NET MAUI Community Toolkit videos
and click this button to actually subscribe to my
channel because you did that already, right? See you for the next one.
