SEARCH PLAYLISTS AND USER UPLOADED VIDEOS

I have created 2 HTML files:
1. search4.html to search videos and create javascript file.
2. play4.html to run this javascript file.

In "search4", after getting json from Youtube I put video IDs and playlist IDs into different groups.

In "json response" there are many channelIds repeatedly recorded. So I have to use the function
jQuery.inArray (inputArray [i], outputArray)
to grab the unduplicated Ids.
A list of those unduplicated Ids is created.

When the user click on certain channelId the prefix "UC" of the Id changed to "UU".

Then all the videos uploaded to YouTube by this user is found and "anchor control tags" are made.

When users click on the "Build File", the file javascript of the following form is created:

---- EXTRACT FROM "plist-richard-clayderman-500.js" ---
lst = '';
//0
lst += "Richard Clayderman (100)"+
"##PL0597229B47AC711B@";
//1
lst += "Richard Clayderman Playlist"+
"##PL952F5C6F5CD939B3@";
//2
lst += "Popular Videos - Richard Clayderman"+
"##PLjQjaKp6EeSWYofmdobTQ5ix2NFM8q9MN@";

.............

vst = '';

//0
vst += "The Best of Richard Clayderman"+
"65EE7hTWq18@";
//1
vst += "The Best Of Richard Clayderman"+
"7lSg4NdZb0k@";
//2
vst += "Clayderman & Cortazar 4 Hours Soft Piano"+
"8dKLp2KB8u4@";
----------------------------------------

By clicking the green button "SAVE" you can save this javascript to your PC.

You have to create the file "play4.html" and use it to load and run javascript you just have saved.

Please read the source code of "play.html".
You will see how to use the same button (for example "Pause" and "Next") for controlling two different objects: "single videos" and "video playlists"

FILE "search4.html"


http://play-videos.url.ph/v3/search4.html

FILE "play4.html"
http://play-videos.url.ph/v3/play4.html


SOURCE CODE OF "search4.htnl" 

<!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:#999999; 
  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;
 }
 
 </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('help', 0)" 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:18px;color:white;background-color:#333333;padding-top:2px;">
    </div>
    <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="Franck Pourcel" 
          id="searchtext1" size="75" style="border-style:inset"><br>
          <table width="90%"><tr><td width="120" style="border:none;vertical-align:middle">
          <b><i>Total:</i></b> <span id="wantSpan" style="font-size:14pt;font-style: italic">0</span>
          </td ><td width="120" style="border:none;vertical-align:middle">
          <b><i>Found:</i></b> <span id="foundText" style="font-size:14pt;font-style: italic">0</span>
          </td><td align="right"  style="border:none;vertical-align:middle">
          <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>
          </tr></table>
      </td>
     </td>
  </tr>
  </table>
  <br>
      <span id="response1"></span> <b>-</b> <span id="count"></span>
      <br><br>
<div id="tip" style =
"width:590px;height:55px;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('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('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-->
<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>

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

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

<br>
<b>After searching videos you can build javascript file</b>
<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">
<i>HELP</i>
</div>
<br>  
<iframe id="help" src="help-search4.html" 
style="width:620px;height:400px;background-color:#EEEEEE"></iframe>
<br>
<br>
<!--//////////////////// SAVE ///////////////////////////////////////////-->

<div class="bar" id="save-bar">
      SOURCE CODE AND SAVE IT AS HTML FILE (to your PC)
  </div>
  <br>
   <input type="text" id="file1" value="my-search4.html" size="85"> 
  <a id="anch" href='' onclick="makeLink1('file1', this, document.getElementById('areaSource').value);">
  <b style="background-color:green;color:white;border:2px white solid">SAVE</b>
  </a>
  <br>
  <br>
<textarea id='areaSource' style="width:620px;height:250px;padding:15px">
<html>
 test2
</html>  
</textarea>
<!---------------------------------------->
<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.bugs3.com/v3/info1/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>
  
 //////////////////1- SEARCH YOUTUBE VIDEOS WITH API V.3 /////////////////
 
 var nextPageToken;   
 portion = 50;  // portion may be <= 50; but here it's better to set 50  
 var searchText = "";
 var maxRes = portion; 
 var want = 120;
 sum = 0; sumN = 0;
 tit = []; vid = [];
 stList = '';
 
   function start(num){
        want = num;
        searchVid()
   }
 
 plNum = 1;
 listVid = [];
 listTit = [];
         
  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){
        nextPageToken=response.nextPageToken;
        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;
            var videoID=response.items[i].id.videoId;
            
            channelId=response.items[i].snippet.channelId;
                if(typeof channelId != 'undefined'){
                      channelArray.push(channelId);
                }
           
            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
            }
            
            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)){ 
                      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;
                      want = 120; 
                      len = vid.length;
                      last = len - 1;
                      return;
                    }
              }
        } 
        document.getElementById('r1').innerHTML +=  stList;
        
        uniqueArray = GetUnique(channelArray);
            mm = '';
            for(i=0; i<uniqueArray.length; i++){
                mm += '<b>'+ (i+1) + '/' + uniqueArray.length +
                '</b> <a href = "#" onclick="loadPlaylist_uId(\''+ 
                uniqueArray[i]+'\', this\);return false">'+
                uniqueArray[i] +'</a><br><br>';
                document.getElementById('loadControl2').innerHTML = mm;
            }
        
        x = want - sum;
        if(x >= portion){
            maxRes = portion;
        }else{
            maxRes = x;
        }
        searchVid(nextPageToken);
    });  
  }
     
pvid = []; ptit = [];
function getVids(pid){
     $('#results').empty; 
    $.get(
        "https://www.googleapis.com/youtube/v3/playlistItems",{
        part : 'snippet', 
        maxResults : 45,   //20,
        playlistId : pid,
        key: 'AIz*********************************zm4'},
        function(data) {
            var presults;
            presults = '<tr><td colspan="2" style="background-color:green;color:white">'+
            '<b>VIDEOS by '+ pid +'</b></td></tr>';
             $('#tab3').append(presults);
            $.each( data.items, function( i, item ) {
                 // ?
                vid[sumN] = item.snippet.resourceId.videoId;
                tit[sumN] = item.snippet.title;
                presults = '<tr>'+
                  '<td style="width:80px;">'+
                  '<img  width="80" height="60" src="http://img.youtube.com/vi/'+ 
                  item.snippet.resourceId.videoId  +'/default.jpg">'+
                  '</td><td><b>'+ (sumN+1) +'</b> '+
                  '<br><a href="#" '+ 
                  'onclick="playVid('+ sumN +'); return false">'+
                  item.snippet.title +'</a></td></tr>';
                  sumN++;
                   $('#tab3').append(presults);     
            });           
        }
    );
}

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 loadPlaylist_uId(uId, thi) {
            uId = uId.replace(/^UC/g,'UU');
            thi.innerHTML = '';
            getVids(uId)
            player.loadPlaylist({
                'list': uId, 
                'listType': 'playlist',
                'index': 0,
                'startSeconds': 0,
                'suggestedQuality': 'default'
            });
  }
  
   function loadPLId(pid) { 
            singleVideo = false;
            player.loadPlaylist({
                'list': pid ,
                'listType': 'playlist',
                'index': 0,
                'startSeconds': 0,
                'suggestedQuality': 'default'
            });
        }
  
  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: 'XDZNaEOInoY', // 'otPNwTrva0I',
                playerVars: {
                    controls: 1, 
                    //rel: '0';
                },
                events: {
                    'onStateChange': onPlayerStateChange,
                    'onError': onPlayerError
                }
            });
        }
        
        function onPlayerError(error){  
            if (error){
                if(singleVideo){
                   nextVid();
                }else{
                   player.nextVideo();
                }
                return false;
            }
        }    
         
  var playerState;
        
        function onPlayerStateChange(event) {
            if (event.data == 0){
                if(singleVideo){
                   nextVid();
                }else{
                   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;
        }
        
        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){
                nextVid()
            }else{
                player.nextVideo()
            }
        }
  
  function playVid(num){
      singleVideo = true;
      jj=num;
      showTit(num);
      ide = vid[num];
      player.loadVideoById(ide, "default");
  }
  
  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(){
      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');
         // $('#bar0').width('980px');
         //$('#bar1').width('980px');                                    
         $('#footer').width('980px');   
     }else{
         $('#player').width('620px');
         $('#player').height('349px');
         $('#header1').width('620px');
         $('#vtitle').width('620px');
        // $('#bar0').width('812px');
        // $('#bar1').width('812px'); 
         $('#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);     
  }
         
    </script> 
 </html>  <!-- 785 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

COPY SOURCE CODE FOR ytvideo-play.html, test

Image
Before reading this post you should see the post: http://phanhung20.blogspot.com/2021/02/copy-source-code-for-ytvideo-searchhtml.html The file ytvideo-search.html can make all javascript files of the form objpage- ... .js. Those js files will be loaded by the file ytvideo-play.html for playing youtube videos. Tap COPY to create the file objpage-all.js COPY objpageAll = [ 'objpage-herald-winkler.js', 'objpage-paul-mauriat.js' ]; Tap COPY to create the file objpage-herald-winkler.js COPY /* 1- Tap the button COPY to copy this contain to clipboard. 2- Tap the button x in top right corner to quit this working file 3- Tap the button + in the bottom left to create a new javascript file with the name: objpage-herald-wingkler.js 4- Tap the name of this new file to open it and paste there the contain from clipboard. 5- Open the file objpage-all.js and add 'objpage-herald-wingkler.js' to the array objselect: objselect = [ ... , ... , objpage-herald-win...
Read more