Silverlight tutorial: Play HD YouTube videos with SL
Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today.
You can play HD YouTube videos with Silverlight 3 easily. Basically, since Silverlight 3 supports H.264 format you can create your own media player and play high definition video content directly from YouTube in your Silverlight application. Let me show you how you can do it…
1. First step is to get URL to the desired video in HD format. YouTube encodes every video in several different formats and for this tutorial I wanted to use HD MP4 format.
2. There are several different ways you can try to obtain URL for the HD video from YouTube. I’ve used the famous Greasemonkey Firefox add-in and YouTube HD Ultimate script. Basic idea is that this scrip will allow you to download YouTube videos in different formats, one of them being the HD MP4.
Okay, I have URL, what’s next?
3. So, by now you have some video URL or you can cheat and use this one:
(It’s Star Trek trailer – yeah I’m a Trekkie wannabe)
4. The rest is very simple – you can just set this URL as a Source for your MediaElement and when you hit F5 you should be able to see and enjoy some HD sweetness in Silverlight.
5. If you are hungry for some XAML code, then it’s here, for your reference:
Can it be better?
6. Sure it can – instead of using the MediaElement control, I would suggest you to try using the fully blow MediaPlayer control. You will have it under Assets pane in Expression Blend 3 (I assume you are using this one, right?).
7. So, you can just draw it on the top of your design surface and set its source.
8. To do that go to the Properties tab, locate the Media section and there you will find Playlist label. Click on New button and you will be able to add new PlaylistItem by cicking on Items(Collection) browse (…) button.
9. Just for your reference, XAML code will look somewhat like this:
Title="Star Trek Trailer" VideoHeight="800" VideoWidth="600"/>
10. If you now just go and hit F5 your application with HD video running in it should look somewhat like this:
11. I’ve just noticed that Adam Kinney has posted his post outlining some coolness involved with Silverlight MediaPlayer control so be sure to check it out.
Give me the source…
Sure, you can have it – thanks to the comment and several e-mails I’ve received – I’ve decided to share some code with you, so download it, play with it – but do it on your own responsibility (yes, you can consider this as a some sort of a disclaimer)