Воспроизведение аудио и видео в приложениях .NET MAUI с новым MediaElement

Выпущен один из самых ожидаемых элементов управления для .NET MAUI - MediaElement. С помощью MediaElement вы можете легко воспроизводить аудио и видео из своего приложения .NET MAUI. В этом посте вы узнаете все, что вам нужно знать о первой версии и о планах на будущее элемента! MediaElement является частью .NET MAUI Community Toolkit, библиотеки, созданной сообществом, которая поддерживается замечательными разработчиками по всему миру как из сообщества, так и из Microsoft.

Что такое MediaElement?

С MediaElement вы получаете мощный контрол, который позволяет воспроизводить мультимедиа внутри вашего приложения .NET MAUI.

Возможно, вы уже знакомы с MediaElement из Xamarin Community Toolkit, куда он был добавлен благодаря замечательной работе члена сообщества Питера Фута. Хоть эта версия уже была довольно хороша, в ней также было место для улучшений, особенно для Android.

Вот почему при переносе MediaElement на .NET MAUI мы перестроили все с нуля. Таким образом, мы могли сохранить все то, что уже хорошо, и улучшить то, что требуется.

Под капотом

Для Android мы решили использовать ExoPlayer в качестве аналога платформы, заменив Android MediaPlayer, который мы использовали для Xamarin. Таким образом, мы автоматически получаем множество дополнительных функций, доступных нам из коробки, таких как воспроизведение видео HTTP Live Streaming (HLS), великолепные транспортные контролы и многое другое.

В iOS и macOS мы используем платформу AVPlayer, как и в случае с Xamarin MediaElement. Также не изменился Tizen, используется Tizen.Multimedia.Player.

Теперь, когда .NET MAUI строится поверх WinUI, а не UWP, мы используем новый MediaPlayerElement. Хотя этот элемент управления достаточно новый в WinUI, он уже достаточно совершенен и выглядит многообещающе.

Поддержка различных медиаформатов различается в зависимости от платформы (и, возможно, от того, какие кодеки вы установили), но, используя собственные медиаплееры платформы, мы используем всю мощь и связанную с этим оптимизированную производительность для каждой операционной системы.

Приступаем к работе

Начать работу с MediaElement очень просто. Сначала вам нужно установить пакет NuGet CommunityToolkit.Maui.MediaElement. Это отдельный пакет от основного пакета Community Toolkit.

После установки nuget пакета, откройте MauiProgram.cs и добавьте следующую строку инициализации в MauiAppBuilder:

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        // Инициализируйте .NET MAUI Community Toolkit MediaElement добавив код ниже
        .UseMauiCommunityToolkitMediaElement()
        // После инициализации .NET MAUI Community Toolkit, при желании, добавьте дополнительные шрифты и другие вещи
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });

    // Продолжаем инициализировать .NET MAUI приложение

    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, ознакомьтесь с подробной информацией на странице документации.