Uno平台UWP与WASM环境下MediaPlayerElement视频播放问题咨询

问题原因 #

1. UWP平台：系统自带的MediaPlayerElement默认仅支持H.264编码的MP4等少量格式，.mov、wmv格式依赖额外解码器，默认Windows系统未预装对应解码器，因此无法直接播放。
2. WASM平台：Uno Platform目前的WASM运行时未实现MediaPlayerElement控件的原生渲染逻辑，因此该控件在WASM环境下不会显示。

解决方案 #

通用最优方案 #

优先将所有视频资源转码为H.264编码+AAC音频的MP4格式，该格式是跨平台兼容性最高的格式，不需要额外引入依赖，可同时兼容安卓、UWP、WASM所有目标平台。

若必须保留原格式（.mov、wmv等） #

• UWP平台适配

  • 集成FFmpegInteropX库扩展MediaPlayerElement的解码能力，该库可提供几乎所有常见视频格式的解码支持，集成后只需要将FFmpegInteropX生成的MediaSource赋值给MediaPlayerElement即可正常播放。
  • 确认媒体资源的访问权限：如果是本地文件，需要确保应用已获得该文件的访问权限，网络资源需要确认没有CORS或访问限制。

• WASM平台适配

  • 改用条件编译，在WASM环境下嵌入HTML5原生video标签实现播放，HTML5的video标签可直接兼容浏览器支持的所有视频格式，参考实现代码：

<DataTemplate x:Key="MovTemplate" x:DataType="vm:PictureViewModel">
    <Grid Margin="4">
        <!-- 安卓端沿用原有逻辑 -->
        #if __ANDROID__
        <MediaPlayerElement 
            x:Name="mplayerElement" 
            Source="{Binding MediaUri}" 
            Width="{Binding Parent.ImageWidth, Mode=TwoWay}" 
            MinWidth="400" 
            AreTransportControlsEnabled="True" />
        <!-- WASM端用HTML原生video标签 -->
        #elif __WASM__
        <uno:HtmlElement Tag="video" MinWidth="400">
            <uno:HtmlElement.Attributes>
                <x:Key>src</x:Key>
                <Binding Path="MediaUri" />
                <x:Key>controls</x:Key>
                <x:String>controls</x:String>
                <x:Key>width</x:Key>
                <Binding Path="Parent.ImageWidth" />
            </uno:HtmlElement.Attributes>
        </uno:HtmlElement>
        <!-- UWP端适配逻辑 -->
        #elif WINDOWS_UWP
        <MediaPlayerElement 
            x:Name="mplayerElement" 
            Width="{Binding Parent.ImageWidth, Mode=TwoWay}" 
            MinWidth="400" 
            AreTransportControlsEnabled="True" />
        #endif
    </Grid>
</DataTemplate>

• UWP端集成FFmpegInteropX后，在页面后台代码中为MediaPlayerElement赋值通过FFmpegInteropX生成的MediaSource即可实现多格式播放。

内容的提问来源于stack exchange，提问作者Robotuner