XAML中MediaElement播放手机拍摄视频旋转异常问题及修复咨询

• 手机拍摄视频时，通常不会直接调整视频帧的像素排列来适配拍摄方向，而是将设备朝向信息以旋转元数据的形式存储在视频文件的EXIF字段或容器头中。
• 常规通用播放器默认会读取该元数据，播放时自动对画面做旋转校正；但XAML体系下原生的MediaElement控件默认未开启旋转元数据的自动解析适配，仅会按照视频原始像素排布渲染，因此会出现画面倒置、旋转角度错误的问题。

可以通过MediaElement相关的配置或二次开发解决该问题，针对不同XAML框架的具体实现方式如下：

UWP/WinUI 3 平台 #

原生MediaElement可直接读取媒体的旋转属性，通过控件变换配置实现校正，无需引入第三方依赖：

1. 监听MediaElement的MediaOpened事件
2. 事件触发时从媒体播放项中读取视频轨道的旋转角度属性
3. 给MediaElement设置对应角度的旋转变换即可
   参考代码：

private void MediaPlayer_MediaOpened(object sender, RoutedEventArgs e)
{
    var playbackItem = mediaElement.Source as MediaPlaybackItem;
    if (playbackItem == null || playbackItem.VideoTracks.Count == 0) return;

    var videoEncProps = playbackItem.VideoTracks[0].GetEncodingProperties();
    if (videoEncProps.Properties.TryGetValue("System.Media.VideoOrientation", out object rotationVal) 
        && rotationVal is ushort rotationAngle)
    {
        mediaElement.RenderTransformOrigin = new Point(0.5, 0.5);
        mediaElement.RenderTransform = new RotateTransform { Angle = rotationAngle };
    }
}

WPF 平台 #

WPF原生MediaElement未暴露读取视频元数据的接口，需要先借助第三方元数据解析库读取视频的旋转角度，再给MediaElement设置LayoutTransform完成画面校正即可，无需修改播放逻辑。

如果不想自行实现适配，也可以直接改用Windows Community Toolkit提供的MediaPlayerElement控件，该控件默认已支持旋转元数据的自动校正，无需额外开发。

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