Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Create your own Hulu.com

, 1 Apr 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
This demo will ONLY focus on the VIDEO ON DEMAND scenario!

“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 Smile | :)

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!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

rudigrobler

South Africa South Africa
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150327.1 | Last Updated 1 Apr 2010
Article Copyright 2010 by rudigrobler
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid