使用新的MediaElement在.NET MAUI应用中播放音频和视频

目录

什么是MediaElement？

表面之下

开始

MediaElement的未来

---

最受期待的.NET MAUI控件之一已发布; MediaElement。使用MediaElement，您可以在.NET MAUI应用程序中轻松播放音频和视频，在这篇文章中，您将了解有关第一个版本以及我们对未来的计划的所有信息！媒体元素是 .NET MAUI社区工具包的一部分，该工具包是一个社区创建的库，由来自社区和Microsoft的全球优秀开发人员提供支持。

什么是MediaElement？

使用MediaElement，您可以获得一个强大的控件，允许您在.NET MAUI应用内播放多媒体。

你可能已经从Xamarin社区工具包中知道MediaElement，它是由社区成员Peter Foot的出色工作添加的。虽然那个版本已经相当不错了，但它也有改进的余地，尤其是在Android上。

这就是为什么在将MediaElement移植到.NET MAUI时，我们从头开始重建了所有内容。通过这种方式，我们可以确保保留所有已经好的部分，同时改进可能需要一些爱的东西。

表面之下

对于Android，我们选择使用ExoPlayer作为平台对应物，取代我们用于Xamarin的Android MediaPlayer。通过这种方式，我们会自动获得许多开箱即用的额外功能，例如播放HTTP实时流（HLS）视频、美观的平台传输控件以及许多其他功能。

在iOS和macOS上，我们使用AVPlayer平台，就像我们在Xamarin的MediaElement上所做的那样。此外，Tizen系统的Tizen.Multimedia.Playe版本也没有变化。

现在，.NET MAUI建立在WinUI而不是UWP之上，我们在这里使用WinUI的全新 MediaPlayerElement。虽然此控件对于WinUI来说也很年轻，但它已经非常完整并且看起来很有前途。

对不同媒体格式的支持因平台而异（可能还有您安装的编解码器），但通过使用平台本机媒体播放器，我们为每个操作系统利用了所有功能和相关优化性能。

开始

开始使用MediaElement很容易。首先，您要安装CommunityToolkit.Maui.MediaElement NuGet包。这是一个独立于主社区工具包包的软件包。

安装完成后，进入您的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资源。

这样做只需要一行代码。在下面的代码片段中，您可以看到当用户导航离开显示MediaElement控件的ContentPage时如何释放资源。

public partial class FreeResourcesPage : ContentPage
{
    void ContentPage_Unloaded(object? sender, EventArgs e)
    {
        // Stop and cleanup MediaElement when we navigate away
        mediaElement.Handler?.DisconnectHandler();
    }
}

要了解有关MediaElement当前所有功能的更多信息，请查看文档页面进行深入研究。

我还制作了一个视频，向您介绍一些开始使用MediaElement的基础知识，您可以在下面找到。油管视频

MediaElement的未来

首先，我要非常感谢社区成员，他们不仅帮助将此控件放入.NET MAUI社区工具包，而且还帮助所有其他功能。如果您还没有检查出来，请这样做。

对于这个初始版本，我们专注于核心功能，并确保它是可靠的。但是从现在开始，我们可以开始添加各种惊人的功能！

我们经常听到的请求之一是支持全屏视频播放。我们听到你的声音！然而，不幸的是，实施并不像看起来那么简单。在工具包存储库上有一个讨论，请随时加入！

您还可以添加自己的功能请求。我听说过很多想法，包括支持播放列表、能够播放DRM多媒体、字幕支持以及允许您设置自己的自定义HTTP标头。检查您喜欢的功能是否已在“讨论”选项卡中，如果没有，请尽可能详细地打开一个。

我们期待看到您令人惊叹的多媒体驱动的.NET MAUI应用项目！

https://devblogs.microsoft.com/dotnet/announcing-dotnet-maui-communitytoolkit-mediaelement/