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?

Silverlight.NET

• Normally you would go to https://silverlight.net 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:

• Good reference, small but useful code snippet:
  • MediaElement Class
• Overall good article:
  • How to: Control a MediaElement (Play, Pause, Stop, Volume, and Speed)

Discussion

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!

Code Snippet

1.   <UserControl
2. x:Class="TrickyPlayExample.MainPage"  
3. xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4. xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"  
5. xmlns:d="https://schemas.microsoft.com/expression/blend/2008"  
6. xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"  
7. mc:Ignorable="d"  
8. d:DesignHeight="300"  
9. d:DesignWidth="400" xmlns:sdk="https://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
10.     <Grid x:Name="LayoutRoot" Background="White" Width="400">
11.         
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>