.NET Maui Apps | Play Video and Audio using Media Element in .NET MAUI Mobile and Desktop apps.

to all my Indian friends and everyone watching  this channel I would like to say apka swagate   yo welcome back to next code hop Channel this  channel facilitated a lot of lessons for dotnet   projects Frameworks that is.netblazer.net  Murray and for the Blazer we focus on both   webassembly and also Blazer server app we have a  lot of lessons and projects check our playlist and   we have a lot of informative lessons and projects  over there this video I'm going to show you how to   integrate or how to play video or audio in your  application either desktop or mobile app you can   still play video audio in it but a hop-off  using um Community toolkit dot media element   nuget package so quickly let's go through  this by creating um a new married project so now our project is now created let's install  this nuget package so right click on so listen   Explorer now dependencies and you want to  manage to get packages so we're going to   search for community.mary DOT media element  make sure you check this pre-release version so let's see if we're gonna  have that that media element so we make sure we click on the browse tab so  here we're gonna find that media element and   that is this so let's install the stable  version is 2.0 let's install this package so as it has finished installing let's go to the   settings that's in my program.cs  file and unless initialize it here so we're going to use dot use  Community toolkit so Mario connection then you're gonna have the media element attached  to it so control period this hasn't heard from let's see they're using namespace so use Mario coming toolkit and  we must have media elements okay let's add the namespace ourself so using how many two kids no okay so let's do this first after installing this I believe let's check  if we have it installed so Android packages   and let's see if we have  Community toolkit installed okay so it seems it is not  found here because I can't say   let's check it again so package  dependencies add new get packages and now let's let's type it again so so let's see okay so let's install this again yeah so it is now installed so let me go to  the solution export I can see we have the media   element here so we can now go to our settings  as you can see from here we can configure this   spacefully so let's go to my program and now here  we can just and comment this and this is going to   have the elements or the namespace added defaulty  control period let's use the committee 2k.mary   okay so now we are done with this the next  scenario you have to do here is to go to the   page and that's our main page and try to use  this media element but before that you have   to add a namespace to that page so we're  going to use a Content page for example so   open the content page or example and now here  let's add a name space so we're going to say XML and S and that's the example namespace   so a toolkit and that is what  you're going to use for the name and now we have to search  for message for this https   and we need .net married to okay so let's see if  we can have it found here and that is this one   so let's include that okay so we can  use this namespace stud here to do a   whole lot of things so here let's clear all  this because you don't need any of this here and now let's go for the toolkit so we can have media elements and now with  this media element let me close this more okay   this media element that we have here we have to  specify we can specify the weight and height so   let's specify it as so let's if width is um 640 they  can have height um 320 Etc and   let's have to specify the source so with the sauce  we can specify it online that is a video or audio   related to the internet you can put a CDN here or  you can also pass in a video lookup file so when   you go to your mind folder here I have one video  recorded so I'm going to move this now go to the   images here images folder and I'm going to paste  the image over there or the video over there   so I just have to navigate to resources and you  know there's a video so I want to put you the raw   folder so here I just paste this and my image is  going to be there so that is it test.mp4 so for us   to or for this media element you have contact with  it just have to specify the name test dot MP4 and   that is all that we need to do aside from doing  this what can we do there are some properties   that we can specify the first one is huge auto  play so do you want to auto play and that is this   so we can talk about true or false and that  is true let's save this let's run and see there we have an error here because we  have to clear these buttons because since   you've cleared the content yeah save that do this again thank you okay so we have an  exception here now let's have a look so we have an exception here in order to play this  video now to solve this let's go to the page again so one thing that we have to do here is we  are referring this video file inside the   application so that's the local file so to do  that you can start with and we can use embedded   then you can use this now let's save  this and let's restart the application and now let's see all right so you can see that our page is  now loaded and we have our element here   that's a media player so if I click on this  as you can see it has started playing the   yes and I started playing the video okay now  aside from this there are some few things that   we can also do so you know we can talk about show  autoplay or should auto play we set it to true we   can also talk about let's say should keep screen  on should Loop when it finishes should mute okay   so she should play back controls so all these are  setting that we can make now if you want to make   this in a call to you just have to specify this x  name so X name and maybe let's say media elements so as a media element and I just say lbl label and now when I go  to the source page here here I can specify   media element lbl so media element lbl and I can  talk about from source so with this let's see   you see I can talk about can have this Source  attribute I can have I should keep screen on   attribute I can also have something like play  should auto play and I'll play or should Loop   and shoe display all this so you can do  that here now this to play let's save   this now you've seen it in our app like this so  it is it is plain we have this and let's see if   we can show the controls so we can specify  Media or we can do this in example so here   she showed playback controls let's  say true and now let's restart this okay so let's see now unless you click on  the button for it to start if we have the   controls you can increase the volume and we can  also decrease the volume as well the same thing   applies to that now I also copied an np3 that's  the base MP3 so let's make a change with that   so I'm gonna say base and now here it is MP3  so I'm going to save this and now let's refresh   good so I could say it has even changed to MP3  without a reflection that's a hot reload yeah   okay so let's run this in the Android 2 and C  so I'm going to change this back to the video okay now let's stop this and now  let's use the Android emulator 2   now let's try this and see if  Androids are gonna pick it up all right so as you can see from  here we have the video here and   there's an Android it is already open so  we see it is already playing it and that   is to and just pause this as you can see  it is playing the video so because we set   this to auto play it plays it you can also  set this to the same audio so base dot MP3 save that now let's see if it's going to hot  reload and as you can see it is also playing there okay so that is a way to implement this now  there are a lot of things that you can do   with it so I'll put maybe the documentation  Link at the description so you can just watch   it or go there now we're gonna have a lot of  information related to how to configure this   alright so thank you so much for watching  I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 247

Keywords: skip(), scaffolding, assign-role, mobile apps, maui app, mobile app, android, map key, google map api key, google map.api key, How to use Font Awesome in NET MAUI Mobile and Desktop applications., carousel in app, display data with listview, list view component, using list view, material designicons, google icons, google fonts, filepicker, fileuploader, camera, access device camera, base64string, convert imag to base64string, play video, play audio, using MediaElement, media element

Id: LmZn4mnxlkE

Length: 14min 22sec (862 seconds)

Published: Thu Aug 17 2023