Silverlight tutorial: Play HD YouTube videos with Silverlight
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&t=vjVQa1PpcFP0qThbkuhvZDM_uyxS8zusQuz1JvlPhyo=&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:
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)
46 Responses to “ Silverlight tutorial: Play HD YouTube videos with Silverlight ”
Trackbacks
- Play HD YouTube videos with Silverlight | Silverlight Travel
- progg.ru
- progg
- progg
- progg
- progg
- Vibor Cipan
- Vibor Cipan
- Vibor Cipan
- Vibor Cipan
- ajlopez
- Silverlight News
- Jungchan Hsieh
- ajlopez
- ajlopez
- fatihsenel
- Silverlight News
- Jungchan Hsieh
- Silverlight News
- Jungchan Hsieh
- fatihsenel
- fatihsenel
- MSExpression
- Richard Griffin
- MSExpression
- Richard Griffin
- MSExpression
- Richard Griffin
- DotNetShoutout
- markm
- markm
- markm
- 在Silverlight播放YouTube HD视频 | Mdong·s Space(小气的神)
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
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.
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
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!
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