I will discuss how to integrate youtube video in asp.net. Youtube provides the API to access the its huge database of videos. It also provides search facility and customized player for integration.
First thing you need is to get developer key for accessing youtube service. You can get it from here. Once you get the developer you can use the API URL to retrieve youtube videos. The URL is,
1: http://www.youtube.com/api2_rest
Fig - (1) Youtube API URL
There specific parameters that you need to pass in query string to get desire result from youtube. See the list below,
1: Parameter Description
2: =============================================================================================
3: method youtube.videos.list_by_tag (only needed as an explicit parameter for REST calls)
4: dev_id Your developer ID .
5: tag Search keyword
6: page The "page number" of results you want to retrieve (e.g. 1, 2, 3)
7: per_page The number of results you want to retrieve per page (default 20, maximum 100)
Fig - (2) Parameters for youtube querystring
So from fig - (1) and (2) if you need to search video for asp.net and you need 10 records per page and page should display 3rd page the the URL will be,
1: http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=YOURDEVELOPERID&tag=asp.net&page=3&per_page=10
2:
Fig - (3) Querystring for youtube video
Use page=-1 and per_page=-1 to display all the videos on same page without paging. You will get reply in XML format from this URL. You can retrieve that XML as XML document and use XQuery to to get the desire result. OR you can generate dataset from that XML using ReadXML method. I have used ReadXML method.
This will create three tables (1) ut_response , (2) video_list and (3) video. in dataset. ut_response table contains the information whether the supplied DeveloperId is correct? If yes, the status field contains "ok". video_list contains total number of videos returned. video table contains the information about the videos.
1: private void GetYoutubeVedio()
2: {
3:
4: StringBuilder stbURL = new StringBuilder("http://www.youtube.com/api2_rest?");
5: stbURL.Append("method=youtube.videos.list_by_tag");
6: stbURL.Append("&dev_id=" + DEVELOPERKEY);
7: stbURL.Append("&tag=" + txtSearch.Text.Trim());
8: stbURL.Append("&page=-1&per_page=-1"); // you can add custom paging if desired
9:
10: DataSet ds = new DataSet();
11: ds.ReadXml(stbURL.ToString());
12:
13: dlYoutube.DataSource = ds.Tables[2];
14: dlYoutube.DataBind();
15:
16:
17: }
Fig - (4) Function to retrieve youtube video in ASP.NET
You can retrieve youtube videos using above function in ASP.NET. Youtube also provides player integration details.
Lets have a look at the code below. This code displays all youtube videos played in same asp.net page.
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetYouTubeVedios.aspx.cs"
2: Inherits="Youtube_GetYouTubeVedios" %>
3:
4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml">
6: <head runat="server">
7: <title>Get Youtube Vedios</title>
8: </head>
9: <script src="swfobject.js" type="text/jscript"></script>
10: <script type="text/javascript">
11:
12: var params = { allowScriptAccess: "always" };
13: var atts = { id: "myytplayer" };
14:
15:
16: </script>
17: <body>
18: <form id="form1" runat="server">
19: <div>
20: <table >
21: <tr>
22: <td>
23: Sample application to fetch vedios from Youtube.
24: </td>
25: </tr>
26: <tr>
27: <td>
28: First you need to create developer account in youtube to get developer key. You can get
29: <a href="http://youtube.com/signup?next=/my_profile_dev" target="_blank">here</a>.
30: </td>
31: </tr>
32: <tr>
33: <td>
34: Enter Seach text :
35: <asp:TextBox ID="txtSearch" runat="server" ></asp:TextBox>
36: <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />
37: </td>
38: </tr>
39: <tr>
40: <td>
41: <br />
42: </td>
43: </tr>
44: <tr>
45: <td width="80%">
46: <asp:DataList ID="dlYoutube" runat="server" CellPadding="4" ForeColor="#333333" OnItemDataBound="dlYoutube_ItemDataBound">
47: <ItemTemplate>
48: <table>
49: <tr>
50: <td colspan="2">
51: <asp:Label ID="lblTotle" Font-Bold="true" runat="server" Text='<%# Eval("title")%>'></asp:Label>
52: </td>
53: </tr>
54: <tr>
55: <td valign="top">
56: <%--<a id="aURL" style="text-decoration: none" runat="server" href='<%# Eval("url")%>'>
57: <asp:Image ID="imgImage" runat="server" ImageUrl='<%# Eval("thumbnail_url")%>' />
58: </a>--%>
59: <div runat="server" id="player"></div>
60: <asp:Literal ID="ltrl" runat="server"></asp:Literal>
61: </td>
62: <td valign="top">
63: <table width="100%">
64: <tr>
65: <td>
66: <asp:Label ID="lblAuthor" runat="server" Text="Author : "></asp:Label>
67: </td>
68: <td>
69: <asp:Label ID="lblAuthorName" runat="server" Text='<%# Eval("author")%>'></asp:Label>
70: </td>
71: </tr>
72: <tr>
73: <td valign="top">
74: <asp:Label ID="Label1" runat="server" Text="Description : "></asp:Label>
75: </td>
76: <td>
77: <asp:Label ID="Label2" runat="server" Text='<%# Eval("description")%>'></asp:Label>
78: </td>
79: </tr>
80: <tr>
81: <td>
82: <asp:Label ID="Label3" runat="server" Text="Rating : "></asp:Label>
83: </td>
84: <td>
85: <asp:Label ID="Label4" runat="server" Text='<%# Eval("rating_avg")%>'></asp:Label>
86: </td>
87: </tr>
88: </table>
89: </td>
90: </tr>
91: </table>
92: </ItemTemplate>
93: <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
94: <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
95: <AlternatingItemStyle BackColor="White" ForeColor="#284775" />
96: <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
97: <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
98: </asp:DataList>
99: </td>
100: </tr>
101: </table>
102: </div>
103: </form>
104: </body>
105: </html>
Fig - (5) Youtube asp.net aspx page.
1: using System;
2: using System.Data;
3: using System.Configuration;
4: using System.Collections;
5: using System.Web;
6: using System.Web.Security;
7: using System.Web.UI;
8: using System.Web.UI.WebControls;
9: using System.Web.UI.WebControls.WebParts;
10: using System.Web.UI.HtmlControls;
11: using System.Text;
12:
13:
14: public partial class Youtube_GetYouTubeVedios : System.Web.UI.Page
15: {
16: const string DEVELOPERKEY = "YOUR DEVELOPER KEY";
17:
18: protected void Page_Load(object sender, EventArgs e)
19: {
20:
21: }
22:
23: private void GetVedio()
24: {
25:
26: StringBuilder stbURL = new StringBuilder("http://www.youtube.com/api2_rest?");
27: stbURL.Append("method=youtube.videos.list_by_tag");
28: stbURL.Append("&dev_id=" + DEVELOPERKEY);
29: stbURL.Append("&tag=" + txtSearch.Text.Trim());
30: stbURL.Append("&page=-1&per_page=-1"); // you can add custom paging if desired
31:
32: DataSet ds = new DataSet();
33: ds.ReadXml(stbURL.ToString());
34:
35: dlYoutube.DataSource = ds.Tables[2];
36: dlYoutube.DataBind();
37:
38:
39: }
40:
41: protected void btnSearch_Click(object sender, EventArgs e)
42: {
43: GetVedio();
44: }
45: protected void dlYoutube_ItemDataBound(object sender, DataListItemEventArgs e)
46: {
47: if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
48: {
49: HtmlControl div = (HtmlControl)e.Item.FindControl("player");
50: Literal objL = (Literal)e.Item.FindControl("ltrl");
51: objL.Text = "<script language='javascript' type='text\\javascript'>swfobject.embedSWF('http://www.youtube.com/v/" + Convert.ToString(DataBinder.Eval(e.Item.DataItem,"id")) + "&enablejsapi=1&playerapiid=ytplayer','" + div.ClientID + "', '425', '356', '8', null, null, params, atts);</script>";
52: }
53: }
54: }
Fig - (6) Youtube asp.net aspx.cs page.
Happy Programming !!!
1 comment:
Hi there,
This post discusses the Legacy YouTube API. New keys are no longer being issued. Please check out the new API at code.google.com/apis/youtube/. In particular, code.google.com/apis/youtube/developers_guide_dotnet.html.
Cheers,
Stephanie Liu
YouTube Developer Programs
Our forum can be found here:
groups.google.com/group/youtube-api
Post a Comment