Video/Screen Frame Padding for Subtitle Display

[softworkz]

Hi,

do you have any way to set a padding at the screen or video frame level?

We have two values in our config which allow to set a minimum distance from the top and from the bottom for subtitle areas, so when the bottom value is 5%, no subtitles will be shown in that bottom 5% area.

Any idea how I can achieve this?
(easily would be good - LOL)

Thanks,
sw

[brabebhin]

Hi,
You can achieve this by modifying the MPE control template.
Subtitles are displayed in a Grid named "TimedTextSourcePresenter" that's zindexed above the video presenter. You can set margins to this grid and obtain what you want.

[softworkz]

Thanks a lot for the pointer, I'll try this now.

[brabebhin]

Oh yeah, on winui 3 you will probably be blocked by microsoft/microsoft-ui-xaml#8973

Lovely, isn't it?
but it should work for UWP.

[softworkz]

Lovely, isn't it?

Despicable...

but it should work for UWP.

That's the more important one. For Windows (i.e. non-xbox) we'll probably use mpv player anyway, but I'm targeting implementation for FFmpegInteropX as well, so we have two options available.

[brabebhin]

So this can actually be solved without subclassing the MediaPlayerElement. If you locally override the style of the MediaPlayerElement, you can change the template in place

<MediaPlayerElement.Style>
     <Style TargetType="MediaPlayerElement">
         <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"/>
                         <MediaPlayerPresenter x:Name="MediaPlayerPresenter" IsFullWindow="{TemplateBinding IsFullWindow}" MediaPlayer="{TemplateBinding MediaPlayer}" Stretch="{TemplateBinding Stretch}"/>
                         <Image x:Name="PosterImage" Stretch="{TemplateBinding Stretch}" Source="{TemplateBinding PosterSource}" Visibility="Visible"/>

                         <ContentPresenter x:Name="TransportControlsPresenter" Visibility="{TemplateBinding AreTransportControlsEnabled}"/>
                         <Grid x:Name="TimedTextSourcePresenter"/>

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

You can then technically bind the TimedTextSourcePresenter to apply your padding.