Youtube Video search and play control

Published on by Inno Design

Today we gonna tell about making a project that could extract the video from Youtube using a keyword entered by the user and then playing it.

We’ll make a control and you would be able to use it any where you want.

Before going forward let me tell you what u’ll need for it.

You’ll need a developer key issued by google to make use of any of Google API. here we’ll be using Youtube API.

here are some links.

http://code.google.com/apis/youtube/dashboard/ (for getting DEV key)

http://code.google.com/apis/youtube/code.html#client_libraries( Download API).

So let me tell you how it gonna look like

image

Designing is pretty easy

  • just take one panel
  • set dock property to top
  • right click over it and press bring to front
  • drag and drop a textbox and a button inside it and align them
  • take a flowlayout panel
  • set dock property to fill
  • right click over it and choose bring to front.

So now you are completed with design

so i guess we should start coding don’t you?. really excited to listen songs in your apps. ;)

so here we go

Class variables are as given

string id;
static public Point loc;
public bool Search;
public string currentlink = “”;
string item;
bool feed;
Feed<Video> yt_vid;
YouTubeRequestSettings Ysettings = new YouTubeRequestSettings(“Your app name”, “Your app name”, “Your Dev key”, “Username”,”Password”);
YouTubeRequest Yrequest;
public static YouTubeQuery query = new YouTubeQuery(YouTubeQuery.DefaultVideoUri);
List<Video> _vidlist = new List<Video>(); 
YouTubeService Yservice = new YouTubeService(Your app name”, “Your app name”, “Your Dev key”);
static public List<AtomCategory> atcat = new List<AtomCategory>();
static public List<string> cat_vid = new List<string>();

So i guess you need some explanations that what are these strange things don’t you?

Well. String id is for our Video ID, its a simple id that you see in any Video URL of Youtube.

Current link will give us the the link of selected Video.

Some important variables are

  • YouTubeRequestSettings : It’ll provide settings for your application. It takes mentioned parameters and all of them are string. It’ll used for making our YouTubeRequest Variable
  • Youtube querry will be used or searching video
  • List of video has been taken as the number of extracted video can be any thing from 0 to 25 or even more.so i have taken list instead of array
  • Another one is YouTubeService
  • List<AtomCategory> has been choiosen for choosing catagory of video

Click event of button will be as shown

private void button1_Click(object sender, EventArgs e)
{
Search = true;
Yrequest = new YouTubeRequest(Ysettings);
this.item = txtSearch.Text;
query.Query = item.Replace(‘ ‘, ‘+’);
yt_vid = Yrequest.Get<Video>(query);
for (int i = 1; i < 3; i++)
{

this.Height *= i;
flowLayoutPanel1.Height *= i;
}
printvids();
Search = false;
}

So you can see we have used Youtube settings for making Youtube request.

we took the search term and assign that to the youtubequery

in the next line we just increased the size of Flowlayout panel.

printvids function is as given below

void printvids()
{

foreach (Video entry in yt_vid.Entries)
{
foreach (MediaContent Mcon in entry.Contents)
{
try
{

int x = Mcon.Url.IndexOf(‘?’);
id = Mcon.Url.Remove(x);
id = id.Substring(25);

Label lblviewcount = new Label();
lblviewcount.ForeColor = Color.White;
lblviewcount.Text = entry.ViewCount + ” VIEWS”;
lblviewcount.Width = flowLayoutPanel1.Width;

PictureBox img = new PictureBox();
img.SizeMode = PictureBoxSizeMode.StretchImage;
//Bitmap bmp = new Bitmap(“http://img.youtube.com/vi/_XUe6Obeyk0/0.jpg”);
img.ImageLocation = “http://img.youtube.com/vi/” + id + “/0.jpg”;
img.Width = 170;
img.Height = 170;
img.Left = flowLayoutPanel1.Left;

LinkLabel lblName = new LinkLabel();
lblName.AccessibleName = id;
lblName.ForeColor = Color.White;
lblName.Text = entry.Title.ToString();
lblName.Width = flowLayoutPanel1.Width;
lblName.Click += new EventHandler(lnk_click);
flowLayoutPanel1.Controls.Add(lblviewcount);
flowLayoutPanel1.Controls.Add(img);
flowLayoutPanel1.Controls.Add(lblName);

//if (flowLayoutPanel1.InvokeRequired)
//{
//    connect add = new connect(addcontrol);
//    object[] param = new object[3];
//    param[0]= lblName;
//    param[1]=lblviewcount;
//    param[2]=img;
//    flowLayoutPanel1.BeginInvoke(add);
//}
}
catch (Exception ex)
{ }

}

}
}

In the click event of button we had extracted the videos and added them into Feed<Video>

In this method we extract video from the feed and the video infos from the video to print to the form, so we extracted the infos into MediaContent.

using following lines we got the id of Youtube video

int x = Mcon.Url.IndexOf(‘?’);
id = Mcon.Url.Remove(x);
id = id.Substring(25);

Using MediaContent we extracted infos like URL and Thumbnail of the videos. and as we got them added into linklabel, label and picture box and added them into Flowlayout control to display them on our Control.

By now we have created Search control

Now will do something that will be able to play video extracted from Youtube.

It’ll be quite easy as we are going to just create an html file and then embedding code of video in that html file

Now we will do it by clicking on linklabel.

So we need a form that will contain a web browser to run our .htm file .

The click event of the linklabel hase been defind in the above method

The event definition will be as given

private void lnk_click(object sernder, EventArgs e)
{
LinkLabel lnk = (LinkLabel)sernder;
id = lnk.AccessibleName;
Save(“video.htm”);                                                                                                 Player ob = new Player();
ob.Show();
}

PLayer is another form  that contains our web browser.

Here we created a link label and assinged the ID of selected video as shown above. in the previous method we had taken id of video in the accessible name of linklabel. so we got the selected video id.

Now we need to write embedding code to the html file. the save method does the same.

But be sure to add an html file exclusively to your project and pass the name of the html file to save method.

Save method is as shown below

public void Save(string fileName)
{
FileStream fs = new FileStream(fileName, FileMode.Create, FileAccess.ReadWrite);
StreamWriter sw = new StreamWriter(fs);
try
{
string  Embedcode =@”<body style=” + “background:#000000″ + “>” + “<div id=\”video” + id + “\”><object width=\”425\” height=\”355\”><param name=\”movie\” value=\”http://www.youtube.com/v/”+ id + “&rel=1\”></param><param name=\”wmode\” value=\”transparent\”></param><embed src=”\”http://www.youtube.com/v/” + id + “&rel=1\”type=\”application/x-shockwave-flash\” wmode=\”transparent\” width=\”425\” height=\”355\”>></embed></object></div></body>”;”

sw.WriteLine(Embedcode);
}

finally
{
sw.Close();
fs.Close();
}
}

Embedcode has been defined and written in the html file.

rest of the line of click event of LinkLabel just show the Player form.

The load event of the Player form is as given below

private void Player_Load(object sender, EventArgs e)
{
this.Left = UserControl1.loc.X;
this.Top = UserControl1.loc.Y;
string path = Path.GetFullPath(“video.htm”);
webBrowser1.Navigate(path);
}

Now would you like to believe that you have just coded your very own Youtube Control. :)

Here’s the working snap

image

Hope you’ll find this post useful. Keep on posting suggestions and questions.

THX

You can get our working project on youtube from http://syd.codeplex.com.

Published on Youtube

Comment on this post