OBSERVE nextPageToken IN YOUTUBE JSON DATA
Understanding the nextPageToken property is necessary in creating program for searching more than 50 youtube videos.
Currently we do not have trouble finding "all videos (items) of a playlist, "all videos made by a certain user".
But when looking more than 500 videos "by keyword" we have a problem because:
1. We can not immediately know the stop-point after the maximum number of video found.
(where typeof next-page-token == 'underfined').
2. After the first 450 or 500 videos, will silently appear a number of duplicated videos
The following site can be used to test the above problem
Currently we do not have trouble finding "all videos (items) of a playlist, "all videos made by a certain user".
But when looking more than 500 videos "by keyword" we have a problem because:
1. We can not immediately know the stop-point after the maximum number of video found.
(where typeof next-page-token == 'underfined').
2. After the first 450 or 500 videos, will silently appear a number of duplicated videos
FROM: https://code.google.com/p/gdata-issues/issues/detail?id=4282
Project Member
We can't provide more than ~500 search results for any arbitrary YouTube query via the API without the quality of the search results severely degrading ( duplicates, etc.).
The v1/v2 GData API was updated back in November to limit the number of search results returned to 500. If you specify a start-index of 500 or more, you won't get back any results.
This was supposed to have also gone into effect for the v3 API (which uses a different method of paging through results) but it apparently was not pushed out, so it is still possible to retrieve up to 1000 search results in v3—the last 500 of which are usually of bad quality.
The change to limit v3 to 500 search results will be pushed out sometime in the near future. There will no longer be nextPageTokens returned once you hit 500 results.
Project Member
We can't provide more than ~500 search results for any arbitrary YouTube query via the API without the quality of the search results severely degrading ( duplicates, etc.).
The v1/v2 GData API was updated back in November to limit the number of search results returned to 500. If you specify a start-index of 500 or more, you won't get back any results.
This was supposed to have also gone into effect for the v3 API (which uses a different method of paging through results) but it apparently was not pushed out, so it is still possible to retrieve up to 1000 search results in v3—the last 500 of which are usually of bad quality.
The change to limit v3 to 500 search results will be pushed out sometime in the near future. There will no longer be nextPageTokens returned once you hit 500 results.
The following site can be used to test the above problem
Please watch my Web page at:
http://play-videos.url.ph/1603/page-search-uk2.html
SOURCE CODE of nextPageToken.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Page by page video searching</title> <style> body{ font-family:Arial, Helvetica, sans-serif; background-color: #033; color:white; margin:0px; padding:0px; } span, li{ font-size:14px; color: white; /*#66FFFF; */ } a{ color:blue; text-decoration:none; } a:hover { background-color: #CCFF99; } input[type="button"], button{ background-color:#DDDDDD;cursor:pointer; } #search-btn, #search-btnU{ width:85px; cursor: pointer; font: 14px sans-serif; color:white; background: #14a3d1; border: solid 1px #14a3d1; padding: .2em; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.3); box-shadow: 0 1px 2px rgba(0,0,0,.3); } td{ color:black;font-size:10pt } .vNum{ background-color:#CC6600; color:white; font-weight:bold } .qBut{background-color:#CCCCCC; width:100px; margin-bottom:6px;} #hint{ color:black;margin-top:10px;width:580px;height:70px;overflow:auto; background-color:#EEEEEE;text-align:left; padding:10px;line-height:160%;font-size:10pt } #preDiv{ width:590px;height:320px;background-color:#DDDDDD;text-align:left; overflow:auto;color:black;padding:5px;margin-top:10px } #header1{ color:white;font-weight:bold;width:604px; background-color:#996600; /*#663300;#333366; */ padding-top:3px; padding-bottom:3px;position: fixed; top: 0px; left: 0; right: 0; margin: 0 auto; } #header1 td {border: none;} .bar{ width:588px; height:20px;font-size:12pt;font-family:Times; background-color:#CC9966; /*#99CCFF;*/ color:black; font-weight:bold; padding:4px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> </head> <body onload="init()"> <div align="center"> <div id="header1" style="width:600px;height:25px;left:0px;"> <div style="margin-left:5px;float:left;padding-top:3px;font-size:12pt"> Page Search</div> <div style='padding-top:2px;'> <button onclick="scrollToElement('helpDiv', 85)">Help</button> <button onclick="scrollToElement('player',31)" style="background-color:#FFFF99">Screen</button> <button type="button" onclick="bigSmall(600);" style="background-color:#FFFF99">Small</button> <button type="button" onclick="bigSmall(812);">Mid</button> <button type="button" onclick="bigSmall(960);">Big</button> </div> </div> <iframe id="player" width="600" height="381" style="margin-top:31px" src="https://www.youtube.com/embed/S7TSQtGDWBw?rel=0" frameborder="0" allowfullscreen> </iframe> <div id='titleSpan' style="width:600px;overflow:hidden;margin-top:5px;margin-bottom:10px;height:20px;font-size:10pt"> </div> <div id="miniList" style="font-size:10pt;padding:10px;text-align:left;width:580px;height:140px;overflow:auto;background-color:white;line-height:150%"> <a href="#" title="S7TSQtGDWBw" onclick="playVid(this);return false"> Mi pueblo grupo NICHE </a><br> <a href="#" title="7KxkMLAZlzw" onclick="playVid(this);return false"> Grupo Niche - Cali Pachanguero </a><br> <a href="#" title="x1g6PbCCSZ8" onclick="playVid(this);return false"> MÚSICA DE BOLEROS INSTRUMENTALES </a><br> <a href="#" title="a5FW6WXcfUo" onclick="playVid(this);return false"> LA PALOMA - ALEJANDRO COLLADO </a><br> <a href="#" title="AVmuiKwiErc" onclick="playVid(this);return false"> Boleros Instrumentales con Alejandro Collado y su Teclado </a><br> <a href="#" title="NFx9Qx8hsYM" onclick="playVid(this);return false"> MÚSICA POPULAR LATINA INSTRUMENTAL </a><br> <a href="#" title="TTG4F2CEWLA" onclick="playVid(this);return false"> 1er. Lugar Itayetzi y Dylan - Parejas Bachata Alumnos - LATIN STAR FEST 2015 </a><br> <a href="#" title="EhM6qKx-ECI" onclick="playVid(this);return false"> Los Charcos - Fruko y Sus Tesos / Discos Fuentes </a><br> <a href="#" title="9G9ghmt4PEY" onclick="playVid(this);return false"> Enrique Chia - Malagueña Salerosa </a><br> <a href="#" title="ulIqVN5CNKo" onclick="playVid(this);return false"> ERNESTO CORTAZAR- Y Volvere ... - FROM MENDOCINO TO LAGUNA BEACH </a><br> <a href="#" title="zlVuBH5U0P4" onclick="playVid(this);return false"> BOLEROS INSTRUMENTALES PARA EL ALMA </a><br> <a href="#" title="7dyUaFW5a6M" onclick="playVid(this);return false"> Musica China, una caricia para el corazón </a><br> <a href="#" title="_DfL0zM4TJ8" onclick="playVid(this);return false"> Demo Samsung - From The Blue - FULL HD 1080P </a><br> <a href="#" title="ADY1DbB8FqI" onclick="playVid(this);return false"> Beautiful Beijing HD (China travel) </a><br> <a href="#" title="UK5cS_4TJo8" onclick="playVid(this);return false"> The West Lake Hangzhou China </a><br> <a href="#" title="SLaYPmhse30" onclick="playVid(this);return false"> Dubai in 4K - City of Gold </a><br> <a href="#" title="Zk9J5xnTVMA" onclick="playVid(this);return false"> Road to Machu Picchu - Peru in 4K </a><br> <a href="#" title="DX48mJjL7oU" onclick="playVid(this);return false"> Mandalay, Myanmar in 4K (Ultra HD) </a><br> <a href="#" title="LRFlg64lA2o" onclick="playVid(this);return false"> 4K DEMO ULTRAHD TOKYO 4K映像 東京 (3840×2160) </a><br> <a href="#" title="afsUtMEUQmA" onclick="playVid(this);return false"> Paris Frankreich 4k video ultra hd FZ1000 </a><br> <a href="#" title="o_24LPjOIHI" onclick="playVid(this);return false"> NORTHERN INDIA 4K (Ultra HD) 50/60fps </a><br> <a href="#" title="L4ILp_l10uw" onclick="playVid(this);return false"> The Rock-cut Caves of Ellora and Ajanta, Maharashtra, India (in HD) </a><br> <a href="#" title="NL_MXlNZQN8" onclick="playVid(this);return false"> Mexico City, Mexico in HD </a><br> <a href="#" title="BiQqiP7HY0s" onclick="playVid(this);return false"> [Doku] Abenteuer Panamericana (2/5) Von Mexiko bis El Salvador [HD] </a><br> <a href="#" title="5uv5FVJb-iA" onclick="playVid(this);return false"> Havana, Cuba in 4K (Ultra HD) </a><br> <a href="#" title="LS9ANdUpTuQ" onclick="playVid(this);return false"> France’s Loire: Château Country </a><br> <a href="#" title="3nmnMtbzzjE" onclick="playVid(this);return false"> Our Living Planet 1080p HD </a><br> <a href="#" title="xDMP3i36naA" onclick="playVid(this);return false"> WILDLIFE IN 4K (ULTRA HD) 60fps </a><br> <a href="#" title="fdIZqfKLNB4" onclick="playVid(this);return false"> The Soul of Spain - National Geographic </a><br> <a href="#" title="U-hCoPRtzjI" onclick="playVid(this);return false"> World Heritage Sites of India </a><br> <a href="#" title="0lOnfFZYFNM" onclick="playVid(this);return false"> Language Families of the World </a><br> </div> <!--end of miniList--> <br> <div class="bar"> SEARCH VIDEOS BY KEYWORD (Search Term) </div> <br> <input type="text" value="Ricky King" id="queryText" size="80" style="border-style:inset"> <button id="search-btn" type="button" onclick="searchYT(0)">Page 1</button> <br><br> <b>Search Terms to choose:</b> <br> <div id="hint" style = "color:black;margin-top:10px;width:580px;height:120px;overflow:auto;background-color:#EEEEEE;text-align:left;padding:10px;line-height:160%;font-size:10pt"> <a href="#" onclick="readyTerm('4K Ultra HD'); return false">4K Ultra HD</a>, <a href="#" onclick="readyTerm('101 Strings'); return false">101 Strings</a>, <a href="#" onclick="readyTerm('Abba'); return false">Abba</a>, <a href="#" onclick="readyTerm('Alejandro Collado'); return false"> Alejandro Collado</a>, <a href="#" onclick="readyTerm('Bee Gees'); return false">Bee Gees</a>, <a href="#" onclick="readyTerm('Bert Kaempfert'); return false">Bert Kaempfert</a>, <a href="#" onclick="readyTerm('Billy Vaughn'); return false">Billy Vaughn</a>, <a href="#" onclick="readyTerm('Caravelli'); return false">Caravelli</a>, <a href="#" onclick="readyTerm('Cecil Gonzalez instrumental'); return false"> Cecil Gonzalez instrumental</a>, <a href="#" onclick="readyTerm('Carpenters'); return false">Carpenters</a>, <a href="#" onclick="readyTerm('Enrique Chia'); return false">Enrique Chia</a>, <a href="#" onclick="readyTerm('Folli Michelangelo'); return false"> Folli Michelangelo</a>, <a href="#" onclick="readyTerm('Francisco Garcia guitarist'); return false"> Francisco Garcia guitarist</a>, <a href="#" onclick="readyTerm('Franck Pourcel'); return false">Franck Pourcel</a>, <a href="#" onclick="readyTerm('Frank Chacksfield'); return false">Frank Chacksfield</a>, <a href="#" onclick="readyTerm('Guitar Mood'); return false">Guitar Mood</a>, <a href="#" onclick="readyTerm('Guitarras Magicas (Guitarras de Luna)'); return false"> Guitarras Magicas (Guitarras de Luna)</a>, <a href="#" onclick="readyTerm('Helmut Zacharias'); return false">Helmut Zacharias</a>, <a href="#" onclick="readyTerm('Hugo Montenegro'); return false">Hugo Montenegro</a>, <a href="#" onclick="readyTerm('Hugo Strasser'); return false">Hugo Strasser</a>, <a href="#" onclick="readyTerm('James Last'); return false">James Last</a>, <a href="#" onclick="readyTerm('JUAN TORREZ'); return false">JUAN TORREZ</a>, <a href="#" onclick="readyTerm('Klaus Wunderlich'); return false">Klaus Wunderlich</a>, <a href="#" onclick="readyTerm('Maximo Spodek'); return false">Maximo Spodek</a>, <a href="#" onclick="readyTerm('Nicolas de Angelis'); return false">Nicolas de Angelis</a>, <a href="#" onclick="readyTerm('Paul Mauriat'); return false">Paul Mauriat</a>, <a href="#" onclick="readyTerm('Ray Anthony'); return false">Ray Anthony</a>, <a href="#" onclick="readyTerm('Ray Conniff'); return false">Ray Conniff</a>, <a href="#" onclick="readyTerm('Richard Clayderman'); return false">Richard Clayderman</a>, <a href="#" onclick="readyTerm('Ricky King'); return false">Ricky King</a>, <a href="#" onclick="readyTerm('Romantic Guitar'); return false">Romantic Guitar</a>, <a href="#" onclick="readyTerm('The Shadows'); return false">The Shadows</a>,<br> <b>SOME USER NAMES to choose:</b><br> <b>NOTE</b>: - We can use "user name" as key word for searching by key word. <br> - But we don't take "channel title" as key word. <br> - Some users choose their channel title the same as user name. However we don't know about it. In general, I think that it's dificult to get "user name". <br><br> <a href="#" onclick="readyTerm('alejandrocolladoysus'); return false"> alejandrocolladoysus</a>,<br> <a href="#" onclick="readyTerm('milosh9k'); return false"> milosh9k (true user name)</a>,<br> <a href="#" onclick="readyTerm('pvhung20'); return false">pvhung20 (user name)</a> (this user has less than 50 videos uploaded. <br>So clicking on any button will give you only the same results).<br> </span><br> <br><br> </div> <!-- end of hint --> <br> <div style="font-size:11pt;margin-bottom:8px"><b> If buttons are shown, you can click them to see other page</b></div> <div id="fromSecondPage" display="block"> <button class="qBut" onclick="searchYT(1)">2 CDIQAA</button> <button class="qBut" onclick="searchYT(2)">3 CGQQAA</button> <button class="qBut" onclick="searchYT(3)">4 CJYBEAA</button> <button class="qBut" onclick="searchYT(4)">5 CMgBEAA</button> <button class="qBut" onclick="searchYT(5)">6 CPoBEAA</button> <br> <button class="qBut" onclick="searchYT(6)">7 CKwCEAA</button> <button class="qBut" onclick="searchYT(7)">8 CN4CEAA</button> <button class="qBut" onclick="searchYT(8)">9 CJADEAA</button> <button class="qBut" onclick="searchYT(9)">10 CMIDEAA</button> <button class="qBut" onclick="searchYT(10)">11 CPQDEAA</button> <br> <button class="qBut" onclick="searchYT(11)">12 CKYEEAA</button> <button class="qBut" onclick="searchYT(12)">13 CNgEEAA</button> <button class="qBut" onclick="searchYT(13)">14 CIoFEAA</button> <button class="qBut" onclick="searchYT(14)">15 CLwFEAA</button> <button class="qBut" onclick="searchYT(15)">16 CO4FEAA</button> <br> <button class="qBut" onclick="searchYT(16)">17 CKAGEAA</button> <button class="qBut" onclick="searchYT(17)">18 CNIGEAA</button> <button class="qBut" onclick="searchYT(18)" style="background-color:#FFFF99">19 CIQHEAA</button> <button class="qBut" onclick="searchYT(19)" style="background-color:#FFFF99">20 CLYHEAA</button> </div> <div id="resDiv" style="margin-top:8px;font-size:11pt;"></div> <span><b>CLICK THE LINK at "title" to play</b></span> <div id="preDiv" style="width:590px;height:320px;background-color:#DDDDDD;text-align:left;overflow:auto;color:black;padding:5px;margin-top:10px"> <pre id='pre1' style="font-family:Arial;font-size:10pt"></pre> </div> <br> <b style="font-size:11pt"> CLICK thumbnail (image) to play video<br> OR CLICK THE LINK at "channel Title" for secondary searching</b> <br><br> <div id='list1' style="width:590px;height:320px;overflow:auto; text-align:left;line-height:150%;padding:5px;background-color:#DDDDDD"> </div> <br> <div class="bar"> SECONDARY SEARCH FOR ALL VIDEOS UPLOADED BY ONE USER </div> <br> <input type="text" value="" id="queryTextU" size="80" style="border-style:inset"> <button id="search-btnU" type="button" onclick="searchYTU(0)">Page 1</button> <br><br> <div style="font-size:11pt;margin-bottom:8px"><b> First click the button "Page 1" then you can click the buttons below</b></div> <div id="fromSecondPage" display="block"> <button class="qBut" onclick="searchYTU(1)">2 CDIQAA</button> <button class="qBut" onclick="searchYTU(2)">3 CGQQAA</button> <button class="qBut" onclick="searchYTU(3)">4 CJYBEAA</button> <button class="qBut" onclick="searchYTU(4)">5 CMgBEAA</button> <button class="qBut" onclick="searchYTU(5)">6 CPoBEAA</button> <br> <button class="qBut" onclick="searchYTU(6)">7 CKwCEAA</button> <button class="qBut" onclick="searchYTU(7)">8 CN4CEAA</button> <button class="qBut" onclick="searchYTU(8)">9 CJADEAA</button> <button class="qBut" onclick="searchYT(9)">10 CMIDEAA</button> <button class="qBut" onclick="searchYT(10)">11 CPQDEAA</button> <br> <button class="qBut" onclick="searchYTU(11)">12 CKYEEAA</button> <button class="qBut" onclick="searchYTU(12)">13 CNgEEAA</button> <button class="qBut" onclick="searchYTU(13)">14 CIoFEAA</button> <button class="qBut" onclick="searchYTU(14)">15 CLwFEAA</button> <button class="qBut" onclick="searchYTU(15)">16 CO4FEAA</button> <br> <button class="qBut" onclick="searchYTU(16)">17 CKAGEAA</button> <button class="qBut" onclick="searchYTU(17)">18 CNIGEAA</button> <button class="qBut" onclick="searchYTU(18)" style="background-color:#FFFF99">19 CIQHEAA</button> <button class="qBut" onclick="searchYTU(19)" style="background-color:#FFFF99">20 CLYHEAA</button> </div> <div id="resDivU" style="margin-top:8px;font-size:11pt;"></div> <span><b>CLICK THE LINK at "title" to play</b></span> <div id="preDivU" style="width:590px;height:320px;background-color:#DDDDDD;text-align:left;overflow:auto;color:black;padding:5px;margin-top:10px"> <pre id='pre1U' style="font-family:Arial;font-size:10pt"></pre> </div> <br> <b style="font-size:11pt"> CLICK thumbnail (image) to play video</b><br> <br> <div id='list1U' style="width:590px;height:320px;overflow:auto; text-align:left;line-height:150%;padding:5px;background-color:#DDDDDD"> </div> <br> <script> // SEARCH VIDEOS var maxRes = 50; // Don't change the value 50 of this parametter function searchYT(num){ var searchText= $('#queryText').val(); if(searchText.search('@UC') > 0){ searchU(num) }else{ searchQ(num) } } function searchYTU(num){ var searchText= $('#queryTextU').val(); if(searchText.search('@UC') > 0){ searchU(num) }else{ searchQ(num) } } function searchQ(num){ gNum = num*50; gNum1 = num*50; $('#fromSecondPage').show(); document.getElementById('pre1').style.backgroundColor = "#DDDDDD"; var searchText= $('#queryText').val(); $('#resDiv').html("<b>JSON RESPONSE for <span style='color:yellow'>"+searchText+"</span></b>"); $.get( "https://www.googleapis.com/youtube/v3/search",{ part : 'snippet', q : searchText, maxResults : maxRes, pageToken : tokenArr[num], /* oder: 'date', 'rating', 'relevance', 'title', 'videoCount' */ order : 'relevance', /* videoDefinition : 'high', type : 'video', */ key: 'YOUR-API-KEY'}, myPlan ) } var gNum=0; var gNum1 = 0; function myPlan(response){ var nextPageToken = response.nextPageToken; var nPT = "<span style='color:red'>"+ nextPageToken + "</span>"; response.nextPageToken = nPT; var resultCount = response.pageInfo.totalResults; var rC = "<span style='color:#6600FF'><b>"+ resultCount + "</b></span>"; if((resultCount < 1001) && (resultCount >= 50)){ var clickPage1 = Math.floor(resultCount/50)-1; var clickPage2 = clickPage1 + 1; rC += " => Click Page " + clickPage1 + " then click Page " + clickPage2; } response.pageInfo.totalResults = rC; var stList = '<table id="res1" border="1" cellspacing="1" width="100%"><tbody>'; for (var i=0; i<response.items.length;i++){ gNum1++; var vid = response.items[i].id.videoId; if(typeof vid != 'undefined'){ var tit = response.items[i].snippet.title; var channel_Title = response.items[i].snippet.channelTitle; var channelSt = ''; if(channel_Title != ''){ channelSt = 'Channel Title@Id: ' + '<a href="#" onclick="readyTermU(\''+channel_Title+'@'+ response.items[i].snippet.channelId+ '\');return false">'+ channel_Title+'@'+ response.items[i].snippet.channelId + '</a>' } stList += '<tr>'+ '<td style="vertical-align:top"><span class="vNum"><b> '+gNum1+ ' </b></span>-'+ tit +'<br>'+ channelSt +'</td><td style="width:80px;">'+ '<a class="show" href="#" title="'+ vid + '" onclick="playVidImg(this);'+ ' return false">'+ '<img width="80" height="60" src="http://img.youtube.com/vi/'+ vid +'/default.jpg"></a></td></tr>'; } } document.getElementById('list1').innerHTML = stList + '</tbody></table>'; for (var i=0; i<response.items.length;i++) { gNum++; if(i==0){ channelImg = response.items[i].snippet.thumbnails.default.url; if(channelImg.search('https://yt3.ggpht.com') != -1){ response.items[i].snippet.thumbnails.default.url = "<span style='background-color:green;font-weight:bold'> "+ gNum + " </span> "+ channelImg + '<br><br>'+ " <img src='" + channelImg +"' width='80' height='80'>" } } var xx = response.items[i].id.playlistId; if(typeof xx != 'undefined'){ var pttit = response.items[i].snippet.title; var indexZero = response.items[i].snippet.thumbnails.default.url; var aa = indexZero.search('vi/'); indexZero1 = indexZero.substring(aa+3,aa+14); xx1 = indexZero1 +'#'+ xx; response.items[i].snippet.title = "<span style='background-color:#FF3399;font-weight:bold'> "+ gNum + " </span> <a href='#' title='"+ xx1 + "' onclick='playPid(this);return false'>"+ pttit + '</a>'; response.items[i].id.playlistId = "<span style='color:#FF3399;'>"+xx+'</span>'; var channelT = response.items[i].snippet.channelTitle; var cT = "<span style='color:green;font-weight:bold'>"+ channelT + "</span>"; response.items[i].snippet.channelTitle = cT; } var vvid = response.items[i].id.videoId; if(typeof vvid != 'undefined'){ var ttit = response.items[i].snippet.title; response.items[i].snippet.title = "<span class='vNum'> "+gNum+ " </span> <a href=# title='"+ vvid + "' onclick='playThis(this);return false'>"+ ttit + '</a>'; response.items[i].id.videoId = "<span style='color:#CC6600'>"+vvid+'</span>' var channelT = response.items[i].snippet.channelTitle; var cT = "<span style='color:green;font-weight:bold'>"+ channelT + "</span>"; response.items[i].snippet.channelTitle = cT; } } var st = JSON.stringify(response,'',2); document.getElementById('pre1').innerHTML = st; } function searchU(num){ gNum = num*50; gNum1 = num*50; var searchTxt= $('#queryTextU').val(); var aa = searchTxt.search('@UC')+3; searchTxt = 'UU' + searchTxt.substring(aa,searchTxt.length); alert(searchTxt); $.get( "https://www.googleapis.com/youtube/v3/playlistItems",{ part : 'snippet', maxResults : 50, playlistId : searchTxt, pageToken : tokenArr[num], key: 'YOUR-API-KEY'}, myPlanU ); } function myPlanU(response){ var nextPageToken = response.nextPageToken; var nPT = "<span style='color:red'>"+ nextPageToken + "</span>"; response.nextPageToken = nPT; var resultCount = response.pageInfo.totalResults; var rC = "<span style='color:#6600FF'><b>"+ resultCount + "</b></span>"; if((resultCount < 1001) && (resultCount >= 50)){ var clickPage1 = Math.floor(resultCount/50)-1; var clickPage2 = clickPage1 + 1; rC += " => Click Page " + clickPage1 + " then click Page " + clickPage2; } response.pageInfo.totalResults = rC var stList = '<table id="res1" border="1" cellspacing="1" width="100%"><tbody>'; for (var i=0; i<response.items.length;i++){ gNum1++; var vid = response.items[i].snippet.resourceId.videoId; if(typeof vid != 'undefined'){ var tit = response.items[i].snippet.title; var channel_Title = response.items[i].snippet.channelTitle; var channelSt = ''; stList += '<tr>'+ '<td style="vertical-align:top"><span class="vNum"><b> '+gNum1+ ' </b></span>-'+ tit +'<br>'+ channelSt +'</td><td style="width:80px;">'+ '<a class="show" href="#" title="'+ vid + '" onclick="playVidImg(this);'+ ' return false">'+ '<img width="80" height="60" src="http://img.youtube.com/vi/'+ vid +'/default.jpg"></a></td></tr>'; } } document.getElementById('list1U').innerHTML = stList + '</tbody></table>'; for (var i=0; i<response.items.length;i++) { gNum++; if(i==0){ channelImg = response.items[i].snippet.thumbnails.default.url; if(channelImg.search('https://yt3.ggpht.com') != -1){ response.items[i].snippet.thumbnails.default.url = "<span style='background-color:green;font-weight:bold'> "+ gNum + " </span> "+ channelImg + '<br><br>'+ " <img src='" + channelImg +"' width='80' height='80'>" } } var xx = response.items[i].id.playlistId; if(typeof xx != 'undefined'){ var pttit = response.items[i].snippet.title; var indexZero = response.items[i].snippet.thumbnails.default.url; var aa = indexZero.search('vi/'); indexZero1 = indexZero.substring(aa+3,aa+14); xx1 = indexZero1 +'#'+ xx; response.items[i].snippet.title = "<span style='background-color:#FF3399;font-weight:bold'> "+ gNum + " </span> <a href=# title='"+ xx1 + "' onclick='playPid(this);return false'>"+ pttit + '</a>'; response.items[i].id.playlistId = "<span style='color:#FF3399;'>"+xx+'</span>'; var channelT = response.items[i].snippet.channelTitle; var cT = "<span style='color:green;font-weight:bold'>"+ channelT + "</span>"; response.items[i].snippet.channelTitle = cT; } var vvid = response.items[i].snippet.resourceId.videoId; if(typeof vvid != 'undefined'){ var ttit = response.items[i].snippet.title; response.items[i].snippet.title = "<span class='vNum'> "+gNum+ " </span> <a href=# title='"+ vvid + "' onclick='playThis(this);return false'>"+ ttit + '</a>'; response.items[i].id.videoId = "<span style='color:#CC6600'>"+vvid+'</span>' var channelT = response.items[i].snippet.channelTitle; var cT = "<span style='color:green;font-weight:bold'>"+ channelT + "</span>"; response.items[i].snippet.channelTitle = cT; } } var st = JSON.stringify(response,'',2); document.getElementById('pre1U').innerHTML = st; } //////////////////// PLAY ONLY ONE VIDEO CLIP function playVid(thi){ var vtit = thi.innerHTML; $('#titleSpan').html(vtit); var st = 'https://www.youtube.com/embed/'+thi.title+'?autoplay=1&rel=0'; document.getElementById('player').src = st; } function playVidImg(thi){ $('#titleSpan').html(''); var st = 'https://www.youtube.com/embed/'+thi.title+'?autoplay=1&rel=0'; document.getElementById('player').src = st; } function playPid(thi){ var vtit = thi.innerHTML; $('#titleSpan').html(vtit); var pLId = thi.title; alert(pLId) var arr = pLId.split('#'); var st = 'https://www.youtube.com/embed/'+arr[0] + '?list='+arr[1]+'&autoplay=1&rel=0'; document.getElementById('player').src = st; } function playThis(thi){ var vtit = thi.innerHTML; $('#titleSpan').html(vtit); var st = 'https://www.youtube.com/embed/'+thi.title+'?autoplay=1&rel=0'; document.getElementById('player').src = st; } function bigSmall(ww){ hh = Math.round(ww*516/812); $('#player').attr('width',ww); $('#player').attr('height',hh); var size = ww +'px'; document.getElementById('header1').style.width = size; } /////////// COMMON FUNCTIONS function readyTerm(term){ document.getElementById('queryText').value = term; } function readyTermU(term){ document.getElementById('queryTextU').value = term; } function scrollToElement(elem, add){ var top = $("#"+ elem).position().top; $(window).scrollTop( top - add); } function goURL(ur){ window.location = ur; } tokenArr = ['CDIQAA','CGQQAA','CJYBEAA','CMgBEAA','CPoBEAA', 'CKwCEAA','CN4CEAA','CJADEAA','CMIDEAA','CPQDEAA', 'CKYEEAA','CNgEEAA','CIoFEAA','CLwFEAA','CO4FEAA', 'CKAGEAA','CNIGEAA','CIQHEAA','CLYHEAA']; function init(){ $('#titleSpan').html('Mi pueblo grupo NICHE'); $('#fromSecondPage').hide(); tokenArr.unshift(''); document.getElementById('player').src = "https://www.youtube.com/embed/S7TSQtGDWBw?autoplay=0&rel=0"; } </script> <b>HELP AND REMARKS</b> <br><br> <div id="helpDiv" style="width:570px;height:360px;overflow:auto;text-align:left;border:1px solid white;padding:15px"> <pre style="font-family:Arial;font-size:11pt;line-height:160%"> For simplicity this page does not play videos continuously. To find the page where no nextPageToken (ie it is undefined) do the following: <b>TEST A</b> Choose one search term (from "101 Strings" .. to "The Shadows"). For example, we chose "101 Strings". -Click On "Page 1" and wait a bit. - Read "JSON RESPONSE" we see: "TotalResults": "751 031", (greater than 1000) But 1000 = (50 vides / page) * 20 pages. So "nextPageToken" will not be present on page 20. => We check: - Click on the "19 CIQHEAA" and we still see netPageToken - But when you click the button "20 CLYHEAA", did not see it again <b>TEST B</b> -Choose The search term "alejandrocolladoysus" -Click On "Page 1". - We see: "TotalResults": "140", but 100 <140 <150 So "nextPageToken" will not be present on page 3 (150/50 = 3). => We check: - Click on the "2 CDIQAA" still see nextPageToken - Click on "3 CGQQAA" nextPageToken disappeared; NOTE: at the bottom of page 3, we can read: "nextPageToken": "undefined" =========================================== <b>HOW TO EXCLUDE THE VIDEOS DUPLICATED</b> There are 2 solutions: <b>1</b>- USE jQuery function inArray(inputArray[i], outputArray): - Create the aray totalVid = []; - Use For-looping - Store all videoid and playlistId into that array: totalVid.push (response.items [i].id.videoId) totalVid.push (response.items[i].id.playlistId) - Stop for-looping when totalVid.length == 1005 // i.e totalVid.length > 1000; - Create the ClearVid array = []; - Execute excluding the duplicated by using the function clearVid = GetUnique(totalVid); Here is the Js code of this function function GetUnique(inputArray){ var outputArray = []; for (var i = 0; i < inputArray.length; i++){ if ((jQuery.inArray(inputArray[i], outputArray)) == -1){ outputArray.push(inputArray[i]); } } return outputArray; } <b>2</b>- USE For-looping to count the sum of videoIds and playlistIds: sumNum = vidNum + pidNum; And stop searching when the number sumNum is aqual to 500 if(sumNum == 500){return} </pre> </div> <br> <b>SOURCE CODE of this webpage</b> <br><br> <iframe src="code-next-page-token.html" style="width:620px;height:500px"> </iframe> <br><br> <a name="bott"></a> <div class="bar" style="height:22px;color:white;background-color:#996600;padding-top:8px"> Return to my blog: <button href="#" onclick="goURL('http://phanhung20.blogspot.com')"> phanhung20.blogspot.com</button> </div> </div> <!-- center --> </body></html> <!-- 786 lines -->
