如何将视频绑定到 MediaElement 的源？

Question

我正在使用 James Montemagno 的 Monkey Finder 应用程序。

https://github.com/jamesmontemagno/MonkeysApp-Workshop

我尝试将视频添加到详细信息页面，但当我尝试将名为“Video”的新属性绑定到 MediaElement Source 时，我在运行时收到错误。如果我对文件进行硬编码，但当我尝试绑定它时则不起作用，因此 MediaElement 设置正确。只是绑定不起作用。

调试器在这里中断：

#if DEBUG && !DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION
            UnhandledException += (sender, e) =>
            {
                if (global::System.Diagnostics.Debugger.IsAttached) global::System.Diagnostics.Debugger.Break();
            };
#endif

我将属性添加到类中：

public class Monkey
{
     ...     
     public string Video { get; set; }
}

我将属性及其值添加到每个条目的 json 文件中：

{
     ...
     "Video": "testvid1.mp4"
},

我将 MediaElement 添加到 DetailsPage.xaml：

<toolkit:MediaElement x:Name="current_video"
WidthRequest="300" HeightRequest="200"
Source="{Binding Monkey.Video}"
ShouldShowPlaybackControls="True"
ShouldAutoPlay="True"/>

它不喜欢源代码行。我在网上发现了一些有关它的相关讨论，看起来它可能是一个错误，但我无法理解这些讨论或建议的解决方法，因为我对 .NET 还很陌生。

我错过了一些明显的东西吗？

---------------编辑--------------

我修复了视频文件的路径，因此不再触发中断。但是，视频显示为空白。

这有效：

<toolkit:MediaElement x:Name="current_video"
WidthRequest="700" HeightRequest="500"                                  
Source="embed://testvid1.mp4"
ShouldShowPlaybackControls="True"
ShouldAutoPlay="True"/>

这不起作用：

<toolkit:MediaElement x:Name="current_video"
WidthRequest="700" HeightRequest="500"                                  
Source="{Binding Monkey.Video}"
ShouldShowPlaybackControls="True"
ShouldAutoPlay="True"/>

Monkey 类有一个字符串类型的 Video 属性：

public class Monkey
{
...
    public string Video { get; set; }
}

json 文件已分配给该属性的值：

{
...
    "Video": "embed://testvid1.mp4"
},

该视频位于 Resources/Raw 中。

如果它有助于或改变此问题的解决方案，我更愿意将视频存储在 Android 设备上而不是应用程序内。这只能在 Android 上运行，并且只能由我使用。

.csproj 文件的内容：

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows')) and '$(MSBuildRuntimeType)' == 'Full'">$(TargetFrameworks);net8.0-windows10.0.19041</TargetFrameworks>
        <OutputType>Exe</OutputType>
        <RootNamespace>MonkeyFinder</RootNamespace>
        <UseMaui>true</UseMaui>
        <SingleProject>true</SingleProject>
        <ImplicitUsings>enable</ImplicitUsings>

        <!-- Display name -->
        <ApplicationTitle>MonkeyFinder</ApplicationTitle>

        <!-- App Identifier -->
        <ApplicationId>com.companyname.monkeyfinder</ApplicationId>
        <ApplicationIdGuid>ECD44DAE-B03E-4D8B-B427-71865961E696</ApplicationIdGuid>

        <!-- Versions -->
        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
        <ApplicationVersion>1</ApplicationVersion>
    </PropertyGroup>

    <ItemGroup>
        <!-- App Icon -->
        <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />

        <!-- Splash Screen -->
        <MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />

        <!-- Images -->
        <MauiImage Include="Resources\Images\*" />
        <MauiImage Update="Resources\Images\dotnet_bot.svg" BaseSize="168,208" />

        <!-- Custom Fonts -->
        <MauiFont Include="Resources\Fonts\*" />

        <!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
        <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
    </ItemGroup>

    <ItemGroup>
        <PackageReference Include="CommunityToolkit.Maui.MediaElement" Version="3.0.1" />
        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
        <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
        <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
    </ItemGroup>
</Project>

Answer 1

从文档播放本地媒体，我们可以知道：

注意

简写

embed://

和

filesystem://

仅适用于 XAML。在代码中， 请使用

MediaSource.FromResource()

和

MediaSource.FromFile()

分别。使用这些方法，您可以省略

embed://

和

filesystem://

前缀。路径的其余部分应该是相同的。

因此，如果您想使用数据绑定来实现此目的，您应该定义一个类型为

MediaSource

的变量并使用代码

MediaSource.FromResource

加载视频。

    public MediaSource Source { get; set; }

然后我们可以使用以下代码从文件夹

Resources/raw/testvid1.mp4

加载视频：

    Source = MediaSource.FromResource("testvid1.mp4");