SEARCH BY KEYWORD - GETTING MAXIMAL NUMBER OF ITEMS

A. In this page's script beside the stop-searching-signal
 typeof response.nextPageToken == 'undefined' 
I have added the second signal:
 response.items.length == 0 
Those two signals are combined to make the condition sentence:
 if((response.items.length == 0)||(typeof response.nextPageToken == 'undefined')) 
   {alert('SUCCESS!'); /* ... */} 

By this, instead of waiting for 20 retrieving JSON pages (i.e for <= 1000 items)
I need to wait for only 12,13 or 14 pages. Therefore search time is reduced to 60%,70%.
In the end (for example, from page 15 to page 20) we might see:
items:[] => (response.items.length == 0) is true

I went to this solution after I had done the experiments to observe the specific content of a series of JSON pages sent by Google servers.

SOURCE CODE OF THIS WEB (search-max-new2.html) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="author" content="pvhung20">

  <style>
  body{
  font-family:Arial; font-size:10pt;
  background-color:#003333; margin:0px; padding:0px;
  }
  
  #header1{
  color:white; font-weight:bold; width:620px; height:24px;
  background-color:#006699; padding-top:3px; padding-bottom:3px;
  position: fixed; left: 0px; top: 0px;
  }
  #header1 td {border: none;}
 
 a{
 color:blue; text-decoration:none;
 }
 
 a:hover {
 background-color: #CCFF99;
 } 
  
  input[type="button"], button{
  background-color:#DDDDDD; cursor:pointer; padding:0px;
  }
   
  #wantSpan, foundText{
  font-weight:bold; font-size:12pt;
  text-align:center; font-style:italic;
  }
  
  #wantSpan{
  color:#666600;
  }
  
  #foundText{
  color:green;
  }
  
  td{
  font-size:10pt; vertical-align:top; border:1px gray solid;
  }
  
  #player{ 
  background-color:#999999;
  }
  
 .bar{
  width:608px;
  height:20px;
  background-color:#99CCFF; 
  color:black;
  font-weight:bold;
  padding:6px;
  }
 
  #menu{
  font-weight:bold;
  font-style:italic
  }
  
  #showState{
  border:2px solid gray;
  border-style:inset;
  color:#66FF00;
  font-weight:bold;
  text-align:left;
  background-color:black;
  padding:3px;
  padding-left:8px;
  }

  #footer td{
  vertical-align:middle;
  border:none;
  }
  .titleTxt{
  color:white;
  }
 
  .vNum{
  background-color:#CC6600; color:white; font-weight:bold
  }
  .qBut , .qButU{background-color:#CCCCCC; width:95px; margin:2px; padding:0px}
  
  .code{
  background-color:#CCCCFF;color:black;
  }
  
 </style>
 </head>
  
  <body onload="init()">
  <div align="center">
  
<div id="header1">
  <div id="showState" 
    style="margin-left:10px;margin-right:-20px;float:left;width:100px;height:15px;margin-top:0px;">
  </div>
    <b>Go to:</b>
    <input type="button" onclick="scrollToElement('showState',31)" value="Screen" style="background-color:#FFFF99">
    <input type="button" onclick="scrollToElement('searchtext1',45)" value="Search">
    <input type="button" onclick="bigNormal()" value="Big/Mid">
    <input type="button" onclick="scrollToElement('save-bar',75)" value="Save">
    <input type="button" onclick="scrollToElement('helpDiv', 80)" value="Help" style="background-color:#FFFF99">
    <button type="button" onclick="stopYoutube();">Stop</button>
    <button type="button" onclick="pauseYoutube();">Pause</button>
    <button type="button" onclick="playYoutube();" style="background-color:#FFFF99">Play</button>
    <button type="button" onclick="nextClick();">Next</button>
</div>

<div id="player" style="width:620px;background-color:black;margin-top:31px">
</div>
<div id="vtitle" style="text-align:center;width:620px;height:22px;color:white;background-color:#333333;padding-top:7px;">
</div>
    <br>
    <span style="color:white;font-size:11pt">Click to play videos continuously</span>
    <br><br>
    <div id="miniList" style="width:600;height:60px;overflow:auto;padding:10px;background-color:white;text-align:left;line-height:150%">
    
    <a href='#' id='an0' title='R7EBiiU6L1I' onclick='miniPlay(this); return false'>
    My Choice 544 - Paul Mauriat: Lamento Borincano</a><br>
    <a href='#' id='an1' title='3ji6s0CH7v0' onclick='miniPlay(this); return false'>
    Los Indios Tabajaras - Adios Mariquita linda</a><br>
    <a href='#' id='an1' title='N53VBYOXNCs' onclick='miniPlay(this); return false'>
    RAFAEL HERNANDEZ - Lamento Borincano ( Grand Piano)</a><br>
    <a href='#' id='an2' title='-x0fGXsZfwI' onclick='miniPlay(this); return false'>
    Adios Mariquita linda - Trio Los Panchos</a><br>
    <a href='#' id='an3' title='wQAvjhiVc0g' onclick='miniPlay(this); return false'>
    Amor-Amor-Amor (Los Indios Tabajaras)</a><br>
    <a href='#' id='an4' title='_rQheOglFos' onclick='miniPlay(this); return false'>
    Los Indios Tabajaras - Maria Elena</a><br>
    <a href='#' id='an5' title='rYmnTnUeVFE' onclick='miniPlay(this); return false'>
    This is Mexico's Yucatan Peninsula - Episode 2 - Diving in Playa del Carmen - in 4K UHD</a><br>
    
    </div><br>
    <span style="color:white;font-size:11pt">Click to enter keyword</span>
    <br><br>      
<div id="tip" style =
"width:600px;height:80px;overflow:auto;background-color:#EEEEEE;text-align:left;padding:10px;line-height:160%">
      <b>Travel:</b> 
      <a href="#" onclick="readyTerm('Gate1Travel'); return false">Gate1Travel</a>, 
      <a href="#" onclick="readyTerm('Expoza Travel'); return false">Expoza Travel</a>, 
      <br>
      <b>English:</b> 
      <a href="#" onclick="readyTerm('Mark Kulek'); return false">Mark Kulek</a>, 
      <br>
      <b>Music:</b>
      <a href="#" onclick="readyTerm('Adios mariquita linda'); return false">Adios mariquita linda</a>,
      <a href="#" onclick="readyTerm('Lamento Borincano'); return false">Lamento Borincano</a>,
      <br>
      <a href="#" onclick="readyTerm('101 Strings'); return false">101 Strings</a>, 
      <a href="#" onclick="readyTerm('Abba'); return false">Abba</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('Carpenters'); return false">Carpenters</a>, 
      <a href="#" onclick="readyTerm('Cecil Gonzalez instrumental'); return false">
      Cecil Gonzalez instrumental</a>, 
      <a href="#" onclick="readyTerm('Enrique Chia'); return false">Enrique Chia</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('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('Klaus Wunderlich'); return false">Klaus Wunderlich</a>,
      <a href="#" onclick="readyTerm('LOS INDIOS TABAJARAS'); return false">LOS INDIOS TABAJARAS</a>,
      <a href="#" onclick="readyTerm('Manuel & The Music of the Mountains'); return false">
      Manuel & The Music of the Mountains</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>, 
      
      </div>
      <br>    
<!-- today-->
<span class="titleTxt">STOP SEARCHING WHEN:&nbsp;&nbsp;
<input id='items' name="radioStop" type="radio" value="items" checked>&nbsp;items length = 0
&nbsp;&nbsp;
<input id='token' name="radioStop" type="radio" value="token">&nbsp;next page token = 'undefined'
</span>
<br>
<br>
<span id="response1" class="titleTxt"></span>&nbsp;<b class="titleTxt">-</b> 
      &nbsp;<span id="count" class="titleTxt"></span>
<br>
<br>
<table  width="620" style="background-color:#99CCFF">
  <tr>
      <td align="center" style="vertical-align:middle"> 
          <b><i>Search:</i></b> <input type="text"  value="Billy Vaughn" 
          id="searchtext1" size="80" style="border-style:inset"><br>
        <table width=100% border=1 height=55 style="line-height:130%">
          <tr>
          <td width=29% style="vertical-align:top">
          <b><i>Max: videos + playlists</i></b><br> <span id="wantSpan" style="font-size:11pt;font-style: italic">0</span>
          </td>
          <td style="vertical-align:top">
          <b><i>Total:</i></b>&nbsp;<span style="color:black;font-size:9pt">
          videos + playlists + channels</span> 
          <br><span id="foundText" style="font-size:11pt;font-style: italic">0</span>
          </td>
          <td width=36%align="right"  style="vertical-align:top">
          <span style="font-size:9pt">Click 'New Search' then 'Search Max'</span>
          <button type="button" onclick="location.reload()">New Search</button>&nbsp;
          <button type="button"  onclick="startIt(1000)">Search Max</button>
          </td>
          </tr>
        </table>
      </td>
  </tr>
</table>
  <br>

<FORM style="border:1px solid white;padding:4px;width:600px;display:none">
<span style="background-color:#FF9933;font-size:12pt;">
Search Time (seconds)&nbsp;</span>&nbsp;&nbsp;
<INPUT TYPE="text" NAME="display" VALUE="" onFocus="this.blur()" size=8>
&nbsp;
<button type="button" onclick="location.reload()">New Search</button>&nbsp;
<button type="button"  onclick="startIt(1000)">Search for Max</button>
<INPUT TYPE="button" NAME="general" VALUE="start" onClick="start()" style="display:none"> 
<!-- Don't delete the button with NAME="general"-->
</FORM>

<span class='titleTxt' style="font-size:11pt">
Display: response.items.length for the current page</span> 
<br><br>
 <textarea id="itemsArea" style="width:600px;height:40px"></textarea>
<br><br>

<span class='titleTxt' style="font-size:11pt">
Display: the sum (vid.length + listVid.length)</span>
<br><br>
<textarea id="itemsAreaC" style="width:600px;height:60px"></textarea>
<br><br>

<div style="font-size:11pt;margin-bottom:8px" class="titleTxt"><b>
First click the button "Search for Max" then you can click the buttons below</b></div>

<div id="tokenArea" display="block" 
style="color:white;border:1px white solid;width:590;padding:5px;height:130px;overflow:auto;">
<button class="qBut" title="undefined" onclick="searchJ(this); return false">0 undefined</button>
</div>
<br>

<b class="titleTxt" style="font-size:11pt">
CLICK THE LINK at "title": to play video/playlist</b>

<div id="pageNum" 
style="margin-top:7px;margin-bottom:7px;width:120px;height:20px;padding:2px;color:white;border:1px solid white"></div>
 
  <div id="preDiv" style="width:610px;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>

<table style="width:610px;;height:23px;margin-bottom:6px;background-color:#CCFF99">
<tr>
  <td width="50%">
      <b>Single videos</b>
  </td>
  <td>
      <b>Playlists</b>
  </td>
</tr>
</table>

<table>
<tr>
  <td>
      <div id="list1" 
      style="width:300px;;height:250px;overflow:auto;padding:2px;background-color:white;text-align:left">
      <table id="tableA" width="100%"><tbody id="r1">
      </tbody></table>
      </div>
  </td>
  <td>
      <div id="loadControl1" 
      style="width:300px;height:250px;overflow:auto;padding:2px;border:1px solid gray;text-align:left;background-color:white">
      </div>
  </td>
</tr>
</table>
<br>

<span class="titleTxt"><b>After searching videos you can build javascript file</b></span>
<br>
<br>
<div class="bar" id="save-bar">
      VIEW JAVASCRIPT FILE AND SAVE IT (to your PC) 
      <button type="button" onclick="makeWeb()">Build File</button> 
</div>
  <br>
  <input type="text" id="fileName" value="ytjson1.txt" size="85"> 
  <a id="anch" href='' onclick="makeLink(this, document.getElementById('areaRes1').value);">
  <b style="background-color:green;color:white;border:2px white solid">SAVE</b>
  </a>
  <br>
  <br>
  <textarea id='areaRes1' style="width:620px;height:250px;padding:15px"></textarea>
  <br>  
  <br>
<div class="bar">
HELP AND REMARKS
</div>
<br>
<div id="helpDiv" 
style="padding:10px;font-size:11pt;background-color:white;width:590px;height:470px;overflow:auto;text-align:left;border:1px solid white;padding:15px;line-height:160%">

<b>A. </b>In this page's script beside the stop-searching-signal<br>
<span class="code">&nbsp;typeof response.nextPageToken == 'undefined'&nbsp;</span><br>
I have added the second signal:<br>
<span class="code">&nbsp;response.items.length == 0&nbsp;</span>
<br><br>
<img src="search-max.gif" width="535" height="510"><br>
<pre style="background-color:CCFFCC;font-family:Arial;font-size:10pt;padding:15px;width:350px">
var state = $('input[name="radioStop"]').filter(":checked");
        if(state.val()=='items'){
              if(response.items.length == 0){
                  //stoptimer();
                  stop();
                  lastShow();
                  return
              }   
        }      
        
        if(typeof nextPageToken == 'undefined'){
            stop();
            lastShow();
            return
        }
</pre>
By this, instead of waiting for 20 retrieving JSON pages (i.e for &lt;= 1000 items)<br> 
I need to wait for only 12,13 or 14 pages. Therefore search time is reduced to 60%,70%.<br>
In the end (for example, from page 15 to page 20) we might see:<br>
"items":[ ]<br> 

It means that response.items.length == 0.
<br><br>
I went to this solution after I had done the experiments to observe the specific 
content of a series of JSON pages sent by Google servers.
<br>
<br>
</div>
<br>

<div class="bar" id="save-bar">
      SOURCE CODE OF THIS PAGE (search-max-new2.html)
</div>
<br>
<iframe id='codeDiv' src="code-search-max-new2.html" 
style="width:620px;height:520px;padding:0px;background-color:#999999">
</iframe>
<br><br><br>

<table id="footer" width="620px" height="38px" 
    style="background-color:#006699;color:white;">
  <tr>
  <td width="30%">
      <b><i style="font-size:14pt;font-family:'Times New Roman';"> My Web and Blog:</i></b>
  </td>
  <td width="70%" valign="midle" align="right">
      <input type="button" value="play4a.html" style="background-color:#DDDDDD;height:24px;"
      onclick="goURL('http://play-videos.url.ph/1603/play4a.html')" onmouseover="this.style.color='#F60';" 
      onmouseout="this.style.color='black';">
  
      <input type="button" value="phanhung20.blogspot" style="background-color:#DDDDDD;height:24px;"
      onclick="goURL('http://phanhung20.blogspot.com/')" onmouseover="this.style.color='#F60';" 
      onmouseout="this.style.color='black';">
 
      <input type="button" value="Go Top" style="background-color:#DDDDDD;height:24px;"
      onclick="window.scrollTo(0,0)" onmouseover="this.style.color='#F60';" 
      onmouseout="this.style.color='black';">
   
  </td>
  </tr>
</table>
<a name="bott"></a>
  </div>  <!-- center-->
  </body>
  
  <!--*********************** JAVASCRIPT CODE *******************************-->
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  
  <script>
  
  mNum = -1;  
    
    $('#miniList a').click(function(){
        mNum = $('#miniList a').index(this);
    });
  
 //////////////////1- SEARCH YOUTUBE VIDEOS WITH API V.3 /////////////////
 
 var nextPageToken;   
 portion = 50;  
 var searchText = "";
 var maxRes = portion; 
 var want = 1000;
 sum = 0; sumN = 0;
 tit = []; vid = []; univid = []; unilistVid = [];
 stList = '';
 
   function startIt(num){   
        want = num;
        start();
        searchVid()
   }
 
 plNum = 1;
 listVid = [];
 listTit = [];
 gCount1 = 0;  
 
 /* NOTE: Replace 'AIz**********************************zm4' with your key */
 
 function searchVid(PageToken){
        var searchText= $('#searchtext1').val();
        $('#response1').html("<b>Searching for "+searchText+"</b>");
     $.get(
        "https://www.googleapis.com/youtube/v3/search",{
        part : 'snippet',
        q : searchText,
        maxResults : 50,
        pageToken : PageToken,
        key: 'AIz**********************************zm4'},
  
    function myPlan(response){
        var state = $('input[name="radioStop"]').filter(":checked");
        if(state.val()=='items'){
              if(response.items.length == 0){
                  //stoptimer();
                  stop();
                  lastShow();
                  return
              }   
        }      
    
        nextPageToken=response.nextPageToken;
        prevPageToken = response.prevPageToken
        titleVal = response.nextPageToken;
        var kk = '';
        if(((gCount1+1)%5) == 4){kk = '<br>'}
        document.getElementById('tokenArea').innerHTML += 
        '<button class="qBut" title="'+ titleVal +
        '" onclick="searchJ(this); return false">'+ (gCount1+1) +' '+ titleVal +'</button>'+kk;
        var responseString = JSON.stringify(response, '', 2);
        var resultCount = response.pageInfo.totalResults;   
        $('#count').html("<b>Total: "+resultCount+" Results.</b>");
        stList = '';
        if(want >= resultCount){ want = resultCount} 
        itemsLen = response.items.length;
        
        for (var i=0; i<response.items.length;i++){ 
            var title=response.items[i].snippet.title;
        try{   
            var ytchannel = response.items[i].id.kind;
            if(typeof ytchannel != 'undefined'){
                      if(ytchannel == 'youtube#channel')
                         {;channelArray.push(ytchannel);}
            } 
        }catch(err){    
            var channelThumb = response.items[i].snippet.thumbnails.default.url;
            if(channelThumb.search('yt3.ggpht.com') !== -1){ 
            // runs well with "Maximo Prodex"; 
                      channelArray.push(channelThumb);
            }
       }    
            var xx =  response.items[i].id.playlistId;
            if(typeof xx != 'undefined'){
                ptitle = response.items[i].snippet.title;
                ss = plNum + '. '+'<a href="#" onclick = "loadPLId(\''+ xx +'\'); return false">'+ ptitle + '</a><br>'+ xx + '<br><br>';
                listVid.push(xx);
                listTit.push(ptitle);
                plNum++
                document.getElementById('loadControl1').innerHTML += ss
            }
            
            var videoID=response.items[i].id.videoId;
            if(typeof videoID != 'undefined'){
            var titSt =response.items[i].snippet.title;
                  vid.push(videoID);
                  tit.push(titSt);
                 ss='<tr><td style="width:80px;">'+
                  '<img  width="80" height="60" src="http://img.youtube.com/vi/'+ 
                  videoID +'/default.jpg">'+
                  '</td><td><b>'+ (sumN+1) +'</b> <a href="#" '+ 
                  'onclick="playVid('+sumN +'); return false">'+
                  titSt +'</a></td></tr>';
                  stList += ss;
                  document.getElementById('foundText').innerHTML = 
                  '<span style="color:green"><b>'+sum+'</b></span>';
                  document.getElementById('wantSpan').innerHTML = sumN + '';
                  sum++ ; sumN++ ; 
        
                  if((sum == want)||(sum == resultCount)){ 
                      alert('response.items.length == 0'); 
                      document.getElementById('foundText').innerHTML = 
                      '<span style="color:red"><b>'+sum+'</b></span>';
                      document.getElementById('wantSpan').innerHTML = 
                      '<span style="color:#6600FF">'+ sumN + '</span>';    
                      document.getElementById('r1').innerHTML +=  stList;  
                      stext = searchText.replace(/ +/g, '-');
                      jsfile = "plist-" + stext.toLowerCase() + '-'+ want +'.js';
                      $('#fileName').val(jsfile);
                      sum = 0;
                      len = vid.length;
                      last = len - 1;
                      return;
                    }  
              }
        }
        if(gCount1 == 0){
              $('#pageNum').html('Page 0 (original)');
              var stPage1 = JSON.stringify(response,'',2);
              document.getElementById('pre1').innerHTML = stPage1; 
        } 
        document.getElementById('r1').innerHTML +=  stList; 
      
  document.getElementById('itemsArea').value += (gCount1)+':'+(response.items.length) + ', ';
            
  document.getElementById('itemsAreaC').value += (gCount1)+':'+(vid.length+listVid.length) +', ';
        gCount1++;
      
        if(typeof nextPageToken == 'undefined'){
            stop();
            lastShow();
            return
        }
        
        searchVid(nextPageToken);
    });  
  }
  
  function lastShow(){
      univid = GetUnique(vid);
      unilistVid = GetUnique(listVid);
      document.getElementById('wantSpan').innerHTML = 
      '<span style="color:#FF9900;background-color:black">&nbsp;'+ 
      (univid.length + unilistVid.length) + ' / ' +(vid.length+listVid.length)+'&nbsp;</span>'+
      '<span style="color:black;font-size:9pt">&nbsp;('+((vid.length+listVid.length)-(univid.length + unilistVid.length))+'&nbsp;duplicates)';
      ;
      document.getElementById('foundText').innerHTML = 
      '<span style="color:#CCFF33;background-color:black"><b>&nbsp;'+ 
      (univid.length+unilistVid.length+channelArray.length)+' = '+ univid.length+'+'+unilistVid.length+'+'+
      channelArray.length+'&nbsp;</b></span>';
      var sec = document.getElementById('showState').innerHTML;
      sec = sec.replace('(sec)','');
      document.getElementById('showState').innerHTML = sec + 
      '&nbsp;&nbsp;<span style="color:#FF9900">DONE!</span>';
  }
  
  /* NOTE: Replace 'AIz**********************************zm4' with your key */
  
  function searchJ(thi){ // J means JSON page
        var str = $.trim(thi.innerHTML);
        var num = str.substring(0,str.indexOf(' ')); // space
        $('#pageNum').html('Page '+ num);
        gNum = (num)*50; gNum1 = (num)*50;
        var searchText= $('#searchtext1').val();
        pageTokenVal = thi.title;
        if (pageTokenVal == 'undefined'){pageTokenVal = undefined}        
      $.get(
          "https://www.googleapis.com/youtube/v3/search",{
          part : 'snippet',
          q : searchText,
          maxResults : 50,
          pageToken : pageTokenVal,
          order : 'relevance',
          key: 'AIz**********************************zm4'},
          myPlanJ
      )
  }
  
  gNum = 1; 
  gNum1 = 1; 
  
  function myPlanJ(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>";
       
      for (var i=0; i<response.items.length;i++) {
         
          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>&nbsp;"+ 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;color:white'> "+
              (gNum+1) + " </span>&nbsp;"+"<a href='#' title='"+xx+  
                  "' onclick ='loadPLId1(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+1) +  
            " </span>&nbsp;<a href='#' title='"+ vvid + 
            "' onclick='loadVideoById1(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;         
        }
         gNum++;
    }
    
    var st = JSON.stringify(response,'',2);
    document.getElementById('pre1').innerHTML = st; 
  }
   
 pvid = []; ptit = [];
 channelArray = []; uniqueArray = [];
  st22 = ''
  sum = 0;
    
 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;
 }

//////////////////////// Play User Videos - Play Playlist //////////////////////
  
  function writeTitle(){
      ss = '';
      for(i=0; i<vid11.length; i++){
          if(vid11[i].length > 11){
              sty = '<span style="color:red">'
          }else{
              sty ='<span style="color:blue">'
          }
          x = sty + '<b>'+i+'. </b>'+ tit11[i] + '</span><br>'+
          vid11[i] + '<br><br>';
          ss += x; 
      }
      document.getElementById('titDiv').innerHTML = ss
  }
   
  function makeLink(thi, text2save){
     thi.download =  document.getElementById("fileName").value;
     thi.href = "data:text/javascript; charset=utf-8, " + encodeURIComponent(text2save);     
  }
  
  function copyThis(){
      st22 = document.getElementById('areaRes1').value;
      document.getElementById('areaRes').value = st22
  }
                             
 ///////////////////4A- PLAY VIDEOS //////////////////
    
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
        
  function onYouTubeIframeAPIReady() {
      player = new YT.Player('player',{
          height: '349',
          width: '620',
          videoId: 'R7EBiiU6L1I', 
          playerVars:{
              controls: 1, 
              rel: '0'
          },
          events:{
              'onStateChange': onPlayerStateChange,
              'onError': onPlayerError
          }
      });
  }
        
  function onPlayerError(error){  
      if (error){
          if(singleVideo){
               if(miniNum.search('an') != -1){
                    mNext();
               }else{
                    nextVid(); //player.nextVideo();
               }
          }else{
                   player.nextVideo();
          }
          return false;
      }
  }    
         
  var playerState;
        
  function onPlayerStateChange(event) {
      if (event.data == 0){
            if(miniNum.search('an') != -1){
                mNext();
            }else{
                nextVid(); //player.nextVideo();
            }
            return false;
      }
    
      switch (event.data) {
            case YT.PlayerState.UNSTARTED:
            playerState = 'unstarted';
            break;
            
            case YT.PlayerState.ENDED:
            playerState = 'ended';
            break;

            case YT.PlayerState.PLAYING:
            playerState = 'playing';
            if(!singleVideo){
            document.getElementById( "vtitle" ).innerHTML = player.getVideoData().title;
            }
            break;
            
            case YT.PlayerState.PAUSED:
            playerState = 'paused';
            break;
            
            case YT.PlayerState.BUFFERING:
            playerState = 'buffering';
            break;
            
            case YT.PlayerState.CUED:
            playerState = 'video cued';
            break;
        }
        document.getElementById('showState').innerHTML = playerState;
  }  /* end of function */
        
  function previousYoutube() {
        player.previousVideo()
  }
 
  function playYoutube() {
        player.playVideo();
  }
        
  function pauseYoutube() {
        player.pauseVideo();
  }
        
  function stopYoutube() {
        player.seekTo(0, true);
        player.stopVideo();
  }
        
  function nextYoutube() {
        player.nextVideo();
  }
         
  ///////////////// 4B - PLAY VIDEOS ////////////
  
  jj = 0; last = 0; step == "n";
  singleVideo = true; 
  
  function nextClick(){
        if(singleVideo){
            if(miniNum.search('an') != -1){
                mNext();
            }else{
                nextVid()
            }
        }else{
            player.nextVideo()
        }
  }
  
  function playVid(num){
      miniNum = '';
      singleVideo = true;
      jj=num;
      showTit(num);
      ide = vid[num];
      player.loadVideoById(ide, "default");
  }
  
  function loadVideoById1(thi){
        var vid = thi.title;
        player.loadVideoById(vid, "default");
  }
  
  function loadPLId(pid) { 
            singleVideo = false;
            player.loadPlaylist({
                'list': pid ,
                'listType': 'playlist',
                'index': 0,
                'startSeconds': 0,
                'suggestedQuality': 'default'
            });
        }
  
   function loadPLId1(thi) { 
            var pid = thi.title;
            singleVideo = false;
            loadPLId(pid);
        }
  
  function nextVid(){
      last = vid.length - 1;
      step = "n";
      if(jj <= last){jj=jj+1}; 
      if (jj > last){jj=0};
      playVid(jj);
  }
  
  function backVid(){
      step = "b";
      if(jj>=1){jj=jj-1;}
      if (jj==0){alert("Begin Of List");}
      playVid(jj);
  }
  
  function showTit(k){
      document.getElementById("vtitle").innerHTML = (k+1) + 
      '/'+ vid.length + ' : ' + tit[k];
  }
  
  function pshowTit(k){
      document.getElementById("vtitle").innerHTML = (k+1) + 
      '/'+ vid.length + ' : ' + ptit[k];
  }
        
///////////////////// 5- GENERATE JAVASCRIPT FILE //////////////////////////////
 
  function makeWeb(){
      st = "lst = '';\n\n";
      for(i=0;i<listVid.length;i++){
      lTit = listTit[i].replace(/"/g,'\\"');
      st += '//'+ i + '\nlst += "'+ lTit + '"+\n'+
            '"##'+ listVid[i] +'@";\n';
      
      }
      document.getElementById('areaRes1').value += st +
      '\n///////////////////////////////////////////////////////////////////\n\n';
      
      st = "vst = '';\n\n";
      for(i=0;i<vid.length;i++){
          vTit = tit[i].replace(/"/g,'\\"');
          st += '//'+ i + '\nvst += "'+ vTit + '"+\n'+
          '"'+ vid[i] +'@";\n';
      }
      document.getElementById('areaRes1').value += st;
  }
           
  /////////////////// 6 COMMON FUNCTIONS /////////////////////
        
  function init(){
      $('#tokenArea').val('');  
      $('#itemsArea').val(''); $('#itemsAreaB').val('');$('#itemsAreaC').val('');
      leftNum = $('#player').position().left;
      document.getElementById('header1').style.left = leftNum;
      document.getElementById('areaRes1').value = '';
      document.getElementById('fileName').value = '';
      sum = 0;
      document.getElementById('foundText').innerHTML = '0';
      document.getElementById('areaRes1').value = '';
  }
   
  function readyTerm(term){
      $("#searchtext1").val(term);
  }
  
  function goto(nam) {
    window.location.hash= nam;
  }
 
 function goURL(ur){
      window.location = ur;
  }
    
  function scrollToElement(elem, add){ 
      var top = $("#"+ elem).position().top;
      $(window).scrollTop( top - add);
  }
  
  function bigNormal(){
     size = $('#player').width();
     if(size == 620){
         $('#player').width('980px');
         $('#player').height('551px');
         $('#header1').width('980px');
         $('#vtitle').width('980px');
         $('#footer').width('980px');   
     }else{
         $('#player').width('620px');
         $('#player').height('349px');
         $('#header1').width('620px');
         $('#vtitle').width('620px');
         $('#footer').width('620px');     
     }
     leftNum = $('#player').position().left;
     document.getElementById('header1').style.left = leftNum;    
 }
 
  function makeLink1(file, thi, text2save){
     thi.download =  document.getElementById(file).value;
     thi.href = "data:html/text; charset=utf-8, " + encodeURIComponent(text2save);     
  }
  
 /*@@@@@@@@@@@@@@@ from: ods.com.ua/win/eng/web-tech/js/htm/22-12.phtml*/

 var timerRunning = false
 var timerID = null
 var initial = new Date()

 function start() {
    document.forms[0].general.value = "stop"
    document.forms[0].general.onclick = stop
    initial = new Date()
  startTime = initial.getTime()
    stopTimer()
    showTimer()
 }

 function stop() {
    document.forms[0].general.value = "start"
    document.forms[0].general.onclick = start
    stopTimer()
 }

 function stopTimer() {
    if (timerRunning)
        clearTimeout(timerID)
    timerRunning = false
 }

 function showTimer() {
    var current = new Date()
    var curTime = current.getTime()
    var dif = curTime - startTime
    var result = dif / 1000
    if (result < 1)
      result = "0" + result
    result = result.toString()
    if (result.indexOf(".") == -1)
      // attach ".00" to end
      result += ".00"
    // is result contains only one digit after decimal point
    if (result.length - result.indexOf(".") <= 2)
        // add a second digit after point
      result += "0"
    // place result in text field
    document.forms[0].display.value = result
    // by me added:
    document.getElementById('showState').innerHTML = result + '&nbsp;&nbsp;(sec)';
    
    // call function recursively immediately (must use setTimeout to avoid overflow)
    timerID = setTimeout("showTimer()", 0)
    // timer is currently running
    timerRunning = true
 }
 
 var miniNum = '';
 
 function miniPlay(thi){
     singleVideo = true;
     miniNum = thi.id;
     loadVideoById1(thi)
 }
 
 function mNext(){  
        var len = $('#miniList a').size();
        if(mNum < (len-1)){
            next = mNum+1
        }else{
            next=0;
        }
        miniPlay1(next);  
 }
    
 function miniPlay1(nn){
        singleVideo = true;
        mNum = nn;
        miniNum = 'an'+nn; 
        xx = $('#miniList a').eq(nn);
        yy = xx.attr("title");
        zz = xx.html();
        player.loadVideoById(yy, "default");
 }
</script> </html>  <!-- 1030 lines -->





Popular posts from this blog

PHP JQUERY PROXY DEMO

Image
Proxy script (or proxy program) is a script, wich is located between the user's browser and the "target server". Here I'would like to make a simple demo for PHP-Jquery-script proxy method. So far in my blog I just use YouTube API v.3 and JavaScript-jQuery to find videos. This time I try to use PHP language and jQuery to find videos. We often hear about "Web scraping with PHP," which can be roughly considered to include 9/10 PHP and 1/10 jQuery. Now I want to do it again but with 1/10 PHP and 9/10 jQuery. This page ("php-jquery-proxy.html") is for web scraping using mainly jquery-ajax in combination with only one function from PHP language (get_file_contents function). Using it I can get video ids, video titles from the source code of youtube pages and watch those videos continuously. To use this page you don't need to have Youtube API-3 key but need to download from Internet the XAMPP package
Read more

WEB PROGRAMMING ON IPAD. Search yt videos by keyword and load js file to play

Previously in March and April 2016 I posted OBSERVE nextPageToken IN YOUTUBE JSON DATA and SEARCH BY KEYWORD - GETTING MAXIMAL NUMBER OF ITEMS. Now those posts were old, some links were broken, They are written for PC and then youtube did not restrict video search by granting quota. Now I update it to suit the quota situation and write for programming on the ipad. <!DOCTYPE html> <html> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <meta name= "author" content= "pvhung20" > <head> <script src= "https://code.jquery.com/jquery-3.6.0.js" ></script> <style> body { font-family :Arial; font-size : 14pt ; background-color : #003333 ; margin : 0px ; padding : 0px ; margin-bottom : 50px ; color : white ; } button , input , textarea , span { font-size : 14pt ; } textarea {
Read more