Silverlight is dead, long live Silverlight 5: TrickPlay or Double your speed

If you have watched any of my videos, then being able to speed them up is a great idea, now if there was only a way to get rid of the ummmmmmmmms.

How do you do that?


  • Normally you would go to and expect to type in “TrickPlay” or MediaElement to get a search result with a cool video, but not in this case, for TrickPlay, you can skip it for the MediaElement.  The videos appear to discuss, and there is a Spanish video on the use of MediaElement in Silverlight 4

MSDN does have a two solid articles:


You can do TrickPlay with no code behind, I downloaded an MP4 video from Channel 9, change the line under the MediaElement Source=”demo.mp4” to the name of the video you want to use in your example.

Naturally you can use code behind, but I wanted to make this a simple and easy blog for you to enjoy! image



Code Snippet

  1.   <UserControl
  2. x:Class="TrickyPlayExample.MainPage"  
  3. xmlns=""  
  4. xmlns:x=""  
  5. xmlns:d=""  
  6. xmlns:mc=""  
  7. mc:Ignorable="d"  
  8. d:DesignHeight="300"  
  9. d:DesignWidth="400" xmlns:sdk="">
  10.     <Grid x:Name="LayoutRoot" Background="White" Width="400">
  12.         <!-- Volume slider. This slider allows a Volume range between 0 and 1. -->
  13.         <StackPanel
  14.                     Height="300"
  15.                     HorizontalAlignment="Left"
  16.                     Margin="12,0,0,0"
  17.                     Name="stackPanel1"
  18.                     VerticalAlignment="Top" Width="360">
  19.             <TextBlock
  20.                     Height="23">
  21.                     Video speed use blue slider
  22.             </TextBlock>
  23.             <TextBlock
  24.                     Text="{Binding ElementName=media,Path=PlaybackRate,StringFormat=\\cf1 {0\\cf1 }x}"
  25.                     Height="23"/>
  26.             <Slider Opacity="1"
  27.                     Background="Blue"
  28.                     Minimum="1"
  29.                     Maximum="2"
  30.                     SmallChange="0.5"
  31.                     LargeChange="0.5"
  32.                     Height="30"
  33.                     Value="{Binding ElementName=media,Path=PlaybackRate,Mode=TwoWay}" />
  34.             <TextBlock
  35.                     Foreground="Black"
  36.                     Height="16"
  37.                     FontWeight="ExtraBold">Volume (use red Slider)</TextBlock>
  38.             <Slider Name="volumeSlider"
  39.                     Minimum="0"
  40.                     Maximum="1"
  41.                     Background="Red"
  42.                     Width="Auto"
  43.                     Height="30"
  44.                     Value="{Binding ElementName=media, Path=Volume, Mode=TwoWay}" />
  45.             <MediaElement
  46.                     x:Name="media"
  47.                     Source="demo.mp4"
  48.                     Width="266"
  49.                     Height="186"/>
  50.         </StackPanel>
  51.     </Grid>
  52.   </UserControl>