Tuesday, September 16, 2008

Integrate Youtube in ASP.NET

       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:

Steph said...

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