Silverlight video player. YouTube style.

In the previous article I explained how to implement a simple video player with some controls. It works well, but it has a generic style. In this article I’ll explain how to restyle the video player so that it looks the same as YouTube player.

The final result is in the picture below, and at this link you can see how it looked before.
Silverlight_youtube_style


The simplest way to copy the YouTube style is to enable HTML5 video in account settings, find such video and explore the video page by Firebug or Chrome Developer Tools. Then you should convert html elements and styles to their Silverlight counterparts.

Play/Pause button

Css style of the Play button:

.ytp-button-play {
    background: url("//s.ytimg.com/yts/imgbin/player-common-vflmjAX7g.png") no-repeat scroll -279px -359px transparent;
    height: 25px;
    width: 55px;
}
.ytp-button-play:focus, .ytp-button-play:hover {
    background: url("//s.ytimg.com/yts/imgbin/player-common-vflmjAX7g.png") no-repeat scroll 0 -330px transparent;
}

This is just a bitmap image which is taken from a css sprite. CSS sprites are large images which clue together all images used by site. Sprites do not work in Silverlight, so it is necessary to crop a separate image from the sprite and use it instead.
The code above can be rewritten in Silverlight in this way:

<Style x:Key="PlayButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="HoverImage" Storyboard.TargetProperty="Opacity" To="1"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="HoverImage" Storyboard.TargetProperty="Opacity" To="1"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Width="55" Height="25">
                        <Image x:Name="DefaultImage" Source="Images/play_button.png" />
                        <Image x:Name="HoverImage" Source="Images/play_button_hover.png" Opacity="0" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

PNG images you can find in the source code file which I’ve attached at the end of this post.
YouTube buttons had also styles for a focused state, but focus works differently in Silverlight, so I didn’t use them in my example.

Progress text

Css style:

.html5-player-chrome .progress-text {
    color: #999999;
    float: left;
    font-size: 11px;
    line-height: 28px;
    margin-left: 6px;
}
.html5-current-time {
    color: #FFFFFF;
}

The float property is irrelevant, and also we need to copy the font-family property from the root. Here is the result xaml code:

<Style x:Key="ProgressTextStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="#999999" />
    <Setter Property="FontFamily" Value="Arial" />
    <Setter Property="FontSize" Value="11" />
</Style>
<!-- ... -->
<TextBlock Margin="6,0,0,0" VerticalAlignment="Center" Style="{StaticResource ProgressTextStyle}">
    <Run Text="{Binding PositionText}" Foreground="White" />
    <Run Text=" / " />
    <Run Text="{Binding DurationText}" />
</TextBlock>

Volume slider

It uses very tricky css-techniques, but in xaml they can be simplified.

.html5-volume-panel:focus, .html5-volume-control:hover .html5-volume-panel {
    transition: width 0.05s ease-in 0s;
    width: 56px;
}
.html5-volume-slider-foreground {
    background: none repeat scroll 0 0 #DDDDDD;
    bottom: 0;
    height: 14px;
    position: absolute;
    width: 5px;
}
.html5-volume-slider-foreground:before, .html5-volume-slider-foreground:after {
    background: none repeat scroll 0 0 #B91F1F;
    content: "";
    display: block;
    height: 4px;
    left: -55px;
    position: absolute;
    top: 5px;
    width: 55px;
}
.html5-volume-slider-foreground:after {
    background: none repeat scroll 0 0 #757575;
    left: 5px;
}

In the code above ‘html5-volume-panel’ is the whole slider, and ‘html5-volume-slider-foreground’ is the thumb (white rectangle) in the middle.
Silverlight has its own Slider control and its default style you can find here. The default Slider template has lots of code, but you don’t need the largest part of it in this example.
The thumb can be implemented so:

<Style x:Key="VolumeThumb" TargetType="Thumb">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Border x:Name="Background" Background="#DDDDDD" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And the Slider control looks so:

<Style x:Key="VolumeSlider" TargetType="Slider">
    <Setter Property="Maximum" Value="10" />
    <Setter Property="Minimum" Value="0" />
    <Setter Property="Value" Value="0" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Border x:Name="Root">
                    <Border.Resources>
                        <ControlTemplate x:Key="RepeatButtonTemplate">
                            <Grid x:Name="Root" Opacity="0" Background="Transparent"/>
                        </ControlTemplate>
                    </Border.Resources>

                    <Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <!-- Track Layer -->
                        <Rectangle x:Name="TrackRectangle" Fill="#B91F1F" Grid.Column="0" Height="4" Margin="2,0,0,0"/>
                        <Rectangle Fill="#757575" Grid.Column="2" Height="4" Margin="0,0,2,0"/>
                        <!-- Repeat Buttons + Thumb -->
                        <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="0"/>
                        <Thumb x:Name="HorizontalThumb" Style="{StaticResource VolumeThumb}" Width="5" Height="14" Grid.Column="1" IsTabStop="False"/>
                        <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="2"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I should say that the Silverlight Slider control behaves quite differently from html sliders: it handles mouse clicks incorrectly. Instead of changing position of the thumb, it only moves it for a small distance. The only way to fix this issue is to write your own control, which is quite a complex task and requires some time. So far for this example I leave it as a known issue.

Source code and sample page

Source code: VideoPlayerSample.zip

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: