Post
Ask Question

.NET MAUI - Video Player using Community Toolkit

Creating Exciting Apps with .NET MAUI's Video Player and Community Toolkit.

.NET MAUI

Hey! Ever wanted to create cool apps for different devices like phones and computers? Well, .NET MAUI makes it super easy. It's like a superhero for app creators! Now, imagine adding fun things like videos to your apps. That's where the Community Toolkit comes in – a toolbox that lots of developers work on together. Today, we're exploring the Video Player control, a cool feature powered by .NET MAUI and its friendly Community Toolkit. Get ready for an adventure in making your apps more exciting with videos!

Quick Links

  • Project Setup
  • Install Plugin
  • Implementation
  • Demo
  • Download Code

Project Setup

  • Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
    Visual studio
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button.
    New project
  • In the Configure your new project window, name your project, choose a suitable location for it, and click the Next button.
    Configure
  • In the Additional Information window, click the Create button.
    Additional
  • Once the project is created, we can able to see the Android, iOS, Windows, and other running options in the toolbar. Press the emulator or run button to build and run the app.Android Emulator

Install Plugin

  • Open Terminal or Command Prompt: Open a terminal or command prompt window. You can usually find this on your computer by searching for "Command Prompt" (Windows) or "Terminal" (macOS/Linux).
  • Navigate to Your Project Folder: Use the cd command to navigate to your .NET MAUI project folder. For example.
  • Install Community Toolkit: Run the following command to install the Community Toolkit. Maui package. 
    dotnet add package Microsoft.Maui.CommunityToolkit
  • Restore Packages: After the installation, run the following command to restore the packages: 
    dotnet restore

Implementation of Video Player

  • First, we need to open "MauiProgram.cs" and include the following namespace and line to allow the app to use the Chart Library. 
    using CommunityToolkit.Maui;
    .UseMauiCommunityToolkit()
.UseMauiCommunityToolkitMediaElement()
  • Open the MainPage.xaml file and add the following namespace. (the page will be replaced according to you). 
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
  • Then, remove the default content and add an instance of the Media Element class to the page. 
    <toolkit:MediaElement Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
ShouldShowPlaybackControls="True"
BackgroundColor="AliceBlue"
x:Name="mediaElement"/>
  • We can add other controls for custom video controls like play/pause and volume controls like below. 
    <HorizontalStackLayout BindingContext="{x:Reference mediaElement}"
					      HorizontalOptions="Center"
					      Spacing="10">
	
	<Button Text="Play"
		HorizontalOptions="CenterAndExpand"
		Clicked="OnPlayPauseButtonClicked">
	</Button>
	<Button Text="Stop"
		HorizontalOptions="CenterAndExpand"
		Clicked="OnStopButtonClicked">
	</Button>
</HorizontalStackLayout>
<Slider Maximum="1.0"
		   Minimum="0.0"
		   Value="{Binding Volume}"
		   ValueChanged="Slider_ValueChanged"  
		   Rotation="270"
		   WidthRequest="100" />
  • Open the Code behind and add the following which will be useful to control media elements using custom controls. 
    void OnPlayPauseButtonClicked(object sender, EventArgs args)
{
	if (mediaElement.CurrentState == MediaElementState.Stopped ||
		mediaElement.CurrentState == MediaElementState.Paused)
	{
		mediaElement.Play();
	}
	else if (mediaElement.CurrentState == MediaElementState.Playing)
	{
		mediaElement.Pause();
	}
}

void OnStopButtonClicked(object sender, EventArgs args)
{
	mediaElement.Stop();
}

private void Slider_ValueChanged(object sender, ValueChangedEventArgs e)
{
	mediaElement.Volume = e.NewValue;
}

Download Code

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.


Similar Articles