How to flip MediaPlayer video

Question

I am playing some animations using MediaPlayer UWP MediaPlayer

I would like to flip the animation horizontally, kind of like a mirror image.

Is there a way to achieve this with UWP media player?

Answer 1

A relatively simple solution is to use the Projection function to flip the MediaPlayerPresenter inside the MediaPlayerElement by 180°.

<Style TargetType="MediaPlayerElement" x:Key="FlipMediaPlayerStyle">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MediaPlayerElement">
                <Grid x:Name="LayoutRoot">
                    <Border Background="Transparent" />
                    <Image  x:Name="PosterImage"
                            Visibility="Collapsed"
                            Source="{TemplateBinding PosterSource}"
                            Stretch="{TemplateBinding Stretch}" />
                    <MediaPlayerPresenter x:Name="MediaPlayerPresenter"
                                          IsFullWindow="{TemplateBinding IsFullWindow}"
                                          Stretch="{TemplateBinding Stretch}"
                                          MediaPlayer="{TemplateBinding MediaPlayer}"
                                          RenderTransformOrigin="0.5,0.5"
                                          >
                        <MediaPlayerPresenter.Projection>
                            <PlaneProjection RotationX="180" />
                        </MediaPlayerPresenter.Projection>

                        <MediaPlayerPresenter.RenderTransform>
                            <ScaleTransform ScaleX="-1" ScaleY="-1" />
                        </MediaPlayerPresenter.RenderTransform>
                    </MediaPlayerPresenter>
                    <ContentPresenter x:Name="TransportControlsPresenter"
                                      Visibility="{TemplateBinding AreTransportControlsEnabled}" />
                    <Grid x:Name="TimedTextSourcePresenter" />
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage

<MediaPlayerElement x:Name="MyMedia"
                    Source="your_media_url"
                    AreTransportControlsEnabled="True"
                    Style="{StaticResource FlipMediaPlayerStyle}"
                    />