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…

Getting started

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:

http://www.youtube.com/get_video?
video_id=8yuIw_0ejLs&t=vjVQa1PpcFPrX3tFoahhu4DbniDIqTLkwybdm8xuCt8%3D&fmt=22

(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:
<MediaElement HorizontalAlignment="Left"
VerticalAlignment="Top"
Source="http://www.youtube.com/get_video?
video_id=8yuIw_0ejLs&t=vjVQa1PpcFPrX3tFoahhu4DbniDIqTLkwybdm8xuCt8%3D&fmt=22"/>

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:
<ExpressionMediaPlayer:MediaPlayer >
<ExpressionMediaPlayer:MediaPlayer.Playlist>
<ExpressionMediaPlayer:Playlist>
<ExpressionMediaPlayer:Playlist.Items>
<ExpressionMediaPlayer:PlaylistItem
MediaSource="http://www.youtube.com/get_video?
video_id=euwBiiiWcYE&amp;t=vjVQa1PpcFP0qThbkuhvZDM_uyxS8zusQuz1JvlPhyo=&amp;fmt=22"
Title="Star Trek Trailer" VideoHeight="800" VideoWidth="600"/>

</ExpressionMediaPlayer:Playlist.Items>
</ExpressionMediaPlayer:Playlist>
</ExpressionMediaPlayer:MediaPlayer.Playlist>
</ExpressionMediaPlayer:MediaPlayer>
10. If you now just go and hit F5 your application with HD video running in it should look somewhat like this:

Waching HD video from YouTube through Silverlight 3 MediaPlayer control

Waching HD video from YouTube through Silverlight 3 MediaPlayer control

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)

Comments (19)

  1. Good post… but where is the app?

    • Okay this is good suggestion – I will add it during the next day or two so you can all download it! Thanks!

      • Source and sample app is now available for your enjoyment :)

        • Thanks for this cool post. I’m running your sources but I have the following error : “Could not open http://….. AG_E_NETWORK_ERROR.

          Am I doing something wrong there ?

          Thanks

          • Hi BL, I don’t think you are doing anything wrong – it seems that YouTube has changed something after this post has been published. My MVP buddy has commented about that anv even blogged about it so you can take a look here: http://tr.im/xrV8 for his view. I’m sorry if this is true, but I don’t think there is much I can do to fix that since it’s not the problem on my side.

            However, thank you for your comment and I hope you will find other articles and tutorials here at UXPassion.com to be useful for you.

            Vibor

  2. The moment this got published YouTube and other folks tried to make this story muted by changing something about the files or encoding, or one of the parameters..

    The code works as it should, however YouTube and no doubt someone at Adobe has made a change in this so you aren’t authorized to view…

    • Hey Don,
      This is really strange, I’ve just tested several samples and things keep failing for now. YouTube and Adobe changing something so people can’t test and try this sample? If some of them is reading this I’d appreciate if they can send me an e-mail at vc[at]fatdux[dot]com so I can learn more about this situation. BTW, I think I can make it work again, this time using the HttpWebRequest and parsing its response parts and then using that as a Source for MediaPlayer. Now I was using Greasemonkey to get the specific “URL” but with HttpWebRequest I might be able to get URL even if they are changing it. At least that’s my guess – anyone feel free to correct me. I don’t know if I will have time to do this, but I can try and see.

      • Well, I tried it myself exactly the same things that you are talking about. But then i was repeatedly getting a Security exception. So i called my WCF service and used webclient there to fetch the source of the page. I then parsed that page to read a parameter “t”:blah-blah-blah.

        I constructed the url back again and sent it as the source to my player. Everything worked again. But the only problem here is that it would work for people on my network alone and not for anybody else. The “t” is being generated for each ip was what i could arrive at. So if i was running my server in the same ip from which i was browsing then i would get to see the video.

  3. I am curious myself. I’ll let you know what I find out. I had been working with a sample SL3 coverflow on Codeplex that goe out and fetchs Apple trailers (I put it up on my server just to check it) and it has te same kind of issue..

    http://silverlightcoverflow.codeplex.com/

    I just find it lame that people are going to this trouble to try to subvert people using Silverlight with H.264 just to protect H264 based Quicktime and now YouTube..

    When all this means is that folks will fnd ways around it. It’s like when AOL tried to keep changing instant messenger to keep it proprietary..

    People should have learned from that being proprietary is lame. Marketshare protectionists is all it boils down to, and the same people complain that other companies are proprietary and monopolistic when the first thing people do is make something proprietary.. themselves.

    • Yeah, I agree with you! I mean my intention here was just to play around and show the pretty cool feature that you can play HD vids from YouTube with Silverlight. No hidden agenda or something and now it’s broken… [sarcasm] Oh well, if it was for this article then I guess I should be flattered [/sarcasm]

      Anyways, let me know if you find out something and I will let you all know if I receive anything further.

      Vibor

  4. Are there any updates on this one?

    Thanks,

    • Thanks for the comment – but no – I don’t have any updates that would be relevant, sorry!

  5. I’ve been looking for a lot of time now in order to discover a simple way in order to download youtube videos .
    There are a lot of them including software tools , firefox plugins , various scripts etc.. Well most of them are good at doing their work .

    But I will mention a trick that it’s the most simple that I’ve found. This method includes using http://www.tubeleecher.com.

    Ok here are the steps involved

    1) visit http://www.tubeleecher.com
    2) copy the youtube link of the video you want to download
    3) paste it in the textbox on tubeleecher site
    4) press “Download” and save it

    You can watch the video you just downloaded with a flash player.
    get it here http://download.cnet.com/FLV-Player/3000-13632_4-10467081.html

    I’ve found also a youtube video explaining the whole procedure of getting youtube videos with the method described above.
    Watch it here — >http://www.youtube.com/watch?v=-h87N9F_mdc

    • R u stupid Duude?
      nobody here wants DOWNLOAD anything.. we’re programers.. we want to build apps to play youtube videos using the MediaElement.. not just download a stupid video..
      my god.. EVERYONE KNOWS how to download a YouTube Video.. and DOESNT EVEN MATTER.. cuz everyone can watch this on youtube..
      i hate when ppl waste our time just pretending he knows anything about the POST then SPREAD their stupid span comments.. like an *ss..
      get life dude.

      • Please, keep the rude words out of the comments! I’m glad to see that people do exchange their opinions here on this blog, but we need to maintain some level of language and mutual understanding.

  6. Please delete this post. It confuses people

    • Why you think so? It is here for educational and informative purposes…

  7. Very nice post,

    Even I am having the same error message like @BL when i tried to run this sample. Let me know if uouy guys have any update ont this issue. Anyway it was a very good attempt.

    I was doing some R&D on this topinc for last few days and I found this post very useful.

    You are the MAN!!

  8. Hi,

    The Expression Media Player is working fine, when we are working local files. when we are trying to play youtube videos i am getting troubles. It is not playing and not showing any thing results… Please let me know the Problem..
    Thanks
    regards

Trackbacks

  1. Pingback: Play HD YouTube videos with Silverlight | Silverlight Travel

  2. Pingback: progg.ru

  3. Pingback: progg

  4. Pingback: progg

  5. Pingback: progg

  6. Pingback: progg

  7. Pingback: Vibor Cipan

  8. Pingback: Vibor Cipan

  9. Pingback: Vibor Cipan

  10. Pingback: Vibor Cipan

  11. Pingback: ajlopez

  12. Pingback: Silverlight News

  13. Pingback: Jungchan Hsieh

  14. Pingback: ajlopez

  15. Pingback: ajlopez

  16. Pingback: fatihsenel

  17. Pingback: Silverlight News

  18. Pingback: Jungchan Hsieh

  19. Pingback: Silverlight News

  20. Pingback: Jungchan Hsieh

  21. Pingback: fatihsenel

  22. Pingback: fatihsenel

  23. Pingback: MSExpression

  24. Pingback: Richard Griffin

  25. Pingback: MSExpression

  26. Pingback: Richard Griffin

  27. Pingback: MSExpression

  28. Pingback: Richard Griffin

  29. Pingback: DotNetShoutout

  30. Pingback: markm

  31. Pingback: markm

  32. Pingback: markm

  33. Pingback: 在Silverlight播放YouTube HD视频 | Mdong·s Space(小气的神)

  34. Pingback: Anilal sambasivan

  35. Pingback: YouTube on Windows Phone with MediaElement | DeveloperQuestion.com

  36. Pingback: Mike Gorodilin

  37. Pingback: Ilyas Gunduz