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.
COPY SOURCE CODE (to clipboard):
Click the button "Copy code" (below) then open "Koder code editor" app on your Ipad
to create the file "ytsearch-play.html
TEST ytsearch-play.html
You don't need to drag the red arrow anywhere.
I use it to simulate mouse pointer because I don't have a mouse for ipad right now
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{ width:620px; height:300px; } #header1{ color:white; font-weight:bold; width:720px; height:40px; background-color:#006699; padding-top:3px; padding-bottom:3px; top: 0px; z-index:25; position: fixed; left: 0; right: 0; margin: 0 auto; } #header1 td {border: none;} a{ color:blue; text-decoration:none; } #wantSpan, #foundText{ font-weight:bold; font-size:12pt; text-align:center; font-style:italic; } #wantSpan{ color:#666600; } #foundText{ color:green; } td{ font-size:14pt; vertical-align:top; border:1px gray solid; color:#006699; /* black; */ } #player{ background-color:#999999; } .bar{ font-family:Times; font-style: italic; font-size:16pt; width:590px;height:20px; background-color:#87CEFA; color:#333366; font-weight:bold;padding:6px; border-width:5px; border-style:outset; } #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 } .code{ background-color:#CCCCFF;color:black; } button { position: relative; background-color:white; font-size: 22px; color: black; padding: 2px 12px; text-align: center; text-decoration: none; overflow: hidden; cursor: pointer; border-top: 4px solid #c0ffff ; /* 5px solid #c0ffff */ border-right: 4px solid #00f ; border-bottom: 4px solid #00f ; border-left: 4px solid #c0ffff ; border: 4px outset #b37d00 ; border-style: outset; } button:after{ content: ""; background:magenta; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px!important; margin-top: -120%; opacity: 0; transition: all 1.8s; } button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } </style> </head> <body onload="init()"> <div id="divCenter" align="center"> <div id="header1" class="notMy"> <div id="showState" style="margin-left:10px;margin-right:-20px;float:left;width:250px;height:20px;margin-top:5px;"> </div> <button onclick="screenFunc()">Screen</button> <button onclick="pSize()">Size</button> <button type="button" onclick="pauseYoutube();">Pause</button> <button type="button" onclick="playYoutube();">Play</button> </div> <div id="player" style="background-color:black;margin-top:46px"> </div> <div id="progressDiv" style="background-color:#006699;width:720px;padding-top:0px;padding-bottom:3px;margin-top:-6px;"> <progress id="progress-bar" max="580" value="0" style="width:580px;"> </progress> </div> <div id="vtitle" style="text-align:center;width:720px;height:60px;color:white;background-color:#006699;padding:0px;"> </div> <br> <button onclick="scrollToElement('save-bar',-15)">Search</button> <button onclick="scrollToElement('help', 110)">Help</button> <button type="button" onclick="stopYoutube();">Stop</button> <button type="button" onclick="nextVid();">Next</button> <br class="notMy"><br> <div style="width:610px"> Ready list. Just click any title to play videos continuosly<br> (This is where you store the videos you want to watch often) </div> <br class="notMy"> <button class="notMy" style="background-color:#FFFACD" onclick="hideNot()">Only lists/Show all </button> <button onclick="tTop('vidTab')">Top</button> <button onclick="tCur()">Playing</button> <button onclick="tBott('vidTab')">Bottom</button> <br class="notMy"><br class="notMy"> <div id="vidDiv" style="width:610px;height:170px;overflow:auto;background-color:white"> <table id="vidTab" class="listTab" style="width:100%"><tbody id="tbody2"></tbody></table> </div> <br> <div class="bar"> A- MAKE VIDEO LIST BY LOADING JS FILE </div> <br> <div style="width:610px"> First click the name of javascript file to be loaded </div><br> <div id="tip2" style = "width:600px;height:100px;overflow:auto;background-color:#DDD;text-align:left;padding:10px;line-height:160%;color:#666"> <a href="#" onclick="readyTerm2('https://searchvideos.000webhostapp.com/search250-mauriat.js'); return false">https://searchvideos.000webhostapp.com/search250-mauriat.js</a><br> <a href="#" onclick="readyTerm2('https://searchvideos.000webhostapp.com/more250-mauriat.js'); return false">https://searchvideos.000webhostapp.com/more250-mauriat.js</a><br> <a href="#" onclick="readyTerm2('https://searchvideos.000webhostapp.com/lastVid-mauriat.js'); return false">https://searchvideos.000webhostapp.com/lastVid-mauriat.js</a><br> <a href="#" onclick="readyTerm2('https://searchvideos.000webhostapp.com/search250-pourcel.js'); return false">https://searchvideos.000webhostapp.com/search250-pourcel.js</a><br> <a href="#" onclick="readyTerm2('https://searchvideos.000webhostapp.com/more250-pourcel.js'); return false">https://searchvideos.000webhostapp.com/more250-pourcel.js</a><br> </div> <br> <input type="text" value="https://pvhung20.w3spaces.com/search-250-spodek.js" id="fName" style="width:600px; border-style:inset"> <br><br> <span>Then click button "Load JS"</span> <br><br> <button onclick="loadJsFile()">Load JS</button> <button onclick="tTop('vidTabb')">Top</button> <button onclick="tCur()">Playing</button> <button onclick="tBott('vidTabb')">Bottom</button> <div class="notMy" style="width:720px"> <br> <span id="vidLoadS"></span> videos + <span id="plistLoadS"></span> playlists <br> </div> <br class="notMy"> <table style="width:610px;height:23px;margin-bottom:6px;background-color:#DDD"> <tr> <td style="background-color:#DDD"> <b>Single videos</b> </td> </tr> </table> <div id="vidTest" style="width:610px;height:300px;overflow:auto;background-color:white"> <table id="vidTabb" class="listTab" style="width:100%"><tbody id="tbody2b"></tbody></table> </div> <table style="width:610px;height:23px;margin-top:6px;margin-bottom:6px;background-color:#DDD" class="notMy"> <tr> <td style="background-color:#DDD"> <b>Playlists</b> </td> </tr> </table> <div id="plTest" class="listTab" style="width:610px;height:300px;overflow:auto;background-color:white; text-align:left"> <table id="vidTabc" style="width:100%"><tbody id="tbody2c"></tbody></table> </div> <br> <div class="bar" id="save-bar"> B- SEARCH VIDEOS WITH KEYWORD </div> <br> <span> First click an keyword to use<br> (or type what you want to search to the text box below <b><i> Search:</i></b>) </span> <br><br> <div id="tip" style = "width:600px;height:250px;overflow:auto;background-color:#DDD;text-align:left;padding:10px;line-height:160%;color:#666"> <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> <a href="#" onclick="readyTerm('西游记连环画'); return false"> 西游记连环画 (Chinese comics Joutney to the West) </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('Francis Goya guitar'); return false"> Francis Goya guitar</a>, <a href="#" onclick="readyTerm('Francisco Garcia guitarist'); return false"> Francisco Garcia guitar</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--> <table id="searchInfo" style="width:620px; background-color:#99CCFF"> <tr> <td align="center" style="vertical-align:middle"> <b><i>Search:</i></b> <br> <input type="text" value="Billy Vaughn" id="searchtext1" style="width:95%; border-style:inset"><br> <table width=100% border=1 height=55 style="line-height:130%"> <tr> <td width=50% style="vertical-align:top"> <b><i>Max:<br> 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:<br> videos + playlists + channels</i></b> <br><span id="foundText" style="font-size:12pt;font-style: italic">0</span> </td> </tr> </table> </td> </tr> </table> <br> <span>Then click an button below</span> <div style="width:530px;border:1px solid white;padding:12px; text-align:left"> <i> Search 100 (2 x 50) ) : get jsons of respond 0 and respond 1 <br> Search 250 (5 x 50) : get jsons of respond 0,1,2,3,4 <br> More 250 : get jsons of respond 5,6.7,8,9 <br> Last videos : get jsons of the remaining responds <br>(from respond 10 until response.items.length == 0) </i> </div> <br> <button onclick="startIt(100, 0)">Search 100</button> <button onclick="startIt(250, 0)">Search 250</button> <button onclick="startIt(250, 5)">More 250</button> <button onclick="startIt(500, 10)">Last videos</button> <br><br> <div style="width:586px;border:1px solid white;padding:12px; text-align:left;line-hight:150%"><i> While searching for videos, if you think javascript can't detect some error and therefore don't stop searching (you see that the search time is more than 4 or 5 seconds but the text "50,50 ..." is not displayed in the text box), please click the button below to stop it by yourself. </i> </div> <br> <button id="stopTimerBut" onclick="stopTimer()">Stop searching</button> <br> <br> <span class='titleTxt' style="font-size:14pt"> Display: response.items.length of responds (I call respond page)</span> <br><br> <textarea id="itemsArea" style="width:600px;height:40px"></textarea> <br><br> <span class='titleTxt' style="font-size:14pt"> Display: the sum (vid.length + listVid.length)</span> <br><br> <textarea id="itemsAreaC" style="width:600px;height:40px"></textarea> <br><br> <b class="titleTxt" style="font-size:14pt"> Result of searching. Click any blue title to start playing</b> <br><br> <button onclick="tTop('tableA')">Top</button> <button onclick="tCur()">Playing</button> <button onclick="tBott('tableA')">Bottom</button> <br><br class="notMy"> <table style="width:610px;height:23px;margin-bottom:6px;background-color:#DDD"> <tr> <td style="background-color:#DDD"> <b>Single videos</b> </td> </tr> </table> <div id="list1" class="listTab" style="width:610px;height:250px;overflow:auto;padding:2px;background-color:white;text-align:left"> <table id="tableA" width="100%"><tbody id="r1"> </tbody></table> </div> <table style="width:610px;height:23px;margin-top:6px;margin-bottom:6px;background-color:#DDD" class="notMy"> <tr> <td style="background-color:#DDD"> <b>Playlists</b> </td> </tr> </table> <div id="loadControl1" class="listTab" style="width:610px;height:250px;overflow:auto;padding:2px;border:1px solid gray;text-align:left;background-color:white"> <table id="tableB" width="100%"><tbody id="r2"> </tbody></table> </div> <br> <span class="titleTxt"><b>ATTENTION ! <br> <span style="color:#ff9999;"> Only after completed video searching you can use parts C- and D-</span></b></span> <br> <br> <div class="bar" id="save-bar"> C- MAKE VIDEO LIST JAVASCRIPT FILE </div> <br> <button onclick="makeWeb()">Show js file</button> <button onclick="copy('areaRes1')">Copy</button> <br><br> <textarea id="areaRes1" style="width:590px;height:250px;padding:15px;color:black"> </textarea> <br><br> <div style="width:586px;border:1px solid white;padding:12px; text-align:left;line-hight:150%"><i> - Having clicked the button "Copy" you now close running html (click x in the top right)<br> - In the used folder create a new javascript file (for example "search250-mauriat.js")<br> - Paste the contain from clipboard to this file<br> Koder automatically save this file<br> - Open the file "ytsearch-play.html" (also in Koder)<br> - Find the tag <div id ="tip2" ... ><br> - Add the following code inside this div:<br> <a href="#" onclick="readyTerm2('search250-mauriat.js'); return false">search250-mauriat.js</a><br></i> </div> <br> <div class="bar"> D- MAKE JSON RESPONSE HTML FILE </div> <br> <div style="border:1px solid white; width:610px; padding:10px;text-align:left"> DO NOT USE KODER EDITOR TO MAKE AND SAVE YT JSONS. <br><br> The containt of youtube jsons is very complicated and their size is large. They may make Koder editor crashed.<br><br> In the case, You should use the ios app "WebPlaygounds" to make html files and save the files inside "WebPlaygounds". Instead of "WebPlaygounds" you can use "EasyHTML". But "WebPlaygounds" is more powerful. <br><br> Part D is for viewing and coding from youtube jsons. If you need not of that then you can clear this D part and the reletive to D part js functions from html code. </div> <br> <span>First click this button</span> <button onclick="showJsons()">Show json responses</button> <br> <br> <div id="jsonDiv" style="border:1px solid white; width:630px"> <i>All responds will be shown here (inside textareas)</i> </div> <br> <span>Then click this</span> <button onclick="copy('totalArea')">Copy</button> <span style="color:#ff9999;font-weight:bold">to make html file (not js file!)</span> <br><br> <textarea id="totalArea" style="width:620px; height:300px"> </textarea> <br> <!-- Head string --> <textarea class="notMy" id="headSt" style="display:none; height:20px" readonly> <!DOCTYPE html> <html> <meta charset=utf-8> <head> <style> body{ margin:0px; padding:0px; background-color:#CCC; } body, input, textarea, button{ font-family:Arial; font-size:14pt; } </style> </head> <body> <div align="center"> </textarea> <!-- <br> Foot string --> <textarea id="footSt" class="notMy" style="display:none; height:20px" readonly> <br> </div> <script> function copy(elementId){ var input = document.getElementById(elementId); var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i); if (isiOSDevice) { var editable = input.contentEditable; var readOnly = input.readOnly; input.contentEditable = true; input.readOnly = false; var range = document.createRange(); range.selectNodeContents(input); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range) input.setSelectionRange(0, 999999); input.contentEditable = editable; input.readOnly = readOnly; } else { input.select(); } document.execCommand('copy'); alert('The content has been copied to the clipboard'); input.blur(); } </script> </textarea> <br> <div style="width:586px;border:1px solid white;padding:12px; text-align:left;line-hight:150%"><i> - Having click the above "Copy" button press the Home button<br> <br> <img src="https://searchvideos.000webhostapp.com/homeBut.JPG" style="width:320px"><br> <br> - Open WebPlaygrounds app<br> - Create an new html file (for example "json100-mauriat.html")<br> - Paste the contains from clipboard to this file<br> - To view this html in WebPlaygrounds click the button with image of black oval (at the right of edit button "pencil")<br> <span style="color:#ff9999;font-weight:bold">NOTE</span><br> If you want to make both video list javascript file and json response html file <span style="color:#ff9999;font-weight:bold">let make html in WebPlaygrounds first</span>. If you make js file first (in Koder), you need to click the button x to close currently running html file, so you lose all json data </i> </div> <br> <b>Example: file "json100-mauriat.html"</b> <br><br> <iframe src="https://searchvideos.000webhostapp.com/json100-mauriat.html" style="width:580px;height:455px;border:1px solid gray; padding:15px; background-color:#CCC;"> </iframe> <br><br> <div class="bar"> <i>E- HELP</i> </div> <br> <iframe id="help" src="https://searchvideos.000webhostapp.com/thehelp-3.html" style="width:580px;height:540px;background-color:#FFFFE0; color:#333;overflow:auto; text-align:left; border:1px solid gray; padding:15px;font-size:14pt"> </iframe> <br> <br> <div class="bar"> <i>F- SOURCE CODE OF THIS PAGE (ytsearch-play.html)</i> </div> <br> <iframe id="" src="https://searchvideos.000webhostapp.com/thesource-3.html" style="width:580px;height:380px; background-color:#DDD; color:#333;overflow:auto; text-align:left; border:1px solid gray; padding:15px;font-size:14pt"> </iframe> <br><br> <div class="bar" style="background-color:#006699; color:white;height:110px; text-align:left;font-family:Arial;font-size:14pt"> <i>For copying source code, open my blogger<br> http://phanhung20.blogspot.com/2022/05/ <br> Or<br> https://searchvideos.000webhostapp.com/thesource-3.html </i> </div> </div> <script> function screenFunc(){ scrollToElement('showState',50) } $(document).ready(function(){ // loadSource(); readJS(); interval = setInterval(myTime, gInterval); }); function loadSource(){ $.ajax({ url : "https://searchvideos.000webhostapp.com/thesource-3.txt", dataType: "text", success : function (data) { $("#codeArea").text(data); } }); } var vvsum = 0; function readJS(){ vvsum = 1; vst1 = vst.replace(/@$/,''); arr = vst1.split('@'); mmm = ''; sst3 = ''; for(i=0;i<arr.length;i++){ mmm = 'playVid(this)'; alen = arr[i].length vti = arr[i].substring(0,(alen - 11)) vide = arr[i].substring(alen - 11) sst1 = '<b>'+vvsum+ '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false">'+ vti + '</a>'; sst2 = '<span class="vidCL">'+ vide +'</span>'; sst3 += '<tr style="background-color:white">'+ '<td width="80"><img width="80" height="60" '+ 'src="http://img.youtube.com/vi/'+ vide +'/default.jpg"></td>'+ '<td>'+ sst1 + '<br>'+ sst2 + '</td><td style="width:25px">'+ '<button class="ruBut" onclick="removeUndo(this)" style="width:100%">'+ '1</button></td></tr>'; vvsum++; } document.getElementById('tbody2').innerHTML = sst3; } function loadJsFile(){ fName = $('#fName').val(); $.getScript(fName, function() { readJSload(); }); } sst3 = ''; sst4 = ''; function readJSload(){ vvsum = 1; vst1 = vst.replace(/@$/,''); arr = vst1.split('@'); $("#vidLoadS").html(arr.length); mmm = ''; sst3 = ''; sst4 = ''; for(i=0;i<arr.length;i++){ mmm = 'playVid(this)'; alen = arr[i].length vti = arr[i].substring(0,(alen - 11)) vide = arr[i].substring(alen - 11) sst1 = '<b>'+vvsum+ '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false">'+ vti + '</a>'; sst2 = '<span class="vidCL">'+ vide +'</span>'; sst3 += '<tr style="background-color:white">'+ '<td width="80"><img width="80" height="60" '+ 'src="http://img.youtube.com/vi/'+ vide +'/default.jpg"></td>'+ '<td>'+ sst1 + '<br>'+ sst2 + '</td><td style="width:25px">'+ '<button class="ruBut" onclick="removeUndo(this)" style="width:100%">'+ '1</button></td></tr>'; vvsum++; } document.getElementById('tbody2b').innerHTML = sst3; lst1 = lst.replace(/@$/,''); parr = lst1.split('@'); $("#plistLoadS").html(parr.length); for(i=0;i<parr.length;i++){ zz = parr[i].split('##'); sst4 += '<tr><td><a href="#" onclick= "loadPLId1(this);return false">' + zz[0] + '</a><br>' + '<span class="vidCL">' + zz[1] + '</span></td></tr>' } document.getElementById('tbody2c').innerHTML = sst4 } ///////////////////4A- PLAY VIDEOS ////////////////// normalW = '720'; normalH = Math.round(720*349/620).toString(); // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: normalH, width: normalW, videoId: 'hvEtErLxPm4', playerVars: { 'playsinline': 1, 'rel': 0 }, events: { 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerError(error){ if (error){ if(singleVideo){ nextVid(); }else{ player.nextVideo(); } return false; } } var playerState currDuration = ''; function onPlayerStateChange(event) { switch (event.data) { case YT.PlayerState.UNSTARTED: playerState = 'unstarted'; break; case YT.PlayerState.ENDED: playerState = 'ended'; if(singleVideo){ nextVid(); }else{ player.nextVideo(); } return false; break; case YT.PlayerState.PLAYING: playerState = 'playing'; document.getElementById( "vtitle" ).innerHTML = player.getVideoData().title; currDuration = sformat(player.getDuration()); 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(); } ////////// par = {}; currColor = "#FFE1B2" vidSt = ''; singleVideo = true; function playVid(obj){ singleVideo = true; document.getElementById( "vtitle" ).innerHTML = ''; par = obj.parentNode; $('.listTab').find('td').each(function(){ $(this).css("background-color", "white"); }); $(obj).closest('tr').find('td').each(function(){ $(this).css("background-color", currColor); }); ob = par.getElementsByClassName('vidCL'); vidSt = ob[0].innerHTML; var ss = vidSt.search('#'); if(ss == -1){ player.loadVideoById(vidSt, "large"); }else{ if(vidSt.search(':') != -1){ vidSt = formatConvert(vidSt); } var ar = vidSt.split('#'); var a1 = parseInt(ar[1].replace('s=','')); var a2 = parseInt(ar[2].replace('e=','')); seEnd = a2; document.getElementById('myState').innerHTML = sformat(seEnd); seMode = true; playVidStart(ar[0], a1, a2) } } function loadPLId1(thi) { videoSingle = false; par = thi.parentNode; $('.listTab').find('td').each(function(){ $(this).css("background-color", "white"); }); $(thi).closest('tr').find('td').each(function(){ $(this).css("background-color", currColor); }); ob = par.getElementsByClassName('vidCL'); pid = ob[0].innerHTML; // alert('pid = ' + pid) loadPLId(pid); } function loadPLId(pid) { singleVideo = false; player.loadPlaylist({ 'list': pid , 'listType': 'playlist', 'index': 0, 'startSeconds': 0, 'suggestedQuality': 'default' }); } currTr = document.getElementById("currTR"); function nextVid(){ var ob = par.parentNode.parentNode.getElementsByClassName('vidCL'); var max = ob.length; var nextIndex = par.parentNode.rowIndex + 1 if(nextIndex == max){nextIndex = 0} var id = ob[nextIndex].innerHTML; if(id.length == 11){ playVid(ob[nextIndex]) }else{ loadPLId1(ob[nextIndex]) } } ///////////// nameArr = []; function buildJS(vArr, tArr, ide){ alert('nameArr.length = ' + nameArr.length); ss = '' len = vArr.length; alert(len + '; ' + tArr.length); ele = document.getElementById(ide); for(i=0; i<len; i++){ tt = tArr[i]; tt = tt.replace(/\"/g, '\\\"'); ss += 'vst += ' + '"' + tt + '" +\n' + '"@' + vArr[i] + '@";\n\n'; ele.value = ss; } } ///////////// gInterval = 100; // (miliseconds) function myTime(){ curTime = player.getCurrentTime(); if(playerState == 'playing'){ $('#showState').html(sformat(curTime) + ' / ' + currDuration); } if(curTime >0){ $('#progress-bar').val( player.getCurrentTime()/player.getDuration()*gprogressWidth); } } gprogressWidth = 580; function updateProgressBar(){ $('#progress-bar').val( player.getCurrentTime()/player.getDuration()*100); } $('#progress-bar').on('click', function (e){ gxx = Math.floor(e.pageX); gdur = Math.floor(player.getDuration()); clickedValue = (gxx-this.offsetLeft)*player.getDuration()/this.offsetWidth; player.seekTo(clickedValue); document.getElementById('progress-bar').value = gxx-this.offsetLeft; }); function pSize(){ vt = document.getElementById('vtitle').style.width // alert('vt = ' + vt); if(vt == "720px"){ bigSmall(1024) }else{ bigSmall(720) } } function bigSmall(ww){ hh = Math.round(ww*516/812); player.setSize(ww,hh); var size = ww +'px'; document.getElementById('vtitle').style.width = size; document.getElementById('header1').style.width = size; document.getElementById('progressDiv').style.width = size; document.getElementById('progress-bar').style.width = parseInt(size) -24; document.getElementById('progress-bar').max = parseInt(size) - 24; // xmax gprogressWidth = parseInt(size) - 24; // minus 24 is used to make the lengths of our progress bar the one of YouToube equal } function scrollToElement(elem, add){ var top = $("#"+ elem).position().top; $(window).scrollTop( top - add); } function sformat( s ) { var fm = [ Math.floor(Math.floor(s/60)/60)%60, //HOURS Math.floor(s/60)%60, //MINUTES Math.floor(s%60) //SECONDS ]; var xx = $.map(fm,function(v,i){ return ( (v < 10) ? '0' : '' ) + v; }).join( ':' ); var yy = xx.replace(/^0:|^00:|^0/g,''); zz = yy.replace(/^0/g,''); return zz } function tTop(rr){ /*table Top (scroll to table's Top) */ var elem = $('#'+ rr + ' tr:first' ); container = elem.closest("div") container.scrollTop( elem.offset().top - container.offset().top + container.scrollTop() ); } function tCur(){ var elem = $(par.closest('tr')); container = elem.closest("div") container.scrollTop( elem.offset().top - container.offset().top + container.scrollTop() ); } function tBott(rr){ var elem = $('#' + rr + ' tr:last'); container = elem.closest("div") container.scrollTop( elem.offset().top - container.offset().top + container.scrollTop() ); } ////////////////// 1- SEARCH VIDEOS WITH API V.3 KEY ///////////////// function readyTerm(term){ $("#searchtext1").val(term); } function readyTerm2(term){ $("#fName").val(term); } var nextPageToken; portion = 50; var searchText = ""; var maxRes = portion; var want = 1000; sum = 0; sumN = 0; tit = []; vid = []; univid = []; unilistVid = []; stList = ''; jsonArr = []; tokenArr = []; useN = 0; searchN = 0 function newSearch(){ $("#wantSpan").html(''); $("#foundText").html(''); $("#itemsArea").val(''); var maxRes = 50; var want = 1000; sum = 0; sumN = 0; tit = []; vid = []; univid = []; unilistVid = []; stList = ''; jsonArr = []; tokenArr = []; useN = 0; searchN = 0 plNum = 1; listVid = []; listTit = []; gCount1 = 0; gNum = 1; gNum1 = 1; pvid = []; ptit = []; channelArray = []; uniqueArray = []; st22 = '' sum = 0; } function startIt(num, option){ newSearch(); vvsum = 1; want = num; useN = num/50; alert(useN) start(); if(option == 0){ searchVid() } if(option == 5){ searchVid("CPoBEAA") } if(option == 10){ searchVid("CPQDEAA") } } plNum = 1; listVid = []; listTit = []; gCount1 = 0; myKey = 'YOUR-API-KEY'; /* Replace YOUR-API-KEY 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: myKey}, myPlan ).fail(function() { alert('Failure! Quota exceeded.' + 'Wait until Midnight Pacific Standard Time'); // clearInterval(interval1); stopTimer(); }); } function myPlan(response){ var state = $('input[name="radioStop"]').filter(":checked"); if(searchN == useN){ stopTimer(); lastShow(); return } if(response.items.length == 0){ //stoptimer(); stopTimer(); lastShow(); return } nextPageToken=response.nextPageToken; prevPageToken = response.prevPageToken tokenArr.push(nextPageToken); titleVal = response.nextPageToken; var 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; ptitle = ptitle.replace(/\"/g, '\\\"'); response.items[i].snippet.title = ptitle; ss = '<tr><td><a href="#" onclick= "loadPLId1(this);return false">' + ptitle + '</a><br>' + '<span class="vidCL">' + xx + '</span></td></tr>' listVid.push(xx); listTit.push(ptitle); plNum++ document.getElementById('r2').innerHTML += ss } var videoID=response.items[i].id.videoId; if(typeof videoID != 'undefined'){ var titSt =response.items[i].snippet.title; titSt1 = titSt.replace(/\"/g, '\\\"'); // response.items[i].snippet.title = titSt vid.push(videoID); tit.push(titSt1); mmm = 'playVid(this)' sst1 = '<b>'+vvsum+ '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false">'+ titSt + '</a>'; sst2 = '<span class="vidCL">'+ videoID +'</span>'; sst3 = '<tr style="background-color:white">'+ '<td width="80"><img width="80" height="60" '+ 'src="http://img.youtube.com/vi/'+ videoID +'/default.jpg"></td>'+ '<td>'+ sst1 + '<br>'+ sst2 + '</td><td style="width:25px">'+ '<button class="ruBut" onclick="removeUndo(this)" style="width:100%">'+ '1</button></td></tr>'; document.getElementById('r1').innerHTML += sst3 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>'; stext = searchText.replace(/ +/g, '-'); jsfile = "plist-" + stext.toLowerCase() + '-'+ want +'.js'; $('#fileName').val(jsfile); sum = 0; len = vid.length; last = len - 1; return; } // if()sum == want) vvsum++; } // if(typeof videoID != 'undefined') } document.getElementById('r1').innerHTML += stList; document.getElementById('itemsArea').value += response.items.length + ', '; document.getElementById('itemsAreaC').value += vid.length+listVid.length +', '; gCount1++; if(typeof nextPageToken == 'undefined'){ stopTimer(); lastShow(); return } var str = JSON.stringify(response,'',2); jsonArr.push(str); searchN++ searchVid(nextPageToken); } function lastShow(){ univid = GetUnique(vid); unilistVid = GetUnique(listVid); document.getElementById('wantSpan').innerHTML = '<span style="color:#FF9900;background-color:black"> '+ univid.length + '+' + unilistVid.length + ' / ' +(vid.length+listVid.length)+' </span>'+ '<span style="color:#666; font-size:12pt"> ('+((vid.length+listVid.length)-(univid.length + unilistVid.length))+' duplicates)'; ; document.getElementById('foundText').innerHTML = '<span style="color:#CCFF33;background-color:black"><b> '+ (univid.length+unilistVid.length+channelArray.length)+' = '+ univid.length+'+'+unilistVid.length+'+'+ channelArray.length+' </b></span>'; var sec = document.getElementById('showState').innerHTML; // sec = sec.replace('(sec)',''); document.getElementById('showState').innerHTML = sec + ' <span style="color:#FF9900">DONE!</span>'; } gNum = 1; gNum1 = 1; 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; } /////// 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; } function showJsons(){ // from ytsearch-hgs5-max.html headSt = document.getElementById("headSt").value; footSt = document.getElementById("footSt").value; jsSt = 'nextPageToken = [' + tokenArr.join(', ') + ']<br>' for(i=0; i<jsonArr.length;i++){ jsSt += '<button onclick="copy(\'jsonA' + i + '\')">Copy</button>' + '<br>' jsSt +='<textarea id="jsonA'+ i + '" style="width:600px;height:150px">' + 'page' + i + ' = ' + jsonArr[i] + '</textarea><br><br>' } document.getElementById("jsonDiv").innerHTML = jsSt document.getElementById("totalArea").value = headSt + '\n' + jsSt + '\n' + footSt } 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; } var timerRunning = false var timerID = null var initial = new Date() function start() { initial = new Date() startTime = initial.getTime() stopTimer() showTimer() } function stop() { 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 > 3){ //if($("#itemsArea").val() == ''){ // alert('>3') $("#stopTimerBut").click(); //} } 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 không có cái nà y // by me added: document.getElementById('showState').innerHTML = result + ' (sec)'; // call function recursively immediately (must use setTimeout to avoid overflow) timerID = setTimeout("showTimer()", 0) // timer is currently running timerRunning = true } function hideNot(){ $("#divCenter").children() .not('#vidDiv, #player, #vidTest, #plTest, .notMy, #list1, #loadControl1') .toggle(); } //////// var copy = function(elementId) { var input = document.getElementById(elementId); var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i); if (isiOSDevice) { var editable = input.contentEditable; var readOnly = input.readOnly; input.contentEditable = true; input.readOnly = false; var range = document.createRange(); range.selectNodeContents(input); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); input.setSelectionRange(0, 999999); input.contentEditable = editable; input.readOnly = readOnly; } else { input.select(); } document.execCommand('copy'); alert('copied to the clipboard'); input.blur(); } //////// vst = ''; vst += "Quiereme mucho" + "hvEtErLxPm4@"; vst += "Cuando Calienta El Sol - Piano Romantico Vol 1 / Rolando Ortega | Música Instrumental" + "7LCga53A8g0@"; vst += "Che Sara Guitar Cover - Jimmy Fontana - Spanish Guitar Instrumental" + "48cIIAY2pfM@"; vst += "Уральская рябинушка ( Ural rowan tree ) группа \"Фабрика\"" + "_kaKhtcmoxE@"; vst += "MESTIZZO Te Quiero" + "v1F8UEyhu9g@"; vst += "Dusty Springfield - You don't have to say you love me" + "c8o8uRWYJgM@"; vst += "Helmut Lotti Maria Elena" + "RfLE4MxcbiE@"; vst += "La vie en Rose - French Latino (New Album)" + "HoMdQvN-g5A@"; vst += "Sin Ti, La Barca, Reloj - Guitarras Romanticas Internacionales" + "21mZjCjGGk8@"; vst += "Franck Pourcel-Sous Le Ciel De Paris" + "gkrybtaz_qg@"; vst += "Pardonne moi ce caprice d'enfant - Paul Mauriat" + "piE2EJxDblQ@"; vst += "The Best 🇮🇹 Italian Music & aerial Italian 4K scenics. The most beautiful & famous Italian songs 🇮🇹" + "NXfGa_qjnSQ@"; vst += "For you with love! This is an Insanely Beautiful Melody! Flowers bloom beautifully to the music..." + "V317ZYD7Uts@"; vst += "This is Mexico's Yucatan Peninsula - Episode 2 - Diving in Playa del Carmen - in 4K UHD" + "rYmnTnUeVFE@"; </script> </body> </html>
COPY SOURCE CODE (to clipboard):
Click the button "Copy code" (below) then open "Koder code editor" app on your Ipad
to create the file "ytsearch-play.html
TEST ytsearch-play.html
You don't need to drag the red arrow anywhere.
I use it to simulate mouse pointer because I don't have a mouse for ipad right now
