Niveau :
5 minutes de lecture
Dans cet article, vous allez apprendre à utiliser MediaElement, le tout nouveau composant pour gérer vos fichiers Audio et Vidéo avec Microsoft .Net MAUI :
- Qu’est ce que le composant MEDIAELEMENT?
- Prérequis
- Installation du package
- Démonstration avec la lecture d’une vidéo
Qu’est ce que le composant MEDIAELEMENT ?
Le composant MediaElement va vous permettre de gérer vos fichiers audios et vidéos, de les jouer, interagir avec et bien plus encore. Si vous venez du monde de Xamarin, vous savez alors que ce composant existé déjà. Voici donc son petit frère pour .NET MAUI qui a été entièrement repensé et redésigné pour notre plus grand plaisir.
Derrière se composant Cross-Plateforme se cache pour Android le composant ExoPlayer et pour iOS et Mac, il s’agit de AVPlayer. Pour la partie Microsoft, on reste sur le MediaPlayerElement.
Prérequis
- La partie NET MAUI installé pour le développement d’application cross-plateforme (le mac est optionnel si vous voulez un rendu sur iOS)
- Un projet Net MAUI en .Net 7.0
Installation du package
Dans votre projet .Net MAUI, installez le nuget CommunityToolkit.Maui.MediaElement (Microsoft à eu la bonne idée de séparer ce package du package CommunityToolkit.Maui) et configurez MauiProgram.cs comme ci dessous :
Démonstration avec la lecture d’une vidéo
Dans le fichier MainPage.xaml, rajoutez le composant comme ci-dessous :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NetMauiPlayVideoAudio.MainPage"
xmlns:usercontrols="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<Grid>
<usercontrols:MediaElement ShouldAutoPlay="True"
Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
</Grid>
</ContentPage>
La propriété ShouldAutoPlay permettra de jouer la vidéo automatiquement :
Coffee Coding 