Свой VideoPlayer с паттерном MVVM

Подскажите как сделать работу MediaElement с использованием паттерна MVVM. Я сделал дизайн VideoPlayer осталось только с помощью кнопок управлять воспроизведением видео в MediaElement. Подскажите как можно это сделать грамотно. Видел что делают интерфейс между View и ViewModel плеера или как то так. Но полностью не смог разобраться.

VideoPlayerControl.xaml

<UserControl x:Class="VideoPlayer.VideoPlayerControl"
         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:local="clr-namespace:VideoPlayer"
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
<UserControl.DataContext>
    <local:VideoPlayerVM/>
</UserControl.DataContext>
<UserControl.Resources>
    <local:TimeConverter x:Key="converter"/>
    <Style x:Key="buttonStyle" TargetType="Button">
        <Setter Property="Background" Value="Black"></Setter>
        <Setter Property="FontFamily" Value="Segoe UI Symbol"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="Width" Value="Auto"></Setter>
        <Setter Property="Height" Value="Auto"></Setter>
        <Setter Property="FontSize" Value="20"></Setter>
        <Setter Property="Margin" Value="5,5,5,0"></Setter>
        <Setter Property="Padding" Value="5"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="{TemplateBinding Background}" CornerRadius="5">
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Button.MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation To="#9778AB" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" Duration="0:0:0.5"></ColorAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Button.MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation To="Black" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" Duration="0:0:0.5"></ColorAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="FirstRepeatButton" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
        <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
        <Setter Property="IsTabStop" Value="False"></Setter>
        <Setter Property="Focusable" Value="False"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border BorderThickness="0" Background="#0E0817" CornerRadius="0,5,5,0" Height="7"></Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="SecondRepeatButton" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
        <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border SnapsToDevicePixels="True" CornerRadius="5,0,0,5" Background="#8D72A1" BorderThickness="0" Height="7"></Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
        <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Height="16" Width="16" Fill="#553064" ClipToBounds="True"></Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="SliderTemplate" TargetType="Slider">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Track Grid.Row="1" x:Name="PART_Track">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SecondRepeatButton}" Command="Slider.DecreaseLarge" Margin="0,0,-5,0"></RepeatButton>
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource FirstRepeatButton}" Command="Slider.IncreaseLarge" Margin="-5,0,0,0"></RepeatButton>
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumb}"></Thumb>
                </Track.Thumb>
            </Track>
        </Grid>
    </ControlTemplate>
    <Style x:Key="SliderStyle" TargetType="Slider">
        <Setter Property="Focusable" Value="False"></Setter>
        <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsMoveToPointEnabled" Value="True"></Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="MinHeight" Value="21"></Setter>
                <Setter Property="MinWidth" Value="104" />
                <Setter Property="Template" Value="{StaticResource SliderTemplate}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
<Grid>
    <MediaElement Source="{Binding SourceVideo}"></MediaElement>
    <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
        <Button Style="{StaticResource buttonStyle}" Content="&#xE147;"></Button>
        <Button Style="{StaticResource buttonStyle}" Content="&#xE115;" Command="{Binding SettingsCommand}"></Button>
        <Button Style="{StaticResource buttonStyle}" Content="&#xE10A;"></Button>
    </StackPanel>
    <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Margin="20,0,20,100">
        <Slider Style="{StaticResource SliderStyle}" Value="0" Maximum="{Binding VideoDuration}"></Slider>
        <Grid HorizontalAlignment="Stretch">
            <TextBlock Text="{Binding VideoTime, Converter={StaticResource converter}}" HorizontalAlignment="Left"></TextBlock>
            <TextBlock Text="{Binding VideoDuration, Converter={StaticResource converter}}" HorizontalAlignment="Right"></TextBlock>
        </Grid>
    </StackPanel>
    <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,55">
        <Button Style="{StaticResource buttonStyle}" Content="&#xE100;"></Button>
        <Button Style="{StaticResource buttonStyle}" Content="&#xE102;"></Button><!--E103-->
        <Button Style="{StaticResource buttonStyle}" Content="&#xE101;"></Button>
    </StackPanel>
</Grid>