Click here to Skip to main content
Click here to Skip to main content

Stream YouTube Videos in WPF

, 30 Jun 2008
Rate this:
Please Sign up or sign in to vote.
WPF: A simple article on using WebBrowser to stream YouTube videos.

Introduction

This is going to be a quite small article, and probably not that useful, but I think it's quite cool all the same. Basically, this article shows how to play streaming videos from YouTube in WPF.

That's it.

So if this doesn't float your boat, I'd suggest stop reading right here.

This article also reads from an RSS feed... I know again, God you are always doing that, Sacha. Well, I promise I have other stuff; it's just that I like images and videos in WPF apps, and RSS feeds give you a nice diverse selection.

Prerequisites

This article relies on a piece of software being installed, which is: Microsoft .NET Framework 3.5 Service Pack 1 Beta.

This is required for the new WebBrowser control that comes with the SP1 installation.

OK, So What Does it Look Like

The app, when running, is yet another of my RSS feed search type apps. I promise this is the very last one of these. I just had to get this YouTube thing out of my system, so there you heard me say it: "no more RSS feed WPF articles!!!!!". Never. Never. I'm done with those.

Here are a couple of screenshots, assuming you clicked the Most Popular button:

You are free to drag the YouTube feed items around, providing you are currently in Drag mode, where the Mode is changeable using the right click context menu.

When you toggle out of Drag mode, you will be in Play mode, so will no longer be able to move the video items around. Instead, when you move the mouse over a video item, you will see a PLAY icon appear.

When you then click this PLAY icon, a new video viewer will be shown where you can view the YouTube video. This window is animated into/out of view. You should be able to open the viewer window whenever you are in Play mode and click on a unique video item.

That's all the screenshots, how does it all work?

How it Works

Well, starting at the top, the RSS feed ( ), this is actually just a bit of XLINQ, as follows:

public static List<YouTubeInfo> LoadVideosKey(string keyWord)
{
    try
    {
        var xraw = XElement.Load(string.Format(SEARCH,keyWord));
        var xroot = XElement.Parse(xraw.ToString());
        var links = (from item in xroot.Element("channel").Descendants("item")
                     select new YouTubeInfo
                     {
                         LinkUrl = item.Element("link").Value,
                         EmbedUrl = GetEmbedUrlFromLink(item.Element("link").Value),
                         ThumbNailUrl = GetThumbNailUrlFromLink(item),
                     }).Take(20);

        return links.ToList<YouTubeInfo>();
    }
    catch (Exception e)
    {
        Trace.WriteLine(e.Message, "ERROR");
    }
    return null;
}




// <summary>
/// Simple helper methods that tunrs a link string into a embed string
/// for a YouTube item. 
/// turns 
/// http://www.youtube.com/watch?v=hV6B7bGZ0_E
/// into
/// http://www.youtube.com/embed/hV6B7bGZ0_E
/// </summary>
private static string GetEmbedUrlFromLink(string link)
{
    try
    {
        string embedUrl = link.Substring(0, link.IndexOf("&")).Replace("watch?v=", "embed/");
        return embedUrl;
    }
    catch
    {
        return link;
    }
}


private static string GetThumbNailUrlFromLink(XElement element)
{

    XElement group = null;
    XElement thumbnail = null;
    string thumbnailUrl = @"../Images/logo.png";

    foreach (XElement desc in element.Descendants())
    {
        if (desc.Name.LocalName == "group")
        {
            group = desc;
            break;
        }
    }

    if (group != null)
    {
        foreach (XElement desc in group.Descendants())
        {
            if (desc.Name.LocalName == "thumbnail")
            {
                thumbnailUrl = desc.Attribute("url").Value.ToString();
                break;
            }
        }
    }

    return thumbnailUrl;
}

This is used within YouViewerMainWindow to create a bunch of YouTubeResultControl controls, which are then added to a DragCanvas. I can take no credit for the DragCanvas, I stole that straight from Josh Smith, using this code.

There is nothing special to say about the YouTubeResultControl controls; they are fairly simply controls, that simply contain a single YouTubeInfo item which is used within an event that is raised when the user clicks the internal YouTubeResultControl control's play button. YouViewerMainWindow uses the YouTubeInfo item to pass to the Viewer control, which in turn is responsible for playing the actual video.

So far nothing special, right? All very easy stuff.

The only part that's a bit interesting is that we can play the YouTube video in the new WebBrowser control. This is neat.

How does this work? Normally, WPF only lets you play Windows Media Player supported files that are local or MMS prefixed streams.

YouTube is neither of these, so how does it work? Well, luckily, the RSS feed contains enough information for us to do some string manipulation to get a new URL that points to something much more interesting.

Basically, from the RSS feed, we can get the following string: http://youtube.com/?v=FhZ-HsiS8aI. But if we mess around with it a bit, we can get: http://www.youtube.com/v/FhZ-HsiS8aI&hl=en, which is a link to a SWF (Flash) file that will play directly in the new browser if you paste this in to a browser address bar. Aha.

So we can use this new URL and use that as the Source property for the new .NET 3.5 SP1 WebBrowser control, and we get the usual YouTube player we are used to, for free. Neato. I also tried this with the .NET 2.0 WinForms WebBrowser (interop, so the WindowsIntegration DLL required) control, and the WPF Frame control, but they didn't work like the new .NET 3.5 SP1 WebBrowser control.

I had originally wanted to use the .NET 3.5 SP1 WebBrowser control, within my latest 3D WPF article MarsaX, but that didn't work on account of the fact that the new .NET 3.5 SP1 WebBrowser control is actually a HWnd based control, and really not much like a WPF control. So it doesn't play nice like other WPF controls, which is a shame, but it has led to this article.

And you know what? That's it.

As I say, this was a very quick and small article, so I don't expect too many votes for this one... But if you feel you want to vote, feel free, thanks.

License

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

About the Author

Sacha Barber
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)
 
- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence
 
Both of these at Sussex University UK.
 
Award(s)

I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermaria.korsun29-Aug-13 22:29 
Questionshow bar botton PinmemberMember 955385029-Oct-12 13:26 
QuestionPlay automatically PinmemberMember 195943711-Oct-12 7:09 
GeneralMy vote of 5 Pinmemberbuddhika031812-Aug-12 8:23 
GeneralMy vote of 5 PinmemberMadhan Mohan Reddy27-Jun-12 20:55 
GeneralMy vote of 5 Pinmembersayooj cyriac22-May-12 21:45 
Generalgreat !! Pinmemberyonop17-Jan-12 4:45 
GeneralMy vote of 5 Pinmemberseden seden16-Dec-11 21:04 
GeneralError :In the Populate funtion Pinmemberbigaditya13-Mar-11 16:54 
GeneralRe: Error :In the Populate funtion PinmvpSacha Barber5-Apr-11 5:28 
Generallocal viewer error PinmemberMegaGigsLtd4-Sep-10 14:59 
QuestionCreating a web chat facility in visual studio 2008 using Visual Basic Pinmembershelle858-Apr-10 6:47 
GeneralVB.NET ver PinmemberBernard_Yanga5-Feb-10 7:15 
GeneralRe: VB.NET ver PinmvpSacha Barber5-Feb-10 20:58 
GeneralWindows 7 problem Pinmemberfanoo4-Aug-09 21:16 
GeneralRe: Windows 7 problem PinmvpSacha Barber4-Aug-09 21:46 
GeneralRe: Windows 7 problem Pinmemberfanoo5-Aug-09 9:14 
GeneralRe: Windows 7 problem PinmvpSacha Barber5-Aug-09 9:34 
GeneralRe: Windows 7 problem Pinmemberfanoo22-Aug-09 2:08 
GeneralRe: Windows 7 problem PinmvpSacha Barber22-Aug-09 23:46 
GeneralRe: Windows 7 problem PinmemberHunsoul2-Aug-10 6:38 
GeneralRe: Windows 7 problem Pinmemberyoavs5-Oct-10 14:28 
GeneralRe: Windows 7 problem PinmvpSacha Barber5-Apr-11 5:29 
Generalfile download security warning PinmemberMember 473915513-Jul-09 12:56 
GeneralRe: file download security warning PinmvpSacha Barber13-Jul-09 21:43 
GeneralRe: file download security warning PinmemberMember 473915515-Jul-09 6:33 
GeneralRe: file download security warning PinmemberMember 473915515-Jul-09 6:53 
GeneralRe: file download security warning PinmvpSacha Barber15-Jul-09 10:05 
GeneralRe: file download security warning PinmemberMember 473915515-Jul-09 10:21 
GeneralRe: file download security warning PinmvpSacha Barber15-Jul-09 10:50 
GeneralRe: file download security warning Pinmemberyoavs5-Oct-10 14:30 
QuestionRenderTrasform on the WebBrowser containing the player PinmemberBLATEER14-Jun-09 7:01 
AnswerRe: RenderTrasform on the WebBrowser containing the player PinmvpSacha Barber14-Jun-09 21:36 
GeneralVista 64 IE7 problem Pinmembermfmanca26-Feb-09 13:21 
GeneralRe: Vista 64 IE7 problem PinmvpSacha Barber1-Mar-09 11:00 
Generalstreaming videos PinmemberNicko Satria Utama16-Jan-09 5:03 
GeneralMerry Christmas PinmemberAbhijit Jana24-Dec-08 3:11 
GeneralRe: Merry Christmas PinmvpSacha Barber24-Dec-08 5:55 
Ah thanks man, thats very nice.
 
You have a great one and all.
 
Sacha Barber
  • Microsoft Visual C# MVP 2008
  • Codeproject MVP 2008
Your best friend is you.
I'm my best friend too. We share the same views, and hardly ever argue
 
My Blog : sachabarber.net

GeneralThanks Sacha Pinmemberzues_bigglo23-Dec-08 5:52 
GeneralRe: Thanks Sacha PinmvpSacha Barber23-Dec-08 22:06 
GeneralPlay SWF in WPF Pinmemberctrlnick14-Nov-08 9:25 
GeneralRe: Play SWF in WPF PinmvpSacha Barber17-Nov-08 9:44 
GeneralThe tag 'WebBrowser' does not exist in XML namespace Pinmemberdaveice15-Oct-08 22:40 
GeneralRe: The tag 'WebBrowser' does not exist in XML namespace PinmvpSacha Barber16-Oct-08 3:02 
QuestionQuestion on this article Pinmemberchico@dsi28-Sep-08 8:55 
AnswerRe: Question on this article PinmvpSacha Barber28-Sep-08 21:53 
QuestionMine breaks....? Pinmemberjcovert18-Jul-08 6:05 
AnswerRe: Mine breaks....? Pinmemberjcovert18-Jul-08 6:14 
GeneralRe: Mine breaks....? PinmvpSacha Barber18-Jul-08 6:21 
JokeThis is awesome. PinmemberDr.Luiji17-Jul-08 10:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 30 Jun 2008
Article Copyright 2008 by Sacha Barber
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid