Monday 25 May 2015

FETCH YOUTUBE VIDEO CHANNEL IN CQ

                               FETCHING YOUTUBE VIDEO CHANNEL PROGRAMATICALLY
                                                   USING JSON AND JQUERY USING
                                                                YOUTUBE DATA API



LET'S GET STARTED
  1. First of all you have to register into the below link to access Data API
      (If you already have Gmail account then directly Register it ,otherwise create google account)
        REGISTER IT ON YOUTUBE :Click for Register
      • Select a project, or create a new one.






      • In the sidebar on the left, expand APIs & auth. Next, click APIs. In the list of APIs, make sure the status is ON for the YouTube Data API v3. 



      • Click YouTube Data API
      • YouTube Data Api Must be Enable



      • In the sidebar on the left, select Credentials.
      • The API supports two types of credentials. Create whichever credentials are appropriate for your project:
          • OAuth 2.0: Your application must send an OAuth 2.0 token with any request that accesses private user data. Your application sends a client ID and, possibly, a client secret to obtain a token. You can generate OAuth 2.0 credentials for web applications, service accounts, or installed applications.
          • API keys: A request that does not provide an OAuth 2.0 token must send an API key. The key identifies your project and provides API access, quota, and reports.
      • Click on Credential and select Create new Key in Public API Access
      • Without Filling any IP on the Text-box will access to all IP otherwise you can provide it.
      • Then go to API (there will be three option after enabling Youtube Data API-Learn More,Explore this API,View reports in API Console)
      • Click on Explore this API


      • Choose API based on the Requirement (ex.-youtube.search.list )
      • You will see Form Like below-




      • In the part=snippet
      • ,channelD=some channelID(ex- UcaOR83TrtZEpOXJZdtnZtqA)
      • And Fill various filter According to the requirement
      • And click on Execute ,it
      • then you will find the URL
        Ex-https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCaOR83TrtZEpOXJZdtnZtqA&key={YOUR_API_KEY}
      • And one Response will be generated like below that is in JSON format


                                                           JSON DATA RESPONSE



{
 "kind": "youtube#searchListResponse",
 "etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/0f_A59Ltuor31NjG3FFeIStM6Lc\"",
 "nextPageToken": "CAUQAA",
 "pageInfo": {
  "totalResults": 1484,
  "resultsPerPage": 5
 },
 "items": [
  {
   "kind": "youtube#searchResult",
   "etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/eXmUJRwHXNgBWdw4xWEh0eATTWs\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "APJxwxZuA0E"
   },
   "snippet": {
    "publishedAt": "2012-04-05T10:08:52.000Z",
    "channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
    "title": "Nenjodu Cherthu : Yuvvh Official HD Full Song",
    "description": "Watch Nenjodu Cherthu Official Full Song Video from
 the Album Yuvvh Song : Nenjodu Cherthu Album : Yuvvh Singer : Alaap 
Raju Music by : Sachin and ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/APJxwxZuA0E/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/APJxwxZuA0E/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/APJxwxZuA0E/hqdefault.jpg"
     }
    },
    "channelTitle": "sonymusicindiaSME",
    "liveBroadcastContent": "none"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/g4DgFSHepQIbXIGb42_Grze4IkQ\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "snb-h8zKE6M"
   },
   "snippet": {
    "publishedAt": "2015-01-27T04:30:59.000Z",
    "channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
    "title": "Ammy Virk - Taara | Album - Shayar | 
      Latest Punjabi Song 2015",
    "description": "Presenting \"Taara\" - The Love Song of season 
     by Ammy Virk. Song has been penned down by Jaani & Music/ 
     Composition has been given by ace music ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/snb-h8zKE6M/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/snb-h8zKE6M/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/snb-h8zKE6M/hqdefault.jpg"
     }
    },
    "channelTitle": "sonymusicindiaSME",
    "liveBroadcastContent": "none"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/nuZK9fIch8-JD2zwMCt-N34xEm8\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "WxjQ0TjOOQI"
   },
   "snippet": {
    "publishedAt": "2014-09-29T11:01:19.000Z",
    "channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
    "title": "A. R. Rahman, Kapil Sibal, 
     Lata Mangeshkar – Laadli | Raunaq",
    "description": "Dedicated to #VogueEmpower - 'Laadli' is the 
     Raunaq of Life and reflects the theme of women's empowerment.
     Kapil Sibal's moving poetry is set to melodious ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/WxjQ0TjOOQI/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/WxjQ0TjOOQI/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/WxjQ0TjOOQI/hqdefault.jpg"
     }
    },
    "channelTitle": "sonymusicindiaSME",
    "liveBroadcastContent": "none"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/OBob1tFMQXwTz3itkr9ZXNXl5Is\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "YR12Z8f1Dh8"
   },
   "snippet": {
    "publishedAt": "2011-11-16T19:17:03.000Z",
    "channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
    "title": "Why This Kolaveri Di Official Video | Dhanush, Anirudh",
    "description": "Check out the exclusive video, shot during the
     recording of the song \"why this kolaveri di\" with the music composer 
     Anirudh,Dhanush,Shruti Hassan, Aishwarya ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/YR12Z8f1Dh8/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/YR12Z8f1Dh8/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/YR12Z8f1Dh8/hqdefault.jpg"
     }
    },
    "channelTitle": "sonymusicindiaSME",
    "liveBroadcastContent": "none"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/TJwMquQUFAR55NcpDz7p33NgO9Q\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "hG6uc9icebI"
   },
   "snippet": {
    "publishedAt": "2015-04-03T18:30:14.000Z",
    "channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
    "title": "OK Kanmani | OK Bangaram - Maula Wa Sallim Lyric Video | 
A.R. Rahman, Mani Ratnam",
    "description": "Listen to Maula Wa Sallim in A.R. Ameen's voice from
        OK Kanmani / OK Bangaram. Song Name - Maula Wa Sallim Movie - 
        Ok Kanmani / OK Bangaram Singer ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/hG6uc9icebI/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/hG6uc9icebI/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/hG6uc9icebI/hqdefault.jpg"
     }
    },
    "channelTitle": "sonymusicindiaSME",
    "liveBroadcastContent": "none"
   }
  }
 ]
}
      • Paste the URL by editing Your_API_Key to your original Key
on the browser
      • Same Result you will Get As A JSON formet
      • Then you need to fetch those results by using jquery
      • In cq you can fetch the channelId,Api-Key and no of results 
throug dialog as shown below...
      •  
        • Below is the jquery code to fetch your required video and 
        display into iframe and copy paste the code into the jsp
        file of the component

 
        Component Code

<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function()
{

$(window).load(function(value)
{
var yurl = $("#yurl").val();
alert(yurl);

var request = $.ajax({
url: yurl,
method:'GET',
dataType:'json',
success: function(data) {
var object = data;
var output;
for (var i=0; i<2; i++){
output+='<li>'
output+='<img id="u0_img" src="'+object.items[i].snippet.thumbnails.default.url+'">'
output+='</li>'
}
output+='</ul>'
document.getElementById("images").innerHTML=output;
}

});
});

});
</script>
<style>
#u0_img {
display: inline-table;
height: 213px;
left: 0;
position: relative;
text-decoration: none;
top: 0;
width: 400px;
}
.ax_image {
color: #000000;
font-family: "ArialMT","Arial";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center;
}
</style>
</head>
<%@include file="/libs/foundation/global.jsp"%>
<%@page session="false"%>
<%
String apikey = properties.get("apikey",String.class);
String channelId = properties.get("channelid",String.class);
String maxNum = properties.get("maxresults",String.class);
String url = String.format("https://www.googleapis.com/youtube/v3/search? part=snippet&channelId=%s&maxResults=%s&order=date&key= %s",channelId,maxNum, apikey);


%>
<input type="hidden" value="<%=url%>" id="yurl"/>
<div id="images" class="ax_image">
</div>


      • Go to edit mode of sidekick and include your Component Group
      • Drag and Drop the Component into the parsys.
      • Double click on the comonent so that it will pop up dialog
      • Fill the entries like API_KEY,Channel_Name,Maximum_Result






      • Results will be Shown like Below You can Customise It according to your condition by adding CSS and JavaScript







      • YouTube video is included into your Page.

NOTE: You can fetch various data from json according to your requirement, in the above Example I am only fetching video_id and embedding into the iframe.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)