如何创建与 MediaPlayerElement 的 CC 大小相同的 second/bilingual 字幕

Question

由于某些原因，MediaPlayerElement的CC字号受很多因素影响，我无法得到准确的字号。参考 SO link, .

那么有人知道如何创建与 MediaPlayerElement 的 CC 大小相同的 second/bilingual 字幕吗？

Answer 1

您可以使用修改 MediaPlayerElement 的 ControlTemplate 来创建您的自定义字幕控件。

制作一个完整的字幕控件比较复杂。我这里只提供一种思路。

1.我们需要创建一个派生自 MediaPlayerElement 的控件 class 作为我们的测试用例。

public class CustomMediaPlayerElement:MediaPlayerElement
{
    public string SecondCaption
    {
        get { return (string)GetValue(SecondCaptionProperty); }
        set { SetValue(SecondCaptionProperty, value); }
    }
    public static readonly DependencyProperty SecondCaptionProperty =
        DependencyProperty.Register("SecondCaption", typeof(string), typeof(CustomMediaPlayerElement), new PropertyMetadata(""));

}

我们添加了SecondCaption的依赖属性，也就是我们当前显示的第二个字幕的文字。以后我们可以用定时器来切换显示的文字。

2。创建自定义控件模板

由于MediaPlayerElement的CC字体大小是可变的，我们可以用ViewBox来模拟。

<Style TargetType="local:CustomMediaPlayerElement" x:Key="BasicMediaStyle">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:CustomMediaPlayerElement">
                <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}" />
                    <ContentPresenter     x:Name="TransportControlsPresenter"
            Visibility="{TemplateBinding AreTransportControlsEnabled}" IsTapEnabled="False"/>
                    <Grid x:Name="TimedTextSourcePresenter" />
                    <Grid x:Name="SecondTimedTextSourceContainer">
                        <Viewbox>
                            <Grid>
                                <TextBlock Text="{TemplateBinding SecondCaption}" FontSize="15" VerticalAlignment="Bottom"
                                       HorizontalAlignment="Center" TextAlignment="Center" Foreground="White"/>
                            </Grid>
                        </Viewbox>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

3。添加附加属性使字幕显示正确的大小

如果我们只像上面那样写，我们最终会得到一个 TextBlock 填满整个屏幕。为了让 ViewBox 像我们预期的那样工作，我们需要添加一些新属性来制作字幕大小合适的容器。

CustomMediaPlayerElement.cs

public double SourceWidth
{
    get { return (double)GetValue(SourceWidthProperty); }
    set { SetValue(SourceWidthProperty, value); }
}

public static readonly DependencyProperty SourceWidthProperty =
    DependencyProperty.Register("SourceWidth", typeof(double), typeof(CustomMediaPlayerElement), new PropertyMetadata(double.NaN));


public double SourceHeight
{
    get { return (double)GetValue(SourceHeightProperty); }
    set { SetValue(SourceHeightProperty, value); }
}

public static readonly DependencyProperty SourceHeightProperty =
    DependencyProperty.Register("SourceHeight", typeof(double), typeof(CustomMediaPlayerElement), new PropertyMetadata(double.NaN));

CustomeMediaPlayerElement.xaml

...
<Viewbox>
    <Grid Height="{TemplateBinding SourceHeight}" Width="{TemplateBinding SourceWidth}">
        <TextBlock Text="{TemplateBinding SecondCaption}" FontSize="15" VerticalAlignment="Bottom"
               HorizontalAlignment="Center" TextAlignment="Center" Foreground="White"/>
    </Grid>
</Viewbox>
...

使用方法

<controls:CustomMediaPlayerElement SecondCaption="Hello World" x:Name="MyPlayer"
                                   AreTransportControlsEnabled="True" Style="{StaticResource BasicMediaStyle}"
                                   />

private async Task LoadVideo(StorageFile videoFile)
{
    var player = new MediaPlayer();
    var source = MediaSource.CreateFromStorageFile(videoFile);
    player.Source = source;
    player.MediaOpened += Media_Opened;
    MyPlayer.SetMediaPlayer(player);
}

private async void Media_Opened(MediaPlayer sender, object args)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        MyPlayer.SourceWidth = sender.PlaybackSession.NaturalVideoWidth;
        MyPlayer.SourceHeight = sender.PlaybackSession.NaturalVideoHeight;
    });
}

这样就可以得到一个会随着MediaPlayerElement缩放的字幕控件，用定时器修改SecondCaption就可以实现字幕的功能

但正如我之前所说，要实现一个完整的字幕控件是很复杂的。这只是添加新字幕控件的一种方式，需要根据自己的需要进行自定义。

谢谢。

如何创建与 MediaPlayerElement 的 CC 大小相同的 second/bilingual 字幕

How to create a second/bilingual subtitle, the same size to MediaPlayerElement's CC

uwp

media-player

closed-captions