Search videos with youtube api3

SEARCH YOUTUBE VIDEOS USING JAVASCRIPT AND API3
You can test this html file at the following address
http://phanhung20.blogspot.com/2015/09/javascript-for-searching-videos.html
This is the image of the web page
Don't forget to replace "AIz*********************************zm4"
with your Youtube API3 KEY
<!DOCTYPE>
<html>
<head>
file:///H:/xampp/htdocs/v3t/SUMARY-search-videos/s1-code-rutgon-simp...
1 of 8 12/5/2015 9:40 PM

<body onload="init()">
<div align="center">
<table id="header1" width="620px" height="42px" style="margin-bottom:-7px;">
<tr>
<td width="30%" style="color:white;font-family:'Time New Roman';font-size:14pt">
<b><i> SIMPLE SEARCH</i></b>
</td>
<td style="text-align:right;vertical-align:middle"> 
<span style="font-size:11pt;color:white"><i>Go to </i></span>
<input type="button" onclick="scrollToElement('searchtext1',40)" value="Search">
<input type="button" onclick="goto('bott')" value="Bott">
<input type="button" onclick="window.scrollTo(0,0)" value="Top">
</td>
<td width="40%" align="right">
<button type="button" onclick="stopYoutube();">Stop</button>
<button type="button" onclick="player.pauseVideo();">Pause</button>
<button type="button" onclick="player.playVideo();">Play</button>
<button type="button" onclick="nextVid();">Next</button>  
</td>
</tr>
</table>
<div style="width:100%;height:36px;"></div>
<div id='player'></div>
<div id="vtitle" style="text-align:center;width:812px;height:23px;color:white;background-color:#333333;padding-top:7px;">
</div>

<br>
<table id="searchTBL" width="620" style="background-color:#99CCFF">
<tr>
<td align="center" style="vertical-align:middle;font-size:12pt;font-weight:bold"> 
<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:12pt;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:12pt;font-style: italic">0</span>
</td><td align="right" style="border:none;vertical-align:middle">
<button type="button" onclick="start(40)">S40</button>
</tr></table>
</td>
</td>
</tr>
</table>
<br>
<div id="tip" style =
"width:580px;height:130px;overflow:auto;background-color:white;text-align:left;padding:20px;line-height:160%">
<b>ABSOLUTLY EXACT USER NAME:</b><br>
<a href="#" onclick="readyTerm('Andreea Petcu'); return false">Andreea Petcu</a>, 
<a href="#" onclick="readyTerm('Expoza travel'); return false">Expoza travel</a>, 
<br>
3 of 8 12/5/2015 9:40 PM

<b>FREE TEXT (ANYTHING):</b>
<br>
<a href="#" onclick="readyTerm('china travel'); return false">china travel</a>, 
<a href="#" onclick="readyTerm('india travel'); return false">india travel</a>, 
<br>
<a href="#" onclick="readyTerm('youtube data api version 3'); return false">
youtube data api version 3</a>,
<a href="#" onclick="readyTerm('youtube iframe player javascript'); return false">
youtube iframe player javascript</a>,
<br><br>
<a href="#" onclick="readyTerm('101 Strings'); return false">101 Strings</a>, 
<a href="#" onclick="readyTerm('Abba'); return false">Abba</a>, 
<a href="#" onclick="readyTerm('Bee Gees'); return false">Bee Gees</a>, 
<a href="#" onclick="readyTerm('Bert Kaempfert'); return false">Bert Kaempfert</a>, 
<a href="#" onclick="readyTerm('Billy Vaughn'); return false">Billy Vaughn</a>, 
<a href="#" onclick="readyTerm('Caravelli'); return false">Caravelli</a>, 
<a href="#" onclick="readyTerm('Carpenters'); return false">Carpenters</a>, 
<a href="#" onclick="readyTerm('Cecil Gonzalez instrumental'); return false">
Cecil Gonzalez instrumental</a>, 
<a href="#" onclick="readyTerm('Enrique Chia'); return false">Enrique Chia</a>, 
<a href="#" onclick="readyTerm('Francisco Garcia guitarist'); return false">
Francisco Garcia guitarist</a>, 
<a href="#" onclick="readyTerm('Franck Pourcel'); return false">Franck Pourcel</a>, 
<a href="#" onclick="readyTerm('Frank Chacksfield'); return false">Frank Chacksfield</a>, 
<a href="#" onclick="readyTerm('Guitar Mood'); return false">Guitar Mood</a>, 
<a href="#" onclick="readyTerm('Helmut Zacharias'); return false">Helmut Zacharias</a>, 
<a href="#" onclick="readyTerm('Hugo Montenegro'); return false">Hugo Montenegro</a>, 
<a href="#" onclick="readyTerm('Hugo Strasser'); return false">Hugo Strasser</a>, 
<a href="#" onclick="readyTerm('James Last'); return false">James Last</a>, 
<a href="#" onclick="readyTerm('Klaus Wunderlich'); return false">Klaus Wunderlich</a>, 
<a href="#" onclick="readyTerm('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>, 
<br></div>
<br>
<b><i>Search Text may be anything:</i></b> Elvis Presley, Teresa Teng, china travel, ...
<br>
<b><i>Or the exact youtube username:</i></b> 
Andreea Petcu, Expoza travel, pvhung20 ...
<br>
<br>
4 of 8 12/5/2015 9:40 PM

<div class='bar'>
<b>SEARCH RESULTS</b>  
<button onclick="clearContent('r1')">Clear This Table</button>
</div><br>
<div id="list1"
style="width:620px;;height:300px;overflow:auto;background-color:white;text-align:left">
<table id="tableA" width="100%"><tbody id="r1">
</tbody></table>
</div>
<br>
<br>
<a name="bott"></a>
</div> 
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
///////////////////// SEARCH YOUTUBE VIDEOS WITH API V.3 //////////////////////
tit = []; vid = [];
var nextPageToken;
portion = 30; // portion to be <= 50
var searchText = "";
var maxRes = portion;
var want = 120;
sum = 0; sumN = 0;
function oldstart(num){
want = num;
gapi.client.load('youtube', 'v3', onApiLoad);
}
function start(num){
want = num;
searchVid()
}
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'},
/* REPLACE with your API KEY */
function myPlan(response){
nextPageToken=response.nextPageToken;
var resultCount = response.pageInfo.totalResults;
stList = '';
if(want >= resultCount){ want = resultCount}
5 of 8 12/5/2015 9:40 PM

itemsLen = response.items.length;
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);
ss='<tr>'+
'<td style="width:80px;">'+
'<img width="80" height="60" src="http://img.youtube.com/vi/'+
videoID +'/default.jpg">'+
'</td><td valign="top"><b>'+ (sumN+1) +'</b> <a href="#" '+
'onclick="playVid('+sumN +', this); return false">'+
titSt +'</a><br>'+
videoID +'</td></tr>';
stList += ss;
document.getElementById('foundText').innerHTML =
'<span style="color:green"><b>'+sum+'</b></span>';
document.getElementById('wantSpan').innerHTML = '<b>'+ sumN + '</b> ';
sum++ ; sumN++ ;
if((sum == want)||(sum == resultCount)){
'<span style="color:red"><b>'+sum+'</b></span>';
document.getElementById('wantSpan').innerHTML =
'<span style="color:#6600FF"><b>'+ sumN + '</b></span>';
document.getElementById('r1').innerHTML += stList;
sum = 0;
want = 120;
len = vid.length;
last = len - 1;
return;
}
} // End - if(typeof ...
} // End - for ...
document.getElementById('r1').innerHTML += stList;
x = want - sum;
if(x >= portion){
maxRes = portion;
}else{
maxRes = x;
}
searchVid(nextPageToken);
}); // End - $.get
} // End - searchVid(
////////////////////////// PLAY VIDEOS CONTINUOUSLY //////////////////////////
normalW = '812';
normalH = '516'
var player;
startvid = 'oY_eepAxzAM';
var jj = 0;
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
6 of 8 12/5/2015 9:40 PM

player.stopVideo();
}
function showTit(k){
document.getElementById("vtitle").innerHTML = (k+1) +
'/'+ vid.length + ' : ' + tit[k];
}
////////////////// COMMON FUNCTIONS //////////////////
function init(){
leftNum = $('#player').position().left;
document.getElementById('header1').style.left = leftNum;
document.getElementById("vtitle").innerHTML = 'Clip A mave mai de Rataro Ohotoua.mov';
//document.getElementById(ele).innerHTML = '';
}
function clearContent(ele){
res = confirm('Are You sure? All newly found will be cleared');
if(res == false){
return
}else{
document.getElementById(ele).innerHTML = '';
sumN = 0;
vid = [];
tit = [];
'<span style="color:green"><b>'+'0'+'</b></span>';
document.getElementById('wantSpan').innerHTML = '<b>0</b>';
}
}
function readyTerm(term){
$("#searchtext1").val(term);
}
function goto(nam) {
window.location.hash= nam;
}
function scrollToElement(elem, add){
var top = $("#"+ elem).position().top;
$(window).scrollTop(top - add);
}
function makeLink1(file, thi, text2save){
thi.download = document.getElementById(file).value;
thi.href = "data:html/text; charset=utf-8, " + encodeURIComponent(text2save);
}
</script></html> 
8 of 8 12/5/2015 9:40 PM

Search videos with youtube api3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Search videos with youtube api3

Similar to Search videos with youtube api3 (20)

More from phanhung20

More from phanhung20 (18)

Recently uploaded

Recently uploaded (20)

Search videos with youtube api3