Silverlight Media Player with Ad Overlays: Part 1

Tim Sneath has a very nice walkthrough on creating basic ad overlays. To summarise, he demonstrates how to embed a video, and wire up an event handler to display an ad overlay when a user clicks the video. You can find his walkthrough here: More Fun with Silverlight Video: Ad Overlays

Tim Heueur, using very similar methods, walks you through creating text based overlays that appear when a 'Marker' is encountered. A 'Marker' is simply a point in time along the timeline of a video. You can code around these markers, and wire event handlers to perform custom operations when they occur. You can find his walkthrough here: Silverlight: Creating Video with Timed Overlays

What I am going to 'attempt' is to create a fairly simple media player with a play list. The play list will be populated from an RSS feed (e.g. The ninemsn top 10 most popular videos), and some type of contextual advert will scroll over the video while its playing. The ad chosen to appear will be selected based on keywords in the description field for the video. So basically if a user selects a video related to technology, an advert that is also related to technology will be displayed.

The media player itself should scroll through the list of videos 1 by 1, at an interval of 10 seconds or so. To achieve this I will need to tile media elements, and every 10 seconds, provide some type of funky animation to slide the current video out of the view port, and slide the next video on the playlist into the view port. (Thanks to my dazzling design talent I'm sure this will absorb most of my time)

Finally, As the videos are shuffled I do not want the next video to play automatically, but instead display a static image related to the content. The image is intended to provide a visual clue as to the content of the video, this is so the user doesn't need to begin streaming unless they want to view the whole piece.

Side Note: I've encountered some issues recently while executing a number of my projects on my local web server. Hopefully these problems don't inhibit my progress too much.

Getting Started:

I'm pretty keen to have a good play with Expression Blend 2 May Preview, so the first thing I'm going to do is open up blend and create a new project.

Creating Media Elements:

By default the tool for creating a Media Element is not visible on the toolbar, you can add it by clicking on the chevron symbol, and searching for "Media":



For this implementation I'm going to need 5 Media Element tiles. The animation I will create will allow the tiles to scroll up, or scroll down, therefore I need to tile them vertically. 5 seems like a lot, however I intend to have a 3d animation, and for each animation sequence 4 tiles will used. When scrolling up, the upper 4 tiles will be visible, and when scrolling down the bottom four tiles will be visible.

You can see the configuration of the Media Elements in the following screenshot. I currently have my main canvas selected (blue border around the canvas). As you can see its slightly larger then the Media Element, the space at the bottom is where my playlist will be.

For the time being, all my Media Elements are pointing to the same local source. It's actually a video of a butterfly that comes as a sample with Vista. Until I work out reading the playlist from a feed, this silly butterfly video will have to do =)

Creating the Playlist:
Next I need to create my playlist. You can see in the following screenshot, its just a number of rectangles and text blocks. I will need to create some animations, and wire up some event handlers, so when a user clicks on the media name, or the scroll bar the media swap animation will begin. We will also need to create some animations for the playlist entries. So when a user clicks the Up/Down arrows, the media name showing will also change to coincide with the next video.


Adding Images:
The playlist is quite ugly in its current state, so I added some colour and images to brighten in up. Again the tool to add images is not in the toolbar by default, so you will need to add it manually as we did for the Media Element tool.

My playlist now looks like this:


Ad Overlay:

What you may have noticed on the screen shot earlier, is the white text that extends to the right of the canvas. This is my sample ad, I have created an animation that once you click play on a video, this text will begin to scroll across the top of the video. I created this animation using the same process detailed in Tim Sneath's walkthrough More Fun with Silverlight Video: Ad Overlays.

Creating Animations:

As mentioned earlier, I want to have a 3d animation for the shuffling of the videos. What I'm aiming for is when a user clicks on one of the directional arrows, to have the current video recess into the background fractionally, then slide up or down and out of view. As the current video slides out of view, the next video will slide into view. The next video will also be recessed slightly, and once it reaches the centre of the view port, it will move toward the viewer (or look as such) until it occupies the entire view port area.

The following images show how the animation will look mid transition, first on the work surface, and then executing in the browser:

Work surface:


In a browser:


The animations themselves are very simple to create, how complex / difficult you make it is up to you. Because I've chosen to use 5 slides, I need to create 5 animations, 1 for each slide configuration. Silverlight is fantastic in that I do not need to create different animations for both the up and the down actions. All I need to do is create 1 animation for each slide configuration.

When a user clicks up or down, we need to only call the animation that leads into the configuration we want to be in, Silverlight will handle the direction the Media Elements move. The only caveat in doing the animation this way, is that you must not specify the locations of the Media Elements at the start of your Timeline. e.g. If you specify that Media Element 1, must start at TOP=360px, and will end at TOP=0px, then the element will only ever move downwards. Where, if you don't specify a starting position, and only specify that Media Element 1 will end at TOP=0px, then Silverlight will move it from where ever its currently located, and in any direction it needs to. (If that wasn't clear enough I apologise, I'm still hung over thanks to Craig)

Firing an animation:

Actually firing an animation is a piece of cake. First, what I need to do is wire up an event handler to the Up/Down arrows in the play list. This is also very simple as you can see from the following code snippet:

this.MediaUp = this.control.content.findName("MediaUp");
this.MediaUp.addEventListener("MouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.handleMediaUp));

this.MediaDown = this.control.content.findName("MediaDown");
this.MediaDown.addEventListener("MouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.handleMediaDown));

I setup these events in my onLoad handler, you can also add references to event handlers in the XAML itself.

The code to fire an animation looks something like this:

this.control.content.findName("VideoChange" + reqState).Begin();

The names of my animations are "VideoChange1", "VideoChange2", "VideoChange3", "VideoChange4", and "VideoChange5". "reqState" is how I identify which animation the user needs to see.

Bugs/ Issues:


I found the Text Blocks that I created where causing errors when the project was executed. "ErrorCode: 2012". It appears that XAML being output for the Text Block isn't recognised by Silverlight i.e. 'Language="en-au"'. Until I work out a real solution, all I've done to get around it is remove the bold text below.

<TextBlock Width="152" Height="88" Canvas.Left="-304" Canvas.Top="176" TextWrapping="Wrap">
<Run Language="en-au">Media Name 1</Run>
</TextBlock>

Final:

I'm tired and hung over, and can't wait to hit the sack. Hopefully in the next post I'll get to show the Silverlight "Downloader" object. The "Downloader" object is modelled after the XMLHttpRequest API's, so they should be good fun to play with.

If you want any more information, more code, or has any questions or suggestions please give me a yell @ allan.waddell@hotmail.com (or any of my multitude of email addresses). Have fun.