LOADING LOOKS LIKE SEARCHING

NOTE: I know very little about Javascript Object and JSON. So I apologize if something goes wrong.

In this web from top to bottom there are 3 sections: Play videos, Load javascript (json contents) and Search videos and save to PC.

1- Search videos and save json contents

Click on the light yellow button "Bott" to go to the page bottom, where is located "Search section".
Enter the search term and click the button "S300" to find 300 clips or the button "S500" to get 500 clips.

I try to save JSON response sent by YouTube server as a Javascript file with unique object that I call "info".
If we find 500 videos, the YouTube server will send 10, 11 or 12 pages of json format to us. The new json content will overwrite the old. Therefore, to record all the pages I added a new object called a page[mem] which has the structure of the array.

Index mem is string and it shall take the value of "nextPageToken".
At the start there is no "nextPageToken". So we can arbitrarily put mem = "null" or mem = "undefined".
Every time a new json page comes to our PC, the "mem" receives new values and the entire json contents is made as the value of the object "page".

Everything temporarily recorded in a textarea.
Finally, when the searching is completeted javascript will write "info = " and "big object" info was made, ready for saving as a js file.

A- MINIMUM CODE - Creating JavaScript file 

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  
  <style>
  body{
  background-color:#CCCCCC; margin:0px; padding:0px;
  font-family:Arial; font-size:10pt;
  }
  input[type="button"], button{
  background-color:#DDDDDD; cursor:pointer; padding:0px;
  }
  </style>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  </head>
  
  <body>
  <body onload="init()"> 
  <div align='center'>
  <br>
  <table id="header1" width="600" height="42px" 
  style="background-color:#009999;color:white;font-size:11pt;font-weight:bold">
  <tr>
      <td style="border:0px gray solid;vertical-align:middle;text-align:center">&nbsp;
          <b><i>Search:</i></b>&nbsp;<input type="text"  value="Franck Pourcel" 
          id="searchtext1" size="72" style="border-style:inset">&nbsp;
      </td>
  </tr><tr>
      <td style="border:0px gray solid;text-align:center">
          <div style="float:left;width:140px;height:20px"></div>
          <div style="float:left;width:60px;height:20px"><b><i>Found:</i></b></div>
          <div id="foundText" 
style="float:left;font-size:12pt;font-style: italic;width:90px;color:black;background-color:white">0
          </div>
          <div style="float:left;width:10px;height:20px"></div>
          <div style="float:left">
              <button type="button"  onclick="start(40)">S40</button>
              <button type="button"  onclick="start(180)">S180</button>
              <button type="button"  onclick="start(300)">S300</button>
              <button type="button"  onclick="start(500)">S500</button>
          </div>
      </td>
  </tr></table>
  <br>
  <span id="response1"></span>&nbsp;<b>-</b>&nbsp;<span id="count"></span>
  <br>
  <br>
<div id="tip" style =
"width:580px;height:50px;overflow:auto;background-color:#EEEEEE;text-align:left;padding:10px;line-height:160%">
      <a href="#" onclick="readyTerm('101 Strings'); return false">101 Strings</a>,&nbsp;
      <a href="#" onclick="readyTerm('Abba'); return false">Abba</a>,&nbsp;
      <a href="#" onclick="readyTerm('Bee Gees'); return false">Bee Gees</a>,&nbsp;
      <a href="#" onclick="readyTerm('Billy Vaughn'); return false">Billy Vaughn</a>,&nbsp;         
      <a href="#" onclick="readyTerm('Franck Pourcel'); return false">Franck Pourcel</a>,&nbsp;               
      <a href="#" onclick="readyTerm('Klaus Wunderlich'); return false">Klaus Wunderlich</a>,&nbsp;
      <a href="#" onclick="readyTerm('Manuel The Music of the Mountains'); return false">
      Manuel The Music of the Mountains</a>,&nbsp;      
      <a href="#" onclick="readyTerm('Paul Mauriat'); return false">Paul Mauriat</a>,&nbsp;      
      <a href="#" onclick="readyTerm('Richard Clayderman'); return false">Richard Clayderman</a>,&nbsp;
      <a href="#" onclick="readyTerm('Ricky King'); return false">Ricky King</a>,&nbsp;
      <a href="#" onclick="readyTerm('Romantic Guitar'); return false">Romantic Guitar</a>,&nbsp;
          
      </div>
      <br>
      <b>JavaScript Object corresponding to YouTube Json data</b>
      <br><br>   
  <textarea id='areaRes' style="width:590px;height:320px;padding:5px"></textarea>
  <br><br>
  </div> <!-- center-->    
  
  <script>
  
 var nextPageToken;   
 portion = 50;  // portion may be <= 50; but here it's better to set 50  
 var searchText = "";
 var maxRes = portion; 
 var want = 300;
 sum = 0; 
 
 function start(num){
      retVal = true;
      if ($('#areaRes').val() != ''){
            st = "Are you sure?\nCurrent javascript file will be deleted\n"+
            "If neccessary to save it, click 'Cancel'";
            var retVal = confirm(st);
      }
      if( retVal == true ){
            var maxRes = portion; 
            want = num;
            $('#areaRes').val('');
            
            arrPage = {}; 
            memPage = 'null';
            info = {};
            searchVid();
      }else{
            return false;
      }
 }
  
 arrPage = {}; 
 memPage = 'null';
 info = {};
    
  function searchVid(PageToken){
        var searchText= $('#searchtext1').val();
        $('#response1').html("<b>"+searchText+"</b>");
  $.get(
        "https://www.googleapis.com/youtube/v3/search",{
        part : 'snippet',
        q : searchText,
        maxResults : 50,
        pageToken : PageToken,
        key: 'AIz*********************************zm4'},
  
    function myPlan(response){
        nextPageToken=response.nextPageToken;       
        arrPage[memPage] = response;       
        memPage =  nextPageToken; 
        if(sum < 3){    
            var resultCount = response.pageInfo.totalResults;   
            $('#count').html("<b>Total: "+resultCount+" Results.</b>");
        }
        if(want >= resultCount){ want = resultCount} 
        for (var i=0; i<response.items.length;i++){ 
            var videoID=response.items[i].id.videoId;
            if(typeof videoID != 'undefined'){
                  document.getElementById('foundText').innerHTML = 
                  '<span style="color:green"><b>'+sum+'</b></span>';
                  sum++ ; 
        
                  if((sum == want)||(sum == resultCount)){ 
                      document.getElementById('foundText').innerHTML = 
                      '<span style="color:#6633FF"><b>'+sum+'</b></span>';
                         
                      info = {'page':arrPage}
                      ppp = JSON.stringify(info, '', 2);
                      $('#areaRes').val('info = ' + ppp);
                      sum = 0;
                      want = 300;
                      return;
                    }
              }
        } 
        x = want - sum;
        if(x >= portion){
            maxRes = portion;
        }else{
            maxRes = x;
        }
        searchVid(nextPageToken);
    });
 }
 
  function readyTerm(term){
      $("#searchtext1").val(term);
  }
  
  function init(){
      $('#areaRes').val('');
  }
  
  </script>
  </body></html>  <!-- 167 lines -->



B- FULL CODE

Loading Javascript file
Enter the name of file to load. Click the button "Load" and wait about 30 seconds until you see the following message


Click on the button "null" to build list of videos from the data of first page.
Continue to click on the same button a few times to load the second, third ... pages. (The "null" turn renamed "CDIQAA". "CGQQAA", ... )


When reading the code beneath, We can see that it is like the code of "myPlan()" function I've used in my previous web pages for searching YouTube videos: 

numb = 0;
 function showPage(){
    response =  info.page[mem];
    for(i=0;i<response.items.length;i++){
        ide = response.items[i].id.videoId;
        if(typeof ide != 'undefined'){
            titSt = response.items[i].snippet.title;
            tit.push(titSt);
            vid.push(ide);
            mm += '<b>'+(numb+1)+'.</b>&nbsp;<a href="#" onclick="playVid('+ 
                  numb +');return false">'+ titSt +'</a><br>'+
                  response.items[i].snippet.channelId + ' | ' +
                  response.items[i].snippet.channelTitle +'<br>'+                    
                  '<img  width="80" height="60" src="http://img.youtube.com/vi/'+ 
                  ide +'/default.jpg"><br><br>';
            numb++;
        }
    }
   ...
  }

SOURCE CODE OF ABOVE WEB PAGE 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>loading-is-like-searching</title>
  <style>
  body{
  background-color:#CCCCFF;
  margin:0px; padding:0px;
  font-family:Arial;
  font-size:10pt;
  }
  input[type="button"], button{
  background-color:#DDDDDD;
  cursor:pointer;
  padding:0px;
  }
  #list1{
  padding:15px;
  }
  .bar{
  margin:0px;
  width:99%;
  background-color:#006633;
  color:white;
  font-weight:bold;
  padding:3px;
  font-size:11pt;
  }  
  .bar1{
  width:630px;
  background-color:#996633;
  color:white;
  font-weight:bold;
  padding-top:6px;
  padding-bottom:6px;
  }
  #list1 td{
  font-family:Arial; font-size:10pt;
  background-color:#EEEEEE; 
  }   
</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='fix' class="bar1" style="position:fixed;top:0px;left:15px;text-align:left">
      <button onclick='location.reload()'>Refresh</button>&nbsp;&nbsp;
      <input type="text" value=0 id='lenSpan' style="font-size:10pt;width:80px;">
      <button id='button1' onclick="showPage()">null</button>&nbsp;&nbsp;
      <input type="button" onclick="window.scrollTo(0,0)" value="Top" style="background-color:#FFFF99;">
      <input type="button" onclick="goto('loadJS')" value="Load" style="background-color:#FFFF99;">
      <input type="button" onclick="goto('bott')" value="Bott" style="background-color:#FFFF99;">
      <button onclick="stopYoutube()">Stop</button>
      <button onclick="pauseYoutube()">Pause</button>
      <button onclick="playYoutube()">Play</button>
      <button onclick="nextVid()">Next</button>&nbsp;     
  </div>  <!--fixed left:189-->
  
   <div id="player" style="margin-top:35px"></div>
   <div id="vtitle" 
style="text-align:center;width:630px;height:19px;color:white;background-color:#333333;padding-top:4px;overflow:hidden">
   </div>
   <a name="loadJS"></a>
   <br>
   <div id="list1Div" 
   style="width:630px;height:260px;overflow:auto;text-align:left;background-color:white">
   <table id="tableA" width="100%" border="1"><tbody id="list1">
   </tbody></table>
   </div>
   <br>
<div class="bar1">       
2- LOAD JS LIST FROM THE SAME DOMAIN OR FROM REMOTE SERVER</i></b>
  <div style="width:85%;border:1px white solid;padding:15px;text-align:left;line-height:150%">
  Click the button "Load" and wait about 30 seconds, then click button "null" on the top of page to show 
  first page.<br>
  Continue to click on the same button a few times to load the second, third ... pages.
  On each click the number of shown videos increased by about 50 and the caption of the 
  button changes to show "page token" for the next page.
  </div>
</div>
<br>
<form name="form2">
          <Input id="rad1" type =radio Name =radi Value ="pc" onchange="setPlace(this)" checked="checked">Same Folder
          &nbsp;
          <Input id="rad2" type =radio Name =radi Value ="server1" onchange="setPlace(this)">From Server 1
          &nbsp;
          <Input id="rad3" type =radio Name =radi Value ="server2" onchange="setPlace(this)">From http://play-videos.bugs3.com
</form>
      <b>Path:&nbsp;</b>
      <input id="txt15" type="text" size='80' value="" style="overflow:auto"><br>
      <br>
      <b>File to load</b>&nbsp;
      <input id="selJSaa" type="text" size=78 value="info-paulmauriat-500.js" style="overflow:auto">
      &nbsp;<input type="button" value="Load" onclick="readJS()">

<br>  
  <textarea id="area1a" style="width:92%;height:200px;display:none"></textarea>
 
<div  id="bigfilesDiv" 
style="text-align:left;width:600px;height:80px;overflow:auto;font-size:10pt;font-family:Arial;background-color:#FFF;padding:15px;line-height:160%;margin:20px;">

  <!--////////////// TOP BORDER OF "Javascript file names"  //////////////-->
  <div id="pcjs" style="display:none">
  EMPTY. You should create javascript files and add them here.
  
  </div>
  
  <!--//////////// BORDER BETWEEN PC LIST AND SERVER2 LIST /////////////-->
  
  <div id="server2js" style="display:block">
  <a href="#" onclick="selectText('info-paulmauriat-500.js');return false">
  LOAD:</a> info-paulmauriat-500.js
  <br>
  <a href="#" onclick="selectText('info-pourcel-500.js');return false">
  LOAD:</a> info-pourcel-500.js
  <br>
  <a href="#" onclick="selectText('info-ricky-king-500.js');return false">
  LOAD:</a> info-ricky-king-500.js
  <br>
  <a href="#" onclick="selectText('info-abba-500.js');return false">
  LOAD:</a> info-abba-500.js
  <br>
  <a href="#" onclick="selectText('info-bee-gees-300.js');return false">
  LOAD:</a> info-bee-gees-300.js
  <br>
  <a href="#" onclick="selectText('info-manuel-the-music-of-the-mountains-300.js');return false">
  LOAD:</a> info-manuel-the-music-of-the-mountains-300.js
  <br>
  <a href="#" onclick="selectText('info-carpenters-500.js');return false">
  LOAD:</a> info-carpenters-500.js
  <br>

  <a href="#" onclick="selectText('info-enrique-chia-500.js');return false">
  LOAD:</a> info-enrique-chia-500.js
  <br>
  <a href="#" onclick="selectText('info-richard-clayderman-500.js');return false">
  LOAD:</a> info-richard-clayderman-500.js
  <br>
  <a href="#" onclick="selectText('info-frank-chacksfield-300.js');return false">
  LOAD:</a> info-frank-chacksfield-300.js
  <br>
  <a href="#" onclick="selectText('info-maximo-spodek-500.js');return false">
  LOAD:</a> info-maximo-spodek-500.js
  <br>
  
  
  </div>  
  <!--///////////// BOTTOM BODRDER OF "Javascript file names" /////////////-->    
</div>

<table id="header1" width="630" height="42px" style="background-color:#996633;color:white;font-size:11pt;font-weight:bold">
  <tr>
      <td style="border:0px gray solid;vertical-align:middle;text-align:center">&nbsp;
          <b>3- <i>Search:</i></b>&nbsp;<input type="text"  value="Franck Pourcel" 
          id="searchtext1" size="72" style="border-style:inset">&nbsp;
          
      </td>
  </tr><tr>
      <td style="border:0px gray solid;text-align:center">
          <div style="float:left;width:60px;height:20px"></div>
          <div style="float:left;width:60px;height:20px"><b><i>Found:</i></b></div>
          <div id="foundText" style="float:left;font-size:12pt;font-style: italic;width:90px;color:black;background-color:white">0</div>
       <div style="float:left;width:10px;height:20px"></div>
       <div style="float:left">
          <button type="button"  onclick="start(40)">S40</button>
          <button type="button"  onclick="start(180)">S180</button>
          <button type="button"  onclick="start(300)">S300</button>
          <button type="button"  onclick="start(400)">S400</button>
          <button type="button"  onclick="start(500)">S500</button>
      </div>
      </td>
  </tr>
  </table>
  <br>
  <span id="response1"></span>&nbsp;<b>-</b>&nbsp;<span id="count"></span>
  <br>
  <br>
<div id="tip" style =
"width:600px;height:105px;overflow:auto;background-color:#EEEEEE;text-align:left;padding:15px;line-height:160%">
      <a href="#" onclick="readyTerm('101 Strings'); return false">101 Strings</a>,&nbsp;
      <a href="#" onclick="readyTerm('Abba'); return false">Abba</a>,&nbsp;
      <a href="#" onclick="readyTerm('Bee Gees'); return false">Bee Gees</a>,&nbsp;
      
      <a href="#" onclick="readyTerm('Bert Kaempfert'); return false">Bert Kaempfert</a>,&nbsp;
      <a href="#" onclick="readyTerm('Billy Vaughn'); return false">Billy Vaughn</a>,&nbsp;
      <a href="#" onclick="readyTerm('Caravelli'); return false">Caravelli</a>,&nbsp;
      <a href="#" onclick="readyTerm('Carpenters'); return false">Carpenters</a>,&nbsp;
      
      <a href="#" onclick="readyTerm('Cecil Gonzalez instrumental'); return false">
      Cecil Gonzalez instrumental</a>,&nbsp;
      <a href="#" onclick="readyTerm('Enrique Chia'); return false">Enrique Chia</a>,&nbsp;
      
      <a href="#" onclick="readyTerm('Francisco Garcia guitarist'); return false">
      Francisco Garcia guitarist</a>,&nbsp;
      
      <a href="#" onclick="readyTerm('Franck Pourcel'); return false">Franck Pourcel</a>,&nbsp;
      <a href="#" onclick="readyTerm('Frank Chacksfield'); return false">Frank Chacksfield</a>,&nbsp;
      <a href="#" onclick="readyTerm('Guitar Mood'); return false">Guitar Mood</a>,&nbsp;
      
      <a href="#" onclick="readyTerm('Helmut Zacharias'); return false">Helmut Zacharias</a>,&nbsp;
      <a href="#" onclick="readyTerm('Hugo Montenegro'); return false">Hugo Montenegro</a>,&nbsp;
      <a href="#" onclick="readyTerm('Hugo Strasser'); return false">Hugo Strasser</a>,&nbsp;
     
      <a href="#" onclick="readyTerm('James Last'); return false">James Last</a>,&nbsp;
      <a href="#" onclick="readyTerm('Klaus Wunderlich'); return false">Klaus Wunderlich</a>,&nbsp;
      <a href="#" onclick="readyTerm('Manuel The Music of the Mountains'); return false">
      Manuel The Music of the Mountains</a>,&nbsp;
      
      <a href="#" onclick="readyTerm('Maximo Spodek'); return false">Maximo Spodek</a>,&nbsp;
      <a href="#" onclick="readyTerm('Nicolas de Angelis'); return false">Nicolas de Angelis</a>,&nbsp;
      <a href="#" onclick="readyTerm('Paul Mauriat'); return false">Paul Mauriat</a>,&nbsp;
      
      <a href="#" onclick="readyTerm('Ray Anthony'); return false">Ray Anthony</a>,&nbsp;
      <a href="#" onclick="readyTerm('Ray Conniff'); return false">Ray Conniff</a>,&nbsp;
      
      <a href="#" onclick="readyTerm('Richard Clayderman'); return false">Richard Clayderman</a>,&nbsp;
      <a href="#" onclick="readyTerm('Ricky King'); return false">Ricky King</a>,&nbsp;
      <a href="#" onclick="readyTerm('Romantic Guitar'); return false">Romantic Guitar</a>,&nbsp;
      <a href="#" onclick="readyTerm('The Shadows'); return false">The Shadows</a>,&nbsp;
      
      </div>
      <br>
    <div class="bar1">       
SAVE SEARCH RESULTS AS JAVASCRIPT FILE TO PC (Browser supporting HTML5)
    <div style="width:85%;border:1px white solid;padding:15px;text-align:left;line-height:150%">
    Suppose that you've entered the search term "china travel" then you click the
    button "S300" to search 300 YouTube video clips. You need to wait until the 
    "All" and "Found" numbers stop changing.<br>
    Then you will see at the bottom of the page the content of "json" sent by YouTube
    server. It is changed very little in order you can save as javascript file.
    <br><br>
    At the same time file name has been automatically generated. In this case it is:
    "info-china-travel-300.js". You can change the file name if you want, but should 
    retain the first 5 chararters "info-". It was the signal that this is the  
    "Youtube json" file converted to "javascript".
    <br><br>
    Click the green button "SAVE".<br>
    Typically, you can find saved js file in the folder C:\..\Download of your PC.<br>
    Copy it and paste it to the folder where is located this web page. 
    </div>
    </div>
      <br>
   <b>File Name</b>&nbsp;<input type="text" id="fileName" value="list1.js" size="70">&nbsp;
  <a id="anch" href='' onclick="makeLink(this, document.getElementById('areaRes').value);">
  <b style="background-color:green;color:white;border:2px white solid">SAVE</b></a>
  <br>
  <br>
  <textarea id='areaRes' style="width:630px;height:280px;padding:5px"></textarea>
  <br><br>
  <a name="bott"></a>
  </div> <!-- center-->
  
  <script>
  tit = []; vid = [];
  mm = '';

 function init(){
    $('#areaRes').val(''); $('#lenSpan').val(''); $('#fileName').val('');
    $('#txt15').val('http://play-videos.bugs3.com/v3/info/');
    document.getElementById('rad3').checked = true;
    leftNum = $('#player').position().left;
    document.getElementById('fix').style.left = leftNum;
 }
 
 /////////////////// LOAD JAVASCRIPT (info object)
 
 function selectText(txt){  
      obj = document.getElementById('selJSaa');
      obj.value = txt;
 }
 
 mem = 'null'; 
 function readJS(){
      mem = 'null';
      $('#button1').html(mem);
      str15 = document.getElementById('txt15').value; 
      str = document.getElementById('selJSaa').value;
      mm1 = "<script src=\""+ str15+ str + "\" type=\"text/javascript\"></scr" + "ipt>";
      $("head").append(mm1);
      alert('SUCCESS!\nThe file "' + str + '" has been loaded');
      mm = '<tr><td colspan="2"><div class="bar">'+ str + '</div></td></tr>';
      $('#list1').append(mm);
  }
  
 numb = 0;
 function showPage(){
    response =  info.page[mem];
    for(i=0;i<response.items.length;i++){
        ide = response.items[i].id.videoId;
        if(typeof ide != 'undefined'){
           
            titSt = response.items[i].snippet.title;
            tit.push(titSt);
            vid.push(ide);
            xx = '<tr><td width="100" valign="top">'+
            '<img  width="100" height="75" src="http://img.youtube.com/vi/'+ ide +
            '/default.jpg">'+
            '</td><td style="padding:4px;">'+
            '<b>'+(numb+1)+'.</b>&nbsp;<a href="#" onclick="playVid('+numb+');return false">'+
                    titSt +'</a><br><b>'+ ide + '</b><br>'+
                    '<span style="color:green">'+ 
                    response.items[i].snippet.channelId + ' | ' + '<b>' +
                    response.items[i].snippet.channelTitle +  '</b> | ' +
                    response.items[i].snippet.publishedAt + '</span><br>'+
                    '<b>Description:</b><br>'+
                    response.items[i].snippet.description + '</td></tr>';    
            $('#list1').append(xx);
            numb++;
        }
    }
    mem = response.nextPageToken;
    
    $('#button1').html(mem);
    len = vid.length;
    last = len-1;
    $('#lenSpan').val(len);
 }
 
 ////////// PLAY VIDEO /////////////
  
  normalW = '630';
  normalH = '349'
  var player;
  startvid = 'otPNwTrva0I';
  var jj = 0;  
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  function onYouTubePlayerAPIReady() {  
        player = new YT.Player('player', {
            width: normalW,
            height:normalH,
            videoId: startvid,
            playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'showsearch': 0, },
            events: {
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError        
            }
        });    
  }
    
  function onPlayerError(error){
        if ( error ){
           nextVid();
        }
  }    
  
  function onPlayerStateChange(event) {
        if (event.data == 0) {
             nextVid();
             return false;
        }
  }
   
  function playVid(num){
      jj=num;
      ide = vid[num];
      showTit(num);
      player.loadVideoById(ide, "default");
  }
  
   function showTit(k){
      document.getElementById("vtitle").innerHTML = (k+1) + 
      '/'+ vid.length + ' : ' + tit[k];
  }
  
  function nextVid(){
      if(jj <= last){jj=jj+1}; 
      if (jj > last){jj=0};
      playVid(jj);
  }
  
  function playYoutube() {
      player.playVideo();
  }
  
  function pauseYoutube() {
      player.pauseVideo();
  }
  
  function stopYoutube() {
      player.seekTo(0, true);
      player.stopVideo();
  }
   
 ///////////////// SEARCH VIDEOS - USER NEED TO OBTAIN HIS OWN API v.3 KEY
  
 var nextPageToken;   
 portion = 50;  // portion may be <= 50; but here it's better to set 50  
 var searchText = "";
 var maxRes = portion; 
 var want = 300;
 sum = 0; 
 
 function start(num){
            var maxRes = portion; 
            want = num;
            $('#areaRes').val('');
            
            arrPage = {}; 
            memPage = 'null';
            info = {};
            searchVid();
  }
  
 arrPage = {}; 
 memPage = 'null';
 info = {};
    
  function searchVid(PageToken){
        var searchText= $('#searchtext1').val();
        $('#response1').html("<b>"+searchText+"</b>");
  $.get(
        "https://www.googleapis.com/youtube/v3/search",{
        part : 'snippet',
        q : searchText,
        maxResults : 50,
        pageToken : PageToken,
        key: 'AIz*********************************zm4'},
  
    function myPlan(response){
        nextPageToken=response.nextPageToken;       
        arrPage[memPage] = response;       
        memPage =  nextPageToken; 
        if(sum < 3){    
            var resultCount = response.pageInfo.totalResults;   
            $('#count').html("<b>Total: "+resultCount+" Results.</b>");
        }
        if(want >= resultCount){ want = resultCount} 
        for (var i=0; i<response.items.length;i++){ 
            var videoID=response.items[i].id.videoId;
            if(typeof videoID != 'undefined'){
                  document.getElementById('foundText').innerHTML = 
                  '<span style="color:green"><b>'+sum+'</b></span>';
                  sum++ ; 
        
                  if((sum == want)||(sum == resultCount)){ 
                      document.getElementById('foundText').innerHTML = 
                      '<span style="color:#6633FF"><b>'+sum+'</b></span>';
                         
                      info = {'page':arrPage}
                      ppp = JSON.stringify(info, '', 2);
                      $('#areaRes').val('info = ' + ppp);

        stext = searchText.replace(/ +/g, '-');
                      jsfile = "info-" + stext.toLowerCase() + '-'+ want +'.js';
                      $('#fileName').val(jsfile);

                      sum = 0;
                      want = 300;
                      return;
                    }
              }
        } 
        x = want - sum;
        if(x >= portion){
            maxRes = portion;
        }else{
            maxRes = x;
        }
        searchVid(nextPageToken);
    });
 }
 
  function readyTerm(term){
      $("#searchtext1").val(term);
  }
  
  ///////////////// SAVE JS FILE TO PC
   
  function makeLink(thi, text2save){
      thi.download =  document.getElementById("fileName").value;
      thi.href = "data:text/javascript; charset=utf-8, " +encodeURIComponent(text2save);
  }
  
  ////////////////// COMMOM FUNCTIONS
  
  function readyTerm(term){
      $("#searchtext1").val(term);
  }
  
  function goto(nam) {
    window.location.hash= nam;
  }
 
 function goURL(ur){
      window.location = ur;
  }
  
 function scroll2Element(){ 
      var top = $('#showState').position().top;
      $(window).scrollTop( top - 44 );
  }
  
 function setPlace(obj){
      place = obj.value;
     
      if(place == "pc"){
            st = '';
            $('#pcjs').show(); $('#server2js').hide();
      }else if(place == "server2"){
            st = 'http://play-videos.bugs3.com/v3/info/';
            $('#pcjs').hide(); $('#server2js').show();
      }else{
            st = '';
      }
      $('#txt15').val(st);     
  }
   
 </script>  
</body></html>  <!-- 516 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

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER

Image
Creating a video player using HTML5 is not too difficult. But it only plays some video formats such as MP4, OGG, WEBM. To watch more video formats, we must use the HTML5 video player plugin. I tried "Mediaelement.js" and found it great: in addition to the above mentioned formats, it can play YouTube, DaylyMotion, SoundCloud, Facebook, Vimeo, HLS, Dash, FLV and others. In the samples by "Mediaelement.js" I choose only two examples close to satisfy my needs. However in the sample for playlist, the player only plays mp4, mp3, ogg, webm and youtube. Meanwhile, the demo file can play a lot of formats but only play 1 video (when it is clicked) and stops. All the scripts are very short. Most just include only one function with multiple arguments to build the player. Nothing more. So I looked at the source code of the "mediaelement-js.com" page, where all js files are online and have more functions. However, it is very difficult for me...
Read more

COPYING VIDEO URLS AND SCANNING FOR TITLES

Image
I have rewritten this html file. You can download the zip-file from "mediafire.com" and test it: https://www.mediafire.com/?672vn6mgn94fwlx (1.82 MB) After downloading, extracting it you will have all the html and jpg files in one folder (index-csancopy). Move that directory so that it is a subfolder of the folder C:\xampp\htdocs\. To view, choose FireFox or Chrome as your default browser. Please run "index-my.html" using the following address: http://localhost/index-csancopy/index-me.html Or localhost/index-csancopy/index-me.html ========================================= So far I've used dynamic tables in my site to prepare the list of video as javascript files. But there was no notes about them. In this post we'll take a closer look on how to use dynamic table. Besides, I also present a simple manual method to collect the IDs of videos. It is nothing less than to copy the URL of the YouTube webpage (taken from the address text box or from ...
Read more