QuickLook/QuickLook.Plugin/QuickLook.Plugin.VideoViewer/ViewerPanel.xaml

<UserControl x:Class="QuickLook.Plugin.VideoViewer.ViewerPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:fa="http://schemas.fontawesome.io/icons/"
             xmlns:local="clr-namespace:QuickLook.Plugin.VideoViewer"
             xmlns:ffmpeg="clr-namespace:Unosquare.FFmpegMediaElement;assembly=Unosquare.FFmpegMediaElement"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.Resources>
            <ResourceDictionary>
                <local:DoubleToTimeSpanConverter x:Key="DoubleToTimeSpanConverter" />
                <local:DecimalToTimeSpanConverter x:Key="DecimalToTimeSpanConverter" />
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="HorizontalSliderStyle.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Grid.Resources>
        <DockPanel>
            <DockPanel DockPanel.Dock="Bottom" Height="26" Margin="-1,0,0,0">
                <fa:ImageAwesome DockPanel.Dock="Left" x:Name="buttonPlayPause" Icon="PauseCircleOutline"
                                 Height="16" Width="16" Margin="5,5" Foreground="Gray"
                                 Cursor="Hand" />
                <StackPanel DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center"
                            Orientation="Horizontal" Margin="10,0,7,0">
                    <TextBlock FontSize="14"
                               Text="{Binding Position, ElementName=mediaElement,Converter={StaticResource DecimalToTimeSpanConverter}}" />
                    <TextBlock FontSize="14" Text=" / " />
                    <TextBlock FontSize="14"
                               Text="{Binding NaturalDuration, StringFormat=hh:mm:ss, ElementName=mediaElement,Converter={StaticResource DoubleToTimeSpanConverter}}" />
                </StackPanel>
                <Slider x:Name="sliderProgress" Style="{StaticResource HorizontalSlider}"
                        Margin="0,0,0,0" VerticalAlignment="Center"
                        Value="{Binding Position, ElementName=mediaElement}"
                        Maximum="{Binding NaturalDuration, ElementName=mediaElement, Mode=OneWay}" />
            </DockPanel>
            <ffmpeg:MediaElement x:Name="mediaElement" />
        </DockPanel>
        <Label x:Name="errorOverlay" Visibility="Collapsed" Background="#CCAAAAAA" VerticalContentAlignment="Center"
               HorizontalContentAlignment="Center">
            Video load failed.
        </Label>
    </Grid>
</UserControl>