Jesse Liberty

The Silverlight HyperVideo Player has met with strong support and interest. This mini-tutorial is the first in a series that will walk through the design and delivery of this project.

Understanding the Silverlight HVP

If a picture is worth a thousand words, a video must be worth an order of magnitude more. This video, created as part of the HVP sample set, explains the concepts behind the HVP.

Design Guidelines

I’m a big believer in diving right into the code, but I did want to mention just a few of the design/coding guidelines I imposed on myself when writing this, and we can explore their motivation, implications and outcome as we go:

Overarching message of the code: Silverlight is an application development framework: treat it like one.

• Write Clean Code
• Use Test Driven Development
• Let the Design Emerge
• Understand that the first version is just the launching point for subsequent versions
• Community involvement (including design and coding) should grow over time
• When possible, illustrate “best practices”

Getting Started

The premise of agile programming dove-tails neatly with the approach I’ve been advocating for two decades: get it working and keep it working.  I can’t claim any high minded values behind this; it is just what works for me. Worse, it is what I end up doing, even when I’m supposed to be doing design-first.  I simply can’t design in a vacuum and I get very tired and crabby when I do try to design in advance because it doesn’t work. It never works because

• I learn more about how I want the design to be as I write code
• Requirements change
• The bigger the design, the more likely I am to get it wrong
• Requirements change
• The bigger the design, the more reluctant I am to change it
• And requirements change

The old argument was “don’t paint yourself into a corner.”  On reflection, what I found was I was always painting myself into corners, but if I only painted for a few minutes before fixing the problem I was a lot better off than if I’d spent all day at it.

Emerging Design

I love the term emerging design because it sounds so much better than “figure it out as you go.”

We’ll come back to the most effective technique I know of for making all this work in large complex applications when we talk later about Test Driven Design, but let’s get started.  Here is what I know:

• I want the program to be created from independent components, and MEF will provide a great solution to that.  MEF is non-trivial, however and I don’t want to deal with anything that complex until I have something working.
• Creating a media player is lots of fun, lots of folks have done it, most of the implementations suck. There are Microsoft folks working on an open source solution (The Silverlight Media Framework that they, for some bizarre reason, refer to as the “Smurf”) that not only doesn’t suck (except its acronym) but is really good.  Let’s use that.
• MVVM is hot stuff.  Moreover, it’s hot stuff for all the right reasons. Let’s use that.

The First Thing To Get Working

One of the premises of “Emerging Design” that I like  a lot is this: don’t design anything until you’re going to implement it.  Do not say to yourself “I know I’m going to need this, so let me put in all the hooks I’ll need.”  Reason: when you predict what you’ll need, you are usually wrong. Work done today does not save you work later, but work not done today may never need to be done at all.

In that spirit, the first thing to do is to create an application that has the Silverlight Media Framework player in it, and get that working in a very simple page.

Since adding a SMF is a well documented and short set of steps, I’ll just take my lead from the SMF documentation and create a simple Silverlight Application named HVPT1 (Tutorial 1). That will create two projects: HVPT1 and HVPT1.web.  The startup project will be HVPT1.web, the startup page will be HVPT1TestPage.aspx and the first Silverlight page will be in the HVPT1 (client side) project, the file mainpage.xaml

Getting the SMurF Libraries

For the SMF to work, we need the four SMF libraries, which can be downloaded from here, as well as the IIS Smooth Streaming Player Development Kit which is available here.  The Smooth Streaming Player Development Kit (SSPDK) is unpacked by double clicking on the downloaded .exe.  Place all five DLLs (the four from the SMF and the unpacked SSPDK into the same directory.

In HVPT1 add a reference to all the DLLs except SilverlightMediaFramework.data.dll and then replace the header of HVPT1.MainPage.xaml with the following:

<UserControl x:Class="HVPT1.MainPage"
    xmlns:p="clr-namespace:Microsoft.SilverlightMediaFramework.Player;assembly=Microsoft.SilverlightMediaFramework.Player"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="640"
    d:DesignHeight="480">

Note that the second line declares a namespace alias “p” that refers to the Microsoft.SilvelrightMediaFramework.Player.  You can now declare the player and its source, which must be a streaming media file. Here’s the entire .xaml file:

<UserControl x:Class="HVPT1.MainPage"
    xmlns:p="clr-namespace:Microsoft.SilverlightMediaFramework.Player;assembly=Microsoft.SilverlightMediaFramework.Player"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="640"
    d:DesignHeight="480">

    <Grid
        x:Name="LayoutRoot">
        <p:Player>
            <p:CoreSmoothStreamingMediaElement
                AutoPlay="True"
                SmoothStreamingSource="http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest" />
        </p:Player>
    </Grid>

</UserControl>

Build the application and watch the streaming movie. There is nothing more satisfying than getting something (anything) working!

Download the source code