Відтворення аудіо та відео в додатках .NET MAUI за допомогою нового MediaElement
Вийшов один з найбільш очікуваних елементів управління для .NET MAUI - MediaElement. За допомогою MediaElement ви можете легко відтворювати аудіо та відео з вашого додатку .NET MAUI. В цій статті ви дізнаєтеся все, що вам потрібно знати про цю першу версію і про плани на майбутнє! Media Element є частиною .NET MAUI Community Toolkit, бібліотеки, створеної спільнотою, яка підтримується чудовими розробниками з усього світу, як з боку спільноти, так і з боку корпорації Майкрософт.
Що таке MediaElement?
З MediaElement ви отримуєте потужний елемент керування, який дозволяє відтворювати мультимедійні дані у вашому додатку .NET MAUI.
Можливо, ви вже знайомі з MediaElement з інструментарію спільноти Xamarin, куди його додали завдяки чудовій роботі учасника спільноти Пітера Фута. Хоча та версія була вже досить непоганою, вона також мала місце для вдосконалення, особливо на Android.
Саме тому, при перенесенні MediaElement на .NET MAUI, ми перебудували все з нуля. Таким чином, ми змогли зберегти всі ті частини, які вже є хорошими, і в той же час покращити ті речі, які потребують доопрацювання.
Під капотом
Для Android ми вирішили використовувати ExoPlayer як аналог платформи, замінивши Android MediaPlayer, який ми використовували для Xamarin. Таким чином, ми автоматично отримуємо багато додаткових функцій, які доступні нам з коробки, наприклад, відтворення HTTP-відео в прямому ефірі (HLS), чудові елементи керування транспортуванням платформи та багато іншого.
На iOS та macOS ми використовуємо платформу AVPlayer, як і для MediaElement в Xamarin. Також без змін залишився Tizen-плеєр, який використовує Tizen.Multimedia.Player.
Тепер, коли .NET MAUI будується на основі WinUI, а не UWP, ми використовуємо новий елемент MediaPlayerElement WinUI. Хоча цей елемент керування також є дуже молодим для WinUI, він вже є дуже повним і виглядає багатообіцяючим.
Підтримка різних медіаформатів відрізняється на різних платформах (і, можливо, залежно від того, які кодеки ви встановили), але, використовуючи нативні медіаплеєри платформи, для кожної операційної системи ми використовуємо всю потужність і пов'язану з цим оптимізовану продуктивність.
Початок роботи
Почати роботу з MediaElement дуже просто. По-перше, вам потрібно встановити пакет CommunityToolkit.Maui.MediaElement NuGet. Це окремий пакунок від основного пакунка Community Toolkit.
Після завершення встановлення перейдіть до вашого MauiProgram.cs і додайте наступний рядок ініціалізації до MauiAppBuilder:
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
// Initialize the .NET MAUI Community Toolkit MediaElement by adding the below line of code
.UseMauiCommunityToolkitMediaElement()
// After initializing the .NET MAUI Community Toolkit, optionally add additional fonts, and other things
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
// Continue initializing your .NET MAUI App here
return builder.Build();
}
Тепер ви готові почати використовувати MediaElement у своєму додатку! Простий приклад у XAML можна знайти нижче.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MediaElementDemos.GettingStarted"
Title="MediaElement Getting Started">
<toolkit:MediaElement x:Name="mediaElement"
ShouldAutoPlay="True"
ShouldShowPlaybackControls="True"
Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
HeightRequest="300"
WidthRequest="400"
... />
</ContentPage>
Це додасть елемент управління MediaElement на сторінку, яка почне автоматично відтворюватися при завантаженні відео, результат запуску на iOS і Windows можна побачити нижче.
У цій статті автор не вдається в подробиці про багаті функції, які вже є в цій першій версії, але важливо зазначити одну річ. Ви, як розробник, несете відповідальність за використання ресурсів MediaElement. Наприклад, додаток може відтворювати відео в режимі "картинка в картинці" або відтворювати аудіо у фоновому режимі, і в цих сценаріях неможливо автоматично визначити, коли потрібно очистити ресурси MediaElement.
Для цього потрібен лише один рядок коду. У фрагменті коду нижче ви можете побачити, як звільняються ресурси, коли користувач переходить зі сторінки ContentPage, на якій відображається елемент управління MediaElement.
public partial class FreeResourcesPage : ContentPage
{
void ContentPage_Unloaded(object? sender, EventArgs e)
{
// Stop and cleanup MediaElement when we navigate away
mediaElement.Handler?.DisconnectHandler();
}
}
Щоб дізнатися більше про всі поточні функції MediaElement, відвідайте сторінку документації.
Source