JAVASCRIPT FOR SEARCHING VIDEOS
The files simple-search.html and search2.html:
They can find 500 clips by one click. All clips can be played continuously, one after an other.See: THE FULL SOURCE CODES of these files at the bottom of the web pages
The following is http://play-videos.bugs3.com/v3/simple-search.html
You can test the file search2.htmlat:
http://pvhung20.url.ph/v3/search2.html
To search more than 50 youtube video clips, you need:
(Note: No way to find more than 500 videos using Youtube data API)
- Obtain your own Google API v.3 key.
Here is the embeded video from YouTube (https://www.youtube.com/watch?v=-vH2eZAM30s)
- Open the file "http://pvhung20.url.ph/v3/search2.html", using FireFox browser.
- Click the button "Bott" (aka Bottom) to go to the bottom of the page, where is located "SOURCE CODE"
- Move the mouse pointer inside the code area (light yellow colored). Right click and choose "Select All".
- Move the mouse pointer inside the highlighted blue area. Right click and choose "Copy".
- Open a new file in your PC "Notepad". Paste the code here.
- Fix the line related to the API key.
- Save this file as html file. For example with the name "mySearch2.html". We need to select:
+ Save as type: All Files
+ Encoding: UTF-8
- After that you'll choose one of two ways to run this html file:
1- USE REMOTE PC (Advantages: Everyone on the internet can see your site and more videos can be watched)
Register to a hosting server that allows you to use javascript
For example: hostinger.in or hostinger.co.uk and upload the html file there
2- USE LOCAL PC: There are some videos we can't watch on PC.
SIMPLIFIED CODE: demo1-search.html
Try it: Enter "search term" then click "S300" or "S500" to get 300 or 500 youtube video clips.
Source code of "demo1-search.html"
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>demo search more than 50 clips</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; } </style> </head> <body> <div align="center" style="margin-left:0px"> <div id="menu" style="text-align:center;font-size:12pt;color:white;background-color:#333399;padding:4px;width:630px"> <b><i>Search text:</i></b> <input type="text" value="Folli Michelangelo" id="searchtext1" size="66" style="border-style:inset"> <table style="margin:auto;width:480px;margin-top:4px"> <tr><td width='60'> <button onclick='location.reload()'>Refresh</button> </td> <td width='195' style="color:white"> <b><i>All Found:</i> <span id="allSpan" style="font-size:12pt;font-style: italic;color:#FFCC00">0</span></b> </td><td style="text-align:right"> <button type="button" onclick="start(30)">S30</button> <button type="button" onclick="start(210)">S210</button> <button type="button" onclick="start(300)">S300</button> <button type="button" onclick="start(500)">S500</button> </td></tr></table> </div> <br> <b><i>Search Text may be:</i></b><br> Abba, Folli Michelangelo, Franck Pourcel, Paul Mauriat, Richard Clayderman, Romantic Guitar ... <br> <b><i>Or exact youtube usernames:</i></b> Tatiana Blue, Expoza travel,pvhung20 ... <br> <br> <div id="div1" style="background-color:white;width:610px; height:380px; padding:10px;overflow:auto;border:gray solid 1px;text-align:left"> </div> <br> <div style="margin:auto;width:600px;height:185px;text-align:left;padding:10px;line-height:150%;overflow:auto;background-color:white"> <b>NOTE:</b><br> 1- After searching videos you can click the button "Make List".<br> 2- Now you can click on any video title to watch videos continuously.<br> 3- Although rarely encountered, but also can occur the case when watching videos on PC (this html is saved to PC disk) all videos are skipped and this "jumping to next videos" process become endless. For example when you search "Expoza travel" and play these videos.<br> In this situation you need to click the button "Refresh".<br> 4- So if you want to watch "Expoza travel videos", you need upload this html online or run the FireFox browser under XAMPP environment (for local test server). </div> <br> <button id="makeButton" onclick="makeList()">Make List</button> <br><br> <div id="player"></div> <br> <br> <button onclick="nextVid()">Next Video</button> <br><br> <div id="videoList" style="width:600px;height:200px;overflow:auto;background-color:white;padding:10px;text-align:left"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> tit = []; vid = []; var nextPageToken; portion = 50; // portion to be <= 50 var searchText = ""; var maxRes = portion; var want = 210; sum = 0; sumN = 0; function start(num){ want = num; searchVid(); } function searchVid(PageToken){ var searchText = $('#searchtext1').val(); $.get( "https://www.googleapis.com/youtube/v3/search",{ part : 'snippet', q : searchText, maxResults : maxRes, pageToken : PageToken, key: 'AIz*********************************zm4'}, /* REPLACE with your API KEY */ function myPlan(response){ nextPageToken=response.nextPageToken; var resultCount = response.pageInfo.totalResults; 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'){ var titSt =response.items[i].snippet.title; vid.push(videoID); tit.push(titSt); document.getElementById('allSpan').innerHTML = sumN + ''; sum++ ; sumN++ ; if((sum == want)||(sum == resultCount)){ document.getElementById('allSpan').innerHTML = '<span style="color:#FF66FF">'+ sumN + '</span>'; len = vid.length; last = len - 1; st = '<b>Searching '+ searchText + ':</b> '; st += sum + ' videos found. The last is:<br>'+ 'ID: ' + vid[last] + '; '+ tit[last] + '<br><br>'+ '<img with="80" height="60" src = "http://img.youtube.com/vi/'+ vid[last]+'/default.jpg"><hr>'; document.getElementById('div1').innerHTML += st; sum = 0; return; } } } x = want - sum; if(x >= portion){ maxRes = portion; }else{ maxRes = x; } searchVid(nextPageToken); } ) } <!--////////// PLAY VIDEO /////////////--> function makeList(){ len = vid.length; st = ''; for(i=0; i<len; i++){ xx = '<b>'+(i+1)+'/'+ len + '</b> <a href="#" onclick="playVid('+ i +');return false">'+ tit[i]+'</a><br><br>'; st += xx; } $('#videoList').html(st); } 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]; player.loadVideoById(ide, "default"); } function nextVid(){ if(jj <= last){jj=jj+1}; if (jj > last){jj=0}; playVid(jj); } </script> <br><br> </div> <!-- center --> </body></html> <!-- 209 lines -->
