WPF MediaElement 播放方向

Question

我有一些mp4（用android拍摄的，一些是纵向的，一些是横向的） 当我将它们用作 MediaElement 标记的源时，它们始终以横向模式播放。我一直在疯狂地谷歌搜索，但没有找到任何有关 MediaElement 中视频方向的信息，所以希望我错过了一些基本的东西。

这是我的xaml：

<Canvas x:Name="videoCanvas" Height="Auto" Width="641" Margin="10,0,11,0" HorizontalAlignment="Center" >
    <ContentControl Content="{Binding Media}" Width="{Binding ActualWidth, ElementName=videoCanvas}"  Height="{Binding ActualHeight, ElementName=videoCanvas}" />
</Canvas>

和隐藏代码：

  media = new MediaElement();
  media.LoadedBehavior = MediaState.Manual;            
  media.Loaded += Media_Loaded;
  media.MediaOpened += Media_MediaOpened;
  media.Source = new Uri(@"c:\videos\portrait.mp4");
  media.HorizontalAlignment = HorizontalAlignment.Center;
  media.VerticalAlignment = VerticalAlignment.Center;

Media_MediaOpened 中的 NaturalVideoHeight/Width 对于两个视频来说是相同的，所以我认为我不能用它来旋转 MediaElement。

Answer 1

我有一种方法可以解决我的案例中的这个问题。您需要使用块 Microsoft-WindowsAPICodePack-Core 和 Microsoft-WindowsAPICodePack-Shell：

ShellFile shell = ShellFile.FromFilePath(this.VideoFile);
ShellProperty<ulong?> fs = shell.Properties.System.Size;

// workaround to find out if video in portrait or landscape
BitmapSource bs = shell.Thumbnail.BitmapSource;
double bsWidth = bs.Width;
double bsHeight = bs.Height;
videoOrientation = bsWidth > bsHeight ? VideoOrientation.LANDSCAPE : VideoOrientation.PORTRAIT;

ShellProperty<uint?> fw = shell.Properties.System.Video.FrameWidth;
ShellProperty<uint?> fh = shell.Properties.System.Video.FrameHeight;

从代码中，我们看到视频有一个缩略图表示，它是您在 Windows 资源管理器中浏览视频时看到的图像。 使用“fw”和“fh”，您可以设置宽高比并正确设置 MediaElement 的宽度和高度属性。

Xaml 中是如何使用 Width、Height 和 VideoOrientation（参考的是相关视图模型）：

<Grid Width="{Binding Referent.Width}" Height="{Binding Referent.Height}">
    <MediaElement x:Name="mediaElement" IsHitTestVisible="True" Stretch="Uniform" LoadedBehavior="Manual" UnloadedBehavior="Manual" StretchDirection="Both"
                  Visibility="Visible" ToolTip="{Binding Referent.VideoFile}"
                  Source="{Binding Referent.VideoUri}" Opacity="{Binding Opacity}" ScrubbingEnabled="True">
        <MediaElement.LayoutTransform>
            <RotateTransform CenterX="0.5" CenterY="0.5"
                             Angle="{Binding Referent.VideoOrientation, Converter={StaticResource OrientationRotationConverter}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
        </MediaElement.LayoutTransform>
    </MediaElement>
    <StackPanel x:Name="controlPanel" Height="18" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom"
                Visibility="Collapsed">
        <Button Padding="0" Click="OnPlayButtonClick" Margin="3">
            <ContentControl Style="{DynamicResource PlayVideoIcon}"/>
        </Button>
        <Button Padding="0" Click="OnPauseButtonClick" Margin="3">
            <ContentControl Style="{DynamicResource PauseVideoIcon}"/>
        </Button>
        <Button Padding="0" Click="OnCloseButtonClick" Margin="3">
            <ContentControl Style="{DynamicResource CloseVideoIcon}"/>
        </Button>
    </StackPanel>
</Grid>

希望它对某人有帮助。