Silverlight video player. YouTube style.

In the previous article I explained how to implement a simple video player with some controls. It works well, but it has a generic style. In this article I’ll explain how to restyle the video player so that it looks the same as YouTube player.

The final result is in the picture below, and at this link you can see how it looked before.

Silverlight MediaElement tutorial. Creating a video and audio player.

Video in Silverlight is played by using the built-in MediaElement class. You might have seen some video frameworks like Silverlight Media Framework, Expression Encoder Player or Open Video Player, they all are based on this class. Though these frameworks look quite complex, in reality they are just wrappers around the built-in MediaElement or SmoothStreamingMediaElement classes and all that they do is adding design, control buttons and some extra functionality like advertisement and diagnostics. So you can build such video player by yourself.

The simplest media player

Here is the simplest code which will work:

<MediaElement 
    Source="http://ecn.channel9.msdn.com/o9/content/smf/progressivecontent/wildlife.wmv" />

It will start playing video as soon as the page is loaded and the video fills the entire page uniformly (keeping its aspect ratio).

If it doesn’t work, make sure that the address of your page looks like `http://…` and not `file://…`. You can fix the url in this way by adding a web application project to your solution and running it.

Now I will explain how to improve the code above so that it looks more like a video player.