Youtube API v3 - Select menu to access public channel video data without Oauth -
i want access , view public youtube videos (simple read only) youtube channel without resorting oauth, plain api key. haven't found decent layman example on how go api v3 ;-(
i have juggle cannot work. basically, select menu contains options values existing channel ids. when option containing channel id selected, should trigger requestuseruploadsplaylistid(). then, when nextbutton or previousbutton activated, function requestvideoplaylist() kick in. there better way this? following error messages in firebug:
typeerror: response.result undefined (when choose option selectmenu). typeerror: response.result undefined (after click on buttons).
here struggling (am new api v3 , kinda used api v2 (sigh)):
<html here> script> $('#nextbutton').prop('disabled', true).addclass('disabled'); </script> <script type="text/javascript" src="https://apis.google.com /js/client.js?onload=onjsclientload"></script> <script> var dd, playlistid, nextpagetoken, prevpagetoken; function onjsclientload() { gapi.client.setapikey('your-api-key'); gapi.client.load('youtube', 'v3', function(){ $('#nextbutton').prop('disabled', false).removeclass('disabled'); }); } // calling following function via selected option value of select menu // using "mine: false," since it's unauthenticated request ?? function requestuseruploadsplaylistid() { var dd = $("#selectmenu option:selected").val(); var request = gapi.client.youtube.channels.list({ mine: false, // legit? channelid: dd, // variable preset chosen value of selectmenu options part: 'contentdetails,id' }); request.execute(function(response) { playlistid = response.result.items[0].contentdetails.relatedplaylists.uploads; channelid = response.result.items[0].id; }); } function requestvideoplaylist(playlistid, pagetoken) { var requestoptions = { playlistid: playlistid, part: 'snippet,id', maxresults: 5 }; if (pagetoken) { requestoptions.pagetoken = pagetoken; } var request = gapi.client.youtube.playlistitems.list(requestoptions); request.execute(function(response) { // show page buttons if there's next or previous page. nextpagetoken = response.result.nextpagetoken; var nextvis = nextpagetoken ? 'visible' : 'hidden'; $('#nextbutton').css('visibility', nextvis); prevpagetoken = response.result.prevpagetoken var prevvis = prevpagetoken ? 'visible' : 'hidden'; $('#previousbutton').css('visibility', prevvis); var playlistitems = response.result.items; if (playlistitems) { $.each(playlistitems, function(index, item) { displayresult(item.snippet); }); } else { $('#container').html('sorry, no uploaded videos available'); } }); } function displayresult(videosnippet) { for(var i=0;i<response.items.length;i++) { var channeltitle = response.items[i].snippet.channeltitle var videotitle = response.items[i].snippet.title; var thumbnail = response.items[i].snippet.thumbnails.medium.url; var results = '<li><div class="video-result"><img src="'+thumbnail+'" /></div> <div class="chantitle">'+channeltitle+'</div> <div class="vidtitle">'+videotitle+'</div></li>'; $('#container').append(results); } } function nextpage() { requestvideoplaylist(playlistid, nextpagetoken); } function previouspage() { requestvideoplaylist(playlistid, prevpagetoken); } $('#nextbutton').on('click', function() { // display next 5 results nextpage(); }); $('#previousbutton').on('click', function() { // display previous 5 results previouspage(); }); $("#selectmenu").on("change", function() { $('#container').empty(); if ($("#selectmenu option:selected").val().length === 24) { //channel id length requestuseruploadsplaylistid(); } else { return false; } }); i'm surely missing here, pointers appreciated.
final update
a few updates later , i've answered question after playing awesome google apis explorer tool. here sample working code allowing access youtube channel video-related data select menu read-only without using oauth, api key. select menu, based on selected option's value (which contains channel id), posts video thumbnail, thumbnail's channel origin; , video's title. should easy make thumbnail clickable load video in iframe embed or redirect youtube page. enjoy!
// change values , titles accordingly <select id="selectmenu"> <option value="selchan">select channel ...</option> <option value="-your-24digit-channelid-">put-channel-title-here</option> <option value="-your-24digit-channelid-">put-channel-title-here</option> </select> <button id="nextbutton">next</button> <button id="previousbutton">prev</button> <ol id="container"></ol> // loads video data response <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onjsclientload"> </script> var playlistid, nextpagetoken, prevpagetoken; function onjsclientload() { gapi.client.setapikey('insert-your-api-key'); // insert api key gapi.client.load('youtube', 'v3', function(){ //add function here if action required after api loads }); } function requestuseruploadsplaylistid(pagetoken) { // https://developers.google.com/youtube/v3/docs/channels/list var selchan = $("#selectmenu option:selected").val(); var request = gapi.client.youtube.channels.list({ id: selchan, part: 'snippet,contentdetails', filter: 'uploads' }); request.execute(function(response) { playlistid = response.result.items[0].contentdetails.relatedplaylists.uploads; channelid = response.result.items[0].id; requestvideoplaylist(playlistid, pagetoken); }); } function requestvideoplaylist(playlistid, pagetoken) { $('#container').empty(); var requestoptions = { playlistid: playlistid, part: 'snippet,id', maxresults: 5 // can changed }; if (pagetoken) { requestoptions.pagetoken = pagetoken; } var request = gapi.client.youtube.playlistitems.list(requestoptions); request.execute(function(response) { // show page buttons if there's next or previous page. nextpagetoken = response.result.nextpagetoken; var nextvis = nextpagetoken ? 'visible' : 'hidden'; $('#nextbutton').css('visibility', nextvis); prevpagetoken = response.result.prevpagetoken var prevvis = prevpagetoken ? 'visible' : 'hidden'; $('#previousbutton').css('visibility', prevvis); var playlistitems = response.result.items; if (playlistitems) { displayresult(playlistitems); } else { $('#container').html('sorry, no uploaded videos.'); } }); } function displayresult(playlistitems) { for(var i=0;i<playlistitems.length;i++) { var channeltitle = playlistitems[i].snippet.channeltitle var videotitle = playlistitems[i].snippet.title; var videothumbnail = playlistitems[i].snippet.thumbnails.medium.url; var results = '<li> <div>'+channeltitle+'</div> <div><img src="'+videothumbnail+'" /></div> <div>'+videotitle+'</div> </li>'; $('#container').append(results); } } function nextpage() { $('#container').empty(); // needed here requestvideoplaylist(playlistid, nextpagetoken); } function previouspage() { $('#container').empty(); // needed here requestvideoplaylist(playlistid, prevpagetoken); } $('#nextbutton').on('click', function() { // display next maxresults nextpage(); }); $('#previousbutton').on('click', function() { // display previous maxresults previouspage(); }); // using filtering example select option values contain channel // id length of 24 alphanumerics/symbols trigger functions in case // there other option values in menu not refer channel ids. $("#selectmenu").on("change", function() { $('#container').empty(); if ($("#selectmenu option:selected").val().length === 24) { requestuseruploadsplaylistid(); return false; } else { return false; } }); note:
remember, code sample above built based on api v3 provided @ time of posting.
tip: it's better make sure buttons disabled during api call , re-enabled after api has posted expected results. if press buttons while processing, may compounded and/or unexpected results. ~ koolness
Comments
Post a Comment