Create your own Hulu.com

“Video is the fastest growing advertising medium.”

Statements like this are very common, and I have to agree! Just look at the success of sites like YouTube… While I was in the US, I “discovered” hulu.com and I have to say that is one of the coolest services I have ever seen! It just sucks that it is not available outside of the US [sigh].

“Finally, TV on your terms. Watch your favorite videos right from your browser, anytime, for free. With full episodes of TV shows both current and classic, full-length movies, web originals, and clips of just about everything, Hulu is the place to watch and enjoy premium videos from the biggest names in entertainment.”

At the mix 10 keynote, Scott Guthrie mentioned that all the source for the media player used in broadcasting the winter Olympics is available on CodePlex (smf.codeplex.com). I started wondering how difficult it would be to create a site like hulu.com!

Now, before I start… a BIG disclaimer: This will not even come close… All I want to demo here is how to use the media player available in the Silverlight Media Foundation to view video! This will NOT worry about scale, search or even decent content! I will use some of the mix videos and allow users to browse a collection and then play them back as required!

This demo will ONLY focus on the VIDEO ON DEMAND scenario! The Silverlight Media Foundation also covers live video which I might cover in a future article.

So let's start with NotHulu. I created a very basic model to store my video metadata:

public class Video
{
    public string Title { get; set; }
    public string Description { get; set; }
    public string Thumbnail { get; set; }
    public string Source { get; set; }
    public bool IsSmoothStreaming { get; set; }
}

As you can see, this is only a very basic demo :)

Next, I created a ViewModel that loads some sample data (should actually be stored in a database). The VideosViewModel has a collection of videos and also keep track of the currently selected video.

public class VideosViewModel : ObservableObject
{
    public List<Video> Videos { get; set; }
    public Video CurrentVideo { get; set; }
}

If the CurrentVideo changes, I just manually start the video in the player! Here is the player XAML:

<p:Player x:Name="player" />

And here is my helper method to show a video on the player:

private void PlayVideoOnPlayer(Video video)
{
    CoreSmoothStreamingMediaElement me = new CoreSmoothStreamingMediaElement();
    if (video.IsSmoothStreaming)
    {
        me.SmoothStreamingSource = new Uri(video.Source);
    }
    else
    {
        me.Source = new Uri(video.Source);
    }
    me.AutoPlay = true;

    player.Content = me;
}

And that is enough to get my NotHulu site up and running! I know that there is soooooo much more involved in running a successful site like hulu.com but Silverlight Media Foundation makes it very easy to show video! Also note that one of the main reasons I created this project is to compare Silverlight Media Foundation with the new The Silverlight Hyper Video Player…

Look out for future posts on how these compare and contrast!