CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
433 
Although it’s up to you to write the code that reacts to markers, Silverlight gives you two tools: a 
MarkerReached event and the Markers collection in the MediaElement. But before you can investigate 
these details, you first need to consider how to add markers to your media file in the first place. 
Adding Markers with Expression Encoder 
Expression Encoder has a built-in feature for adding markers. Here’s how to use it: 
1. After you’ve imported a media file, choose the Window • Metadata to show the 
Metadata tab at the bottom right of the window. 
2. Drag the playback bar under the video file to the position where you want to 
place the marker. 
3. In the Metadata tab, find the Markers box. At the bottom of the Markers box, 
click the Add button to create a new marker, which is added to the list (see 
Figure 12-5). 
Figure 12-5. Adding a new marker in Expression Encoder 
www.it-ebooks.info
Add page numbers to pdf preview - insert pages into PDF file in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Guide C# Users to Insert (Empty) PDF Page or Pages from a Supported File Format
add page number to pdf reader; add a page to a pdf online
Add page numbers to pdf preview - VB.NET PDF Page Insert Library: insert pages into PDF file in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Easy to Use VB.NET APIs to Add a New Blank Page to PDF Document
add page to pdf; adding page numbers pdf file
CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
434 
4. Adjust the time if necessary, and supply the marker text in the Value column. 
5. If you want to use a marker for indexed navigation, you may want to select the 
Key Frame and Thumbnail check boxes next to your new marker. If you create 
a key frame at this location, playback can resume at precisely this location with 
minimal delay. If you create a thumbnail, you can show that thumbnail to the 
user. The user can click that thumbnail to tell your application to seek to the 
corresponding marker location. Both of these features apply only if you use 
Expression Encoder to generate a Silverlight video page (see step 7), although 
you can build similar features on your own. 
6. Return to step 2, and repeat to add more markers. You can also edit existing 
markers and click Remove to delete the currently selected marker. 
7. Expression Encoder can build a complete Silverlight 4–based media player to 
go along with your encoded video. To use this feature, choose Window 
Templates to show the Templates tab at the right. Then, choose an item from 
the Template list. The template determines the Silverlight version and the 
visual skin that the Silverlight player page uses—you see a thumbnail preview 
when you make your selection. If you choose (None), Expression Encoder 
doesn’t create a Silverlight video player. 
 Tip  When Expression Encoder creates a template-based media player, it generates an HTML entry page and 
several compiled XAP files. Expression Encoder doesn’t generate any source code or project files, so you won’t be 
able to fine-tune the media player after you create it. However, you can take an existing template and use it as the 
basis for your own custom template, which you can then use in conjunction with any Expression Encoder project. 
To do so, first pick the template you want to use as the starting point in the Templates tab. Then, click the tiny 
gear icon in the bottom-right corner of the tab, and choose Edit Copy of Template In 
Visual Studio. 
8. When you’re finished, click Encode to start encoding your video. 
Using Markers in a Silverlight Application 
The easiest way to show marker information is to handle the MarkerReached event of the 
MediaElement. The TimelineMarkerRoutedEventArgs.Marker property provides a TimelineMarker 
object. The TimelineMarker object includes the text of the marker (through the Text property) and the 
exact time where it’s placed (through the Time property). 
Here’s a simple event handler that copies the text from a marker to a TextBlock in the Silverlight 
page, as shown in Figure 12-6: 
private void media_MarkerReached(object sender, TimelineMarkerRoutedEventArgs e) 
lblMarker.Text = e.Marker.Text + " at " + e.Marker.Time.TotalSeconds + 
" seconds"
www.it-ebooks.info
C# Create PDF Library SDK to convert PDF from other file formats
them the ability to count the page numbers of generated PDF document in C#.NET using this PDF document creating toolkit, if you need to add some text
add a page to pdf file; add page to pdf acrobat
C# Word - Word Create or Build in C#.NET
also offer them the ability to count the page numbers of generated using this Word document adding control, you can add some additional Create Word From PDF.
add page numbers pdf file; add pdf pages together
CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
435 
Figure 12-6. Displaying a marker 
Rather than setting text, you can examine it and then determine the appropriate action to perform. 
Instead of waiting for the MarkerReached event, you can examine the Markers collection of the 
MediaElement. This technique is particularly useful if you want to use markers for navigation. For 
example, you can react to the MediaOpened event (at which point the Markers collection has been 
populated) and then display the marker information in a list: 
private void media_MediaOpened(object sender, RoutedEventArgs e) 
foreach (TimelineMarker marker in media.Markers) 
lstMarkers.Items.Add(marker.Text + " (" + marker.Time.Minutes + ":" + 
marker.Time.Seconds + ":" + marker.Time.Milliseconds + ")"); 
www.it-ebooks.info
C# PowerPoint - PowerPoint Creating in C#.NET
file but also offer them the ability to count the page numbers of generated NET using this PowerPoint document creating toolkit, if you need to add some text
add pages to an existing pdf; add page numbers pdf
C# Word - Word Creating in C#.NET
document file but also offer them the ability to count the page numbers of generated using this Word document creating toolkit, if you need to add some text
add page number to pdf preview; add pages to pdf acrobat
CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
436 
 Note appear in the Markers collection. 
That’s because this type of marker information can exist anywhere in the stream, and it may not have been 
downloaded when the MediaOpened event fires. To prevent inconsistent behavior, these types of markers are 
event at the appropriate time. If this isn’t the behavior you want, use the more common header-embedded script 
commands, which place them in the header (which is read before MediaOpened fires). 
You can also use the TimelineMarker.Time property to perform navigation: 
media.Position = selectedMarker.Time; 
media.Play(); 
Figure 12-7 shows the result. 
Figure 12-7. Navigating with a marker list 
www.it-ebooks.info
C# Excel - Excel Creating in C#.NET
document file but also offer them the ability to count the page numbers of generated using this Excel document creating toolkit, if you need to add some text
add page to pdf in preview; add page to existing pdf file
CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
437 
In this example, the code reads the markers from the media file. You can also create TimelineMarker 
objects programmatically and add them to the Markers collection after the media file has been loaded 
and the MediaOpened event has fired. In this case, the marker acts as a normal marker in all respects—
for example, the MediaElement fires the MarkerReached event when it’s reached. However, the marker 
isn’t persisted in the video file when you close and reload it. This behavior gives you the ability to load 
marker information from another source, like a text file. 
 Note  Expression Encoder includes a feature that lets you create image thumbnails for your markers. These 
images are embedded in your video file or linked to it in any way. If you use this feature, it’s up to you to show the 
images in your page and use code to navigate to the right position. If you look at the code for the video player 
application that Expression Encoder can create, you’ll find that it hard-codes the image file names and the marker 
positions, which is a suitable approach for automatically generated code but not as good an idea in application 
code that you need to maintain. 
VideoBrush 
VideoBrush is a Silverlight brush that paints an area with the video content that’s currently playing in a 
specified MediaElement. Like other Silverlight brushes, you can use VideoBrush to fill anything from a 
basic shape to a complex path or element. 
The basic approach to using a VideoBrush is straightforward. First, create a MediaElement for the 
file you want to play: 
<MediaElement x:Name="fireMovie" Source="fire.wmv" 
Height="0" Width="0"></MediaElement> 
Notice that this example sets the Height and Width of the MediaElement to 0. This way, the original 
video window doesn’t appear, and it won’t take up any space in your layout. The only video that will 
appear is the video that’s being painted by the VideoBrush. You can’t get the same result by setting the 
Visibility property—if you hide the MediaElement by setting its Visibility to Collapsed, you also end up 
hiding the content that the VideoBrush is painting. 
 Tip  In some situations, you may want to display the original video window (which is shown in the 
MediaElement) and the video content that’s painted by the VideoBrush. For example, you’ll want the original video 
window to remain visible if you’re using the VideoBrush to create a reflection effect. 
The next step is to choose the element you want to paint with the VideoBrush. You can use the 
VideoBrush anywhere an element expects a brush. If you’re dealing with the shape elements, you’ll set 
properties like Fill and Stroke. If you’re dealing with other elements, you’ll look for properties like 
Foreground and Background. The following example uses the VideoBrush to fill the text in a large 
TextBlock: 
www.it-ebooks.info
CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
438 
<TextBlock Text="Fiery Letters" FontFamily="Arial Black" FontSize="80"> 
<TextBlock.Foreground> 
<VideoBrush SourceName="fireMovie"></VideoBrush> 
</TextBlock.Foreground> 
</TextBlock> 
The SourceName property links the VideoBrush to the corresponding MediaElement. Figure 12-8 
shows the result—text that’s filled with roaring flames. 
Figure 12-8. Using video to fill text 
When you use the VideoBrush, playback is still controlled through the MediaElement. In the current 
example, the video file begins to play automatically, because AutoPlay is true by default. Alternatively, 
you can set AutoPlay to false and control playback using the familiar Play(), Stop(), and Pause() methods 
of the MediaElement. 
It’s also worth noting that you can set certain details in the MediaElement without affecting the 
VideoBrush. Properties that affect the visual appearance of the MediaElement, such as Height, Width, 
Opacity, Stretch, RenderTransform, and Clip, have no effect on the VideoBrush. (The obvious exception 
is Visibility.) Instead, if you want to alter the video output, you can modify similar properties of the 
VideoBrush or the element you’re painting with the VideoBrush. 
Video Effects 
Because the MediaElement works like any other Silverlight element and the VideoBrush works like any 
other Silverlight brush, you have the ability to manipulate video in some surprising ways. Here are some 
examples: 
• You can use a MediaElement as the content inside a content control, such as a 
button. 
• You can set the content for thousands of content controls at once with multiple 
MediaElement objects—although the client’s CPU may not bear up very well 
under the strain. 
• You can combine video with transformations through the RenderTransform 
property. This lets you move your video page, stretch it, skew it, or rotate it. 
www.it-ebooks.info
CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
439 
• You can set the Clipping property of the MediaElement to cut down the video 
page to a specific shape or path and show only a portion of the full frame. 
• You can set the Opacity property to allow other content to show through behind 
your video. You can even stack multiple semitransparent video pages on top of 
each other. 
• You can use an animation to change a property of the MediaElement (or one of its 
transforms) dynamically. 
• You can copy the current content of the video page to another place in your user 
interface using a VideoBrush, which allows you to create specific effects like 
reflection. 
• You can use the same VideoBrush to paint multiple elements (or create multiple 
VideoBrush objects that use the same MediaElement). Both of these techniques let 
you fill multiple objects with the same video or transformed versions of the same 
video. 
For example, Figure 12-9 shows a video with a reflection effect underneath. It does so by creating a 
Grid with two rows. The top row holds a MediaElement that plays a video file. The bottom row holds a 
rectangle that’s painted with a VideoBrush. The video content is flipped over by using the 
RelativeTransform property and then faded out gradually toward the bottom using an OpacityMask 
gradient: 
<Grid Margin="15" HorizontalAlignment="Center"> 
<Grid.RowDefinitions> 
<RowDefinition></RowDefinition> 
<RowDefinition></RowDefinition> 
</Grid.RowDefinitions> 
<MediaElement Grid.Row="0" x:Name="media" Source="test.wmv" 
Stretch="Uniform"></MediaElement> 
<Rectangle Grid.Row="1" Stretch="Uniform"> 
<Rectangle.Fill> 
<VideoBrush SourceName="media"> 
<VideoBrush.RelativeTransform> 
<ScaleTransform ScaleY="-1" CenterY="0.5"></ScaleTransform> 
</VideoBrush.RelativeTransform> 
</VideoBrush> 
</Rectangle.Fill> 
<Rectangle.OpacityMask> 
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
<GradientStop Color="Black" Offset="0"></GradientStop> 
<GradientStop Color="Transparent" Offset="0.6"></GradientStop> 
</LinearGradientBrush> 
</Rectangle.OpacityMask> 
</Rectangle> 
</Grid> 
www.it-ebooks.info
CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
440 
Figure 12-9. Reflected video 
This example performs fairly well. Each frame must be copied to the lower rectangle, and each 
frame needs to be flipped and faded to create the reflection effect. (Silverlight uses an intermediary 
rendering surface to perform these transformations.) But the work required to download and decode the 
frame of video is performed just once, and on a modern computer, the extra overhead is barely 
noticeable. 
One of the most impressive effects in the early days of Silverlight development was a video puzzle. It 
took a high-resolution video file and split it into a grid of interlocking puzzle pieces, which the user could 
www.it-ebooks.info
CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
441 
then drag apart. The effect—separate puzzle pieces, each playing a completely synchronized portion of a 
single video—was stunning. 
With the help of the VideoBrush, creating an effect like this is almost trivial. The following example 
shows a slightly simplified version of the original puzzle demonstration. It starts with a single window of 
puzzle pieces that’s divided into a configurable number of squares. When the user clicks a square in the 
video window, an animation moves it to a random position (as shown in Figure 12-10). Several clicks 
later, the video image is completely scrambled, but all the pieces are still playing the synchronized video. 
Figure 12-10. Scrambling a video while it’s playing 
To create this example, you first need the MediaElement that plays the video. Because all the puzzle 
pieces are showing portions of the same video and you want the playback synchronized, you need just 
one MediaElement. It’s given a Height and Width of 0 to make it invisible, so it appears only when used 
through the VideoBrush: 
<MediaElement x:Name="videoClip" Source="Butterfly.wmv" Height="0" Width="0" 
MediaEnded="videoClip_MediaEnded"></MediaElement> 
When the media ends, it’s started again, providing a looping playback: 
private void videoClip_MediaEnded(object sender, RoutedEventArgs e) 
videoClip.Stop(); 
videoClip.Play(); 
Next, you need a layout container that will hold the puzzle pieces. In this case, a Canvas makes the 
most sense because the animation needs to move the pieces around the page when they’re clicked: 
<Canvas Margin="20" x:Name="puzzleSurface" Width="300" Height="300" 
Background="White" HorizontalAlignment="Center" VerticalAlignment="Center"> 
</Canvas> 
www.it-ebooks.info
CHAPTER 12  SOUND, VIDEO, AND DEEP ZOOM 
442 
The most interesting code happens when a user clicks the Generate Puzzle button. This code 
calculates the size of rectangle needed to make a puzzle piece and then dynamically creates each piece 
as a simple Rectangle element. Here’s the code that starts it off: 
private void cmdGeneratePuzzle_Click(object sender, RoutedEventArgs e) 
// Get the requested dimensions. 
int rows; int cols; 
Int32.TryParse(txtRows.Text, out rows); 
Int32.TryParse(txtCols.Text, out cols); 
if ((rows < 1) || (cols <1)) 
return
// Clear the surface. 
puzzleSurface.Children.Clear(); 
// Determine the rectangle size. 
double squareWidth = puzzleSurface.ActualWidth / cols; 
double squareHeight = puzzleSurface.ActualHeight / rows; 
// Create the brush for the MediaElement named videoClip. 
VideoBrush brush = new VideoBrush(); 
brush.SetSource(videoClip); 
// Create the rectangles. 
double top = 0; double left = 0; 
for (int row = 0; row < rows; row++) 
for (int col = 0; col < cols; col++) 
... 
The next step is to make sure each Rectangle element shows only the region that’s assigned to it. 
You could accomplish this by applying a transform to the VideoBrush, but then you’d need to use a 
different VideoBrush object for each square. An alternate approach is to tweak the clipping region of 
rectangle. In this case, each rectangle gets the size of the full video window, but it’s clipped to show just 
the appropriate region. Here’s the code that creates the rectangles and sets the clipping: 
...             
Rectangle rect = new Rectangle(); 
rect.Width = puzzleSurface.ActualWidth; 
rect.Height = puzzleSurface.ActualHeight; 
rect.Fill = brush; 
SolidColorBrush rectBrush = new SolidColorBrush(Colors.Blue); 
rect.StrokeThickness = 3; 
rect.Stroke = rectBrush; 
// Clip the rectangle to fit its portion of the puzzle. 
RectangleGeometry clip = new RectangleGeometry(); 
www.it-ebooks.info
Documents you may be interested
Documents you may be interested