Find YouTube Videos Using API

HOW TO SEARCH YOUTUBE VIDEOS USING API 3
I would like to share with you my 2 web pages:
1- demo-search.html
With it you can find 210, 300 or 510 youtube video clips, by only one mouse click.
Because it is a demo (testing) web, the source code is strongly simplified.
In the result you can read only one clip from 300 or 510 that ware found and stored in PC
memory (as elements of two arrays).
Select all the content you see, copy it, open a new file in your program "Notepad", paste it
there and save it as js file (javascript file).
To play clips in this javascritpt file you can you my page:
http://play-videos.url.ph/v3/search2.html
Just click the button "browser" and choose this js file (from your PC).
2-simple-search.html
1

This web also can find 300 or 510 clips. But all found clips are shown as links (anchor tags).
If you click on any link, all clips will be played continuously, one after another.
In the following you wll see
The source code of "demo-search.html" and "simple-search.html
2

Page:1/2pdf-simplest-search.html
Last modification: 9/14/2015 5:08:34 PMH:xampphtdocshoc-book-Vikram-timv3aready-2-goog-slideshow
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>api3 search</title>
<style>
body{
font-family:Arial;
font-size:10pt;
}
</style>
</head>
<body>
<div align="center">
<br>
<div id="menu" style="background-color:#99CCFF;padding:4px;width:100%">
<b>All Found: <span id="allSpan"
style="font-size:12pt;font-style: italic">0</span></b>
 
<b><i>Search Text:</i></b> <input type="text"
value="Folli Michelangelo"
id="searchtext1" size="66" style="border-style:inset"> 
<button type="button" onclick="start(30)">S30</button>
</div>
<br>
<b><i>Search Text may be:</i></b> Abba, Folli Michelangelo, Franck Pourcel,
Paul Mauriat, Richard Clayderman, Romantic Guitar ...
<br>
<b><i>Or the exact youtube username:</i></b> 
Tatiana Blue, Expoza travel,pvhung20 ...
<br>
<br>
<div id="div1" style=
"width:75%;height:420px;text-align:left;padding:15px;overflow:auto;border:gray solid
1px;">
vst += "";<br><br>
</div>
<br>
<br>
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"
type="text/javascript">
</script>
<script>
tit = []; vid = [];
var nextPageToken;
portion = 30; // portion to be <= 50
var searchText = "";
var maxRes = portion;
var want = 210; sum = 0; sumN = 0;
function start(num){
PSPad editor 4.5.7 (2450) www.pspad.com 9/14/2015 5:11:22 PM Administrator

Page:2/2pdf-simplest-search.html
Last modification: 9/14/2015 5:08:34 PMH:xampphtdocshoc-book-Vikram-timv3aready-2-goog-slideshow
want = num;
gapi.client.load('youtube', 'v3', onApiLoad);
}
function onApiLoad(){
gapi.client.setApiKey('Abc*********************************123');
// Replace it with your API key and run this web with XAMPP (on PC)
// OR upload it to your hosting web then run it
searchVid();
}
function searchVid(PageToken){
searchText= $('#searchtext1').val();
var request = gapi.client.youtube.search.list({
part: 'snippet',
q:searchText,
maxResults:maxRes,
pageToken:PageToken
});
request.execute(myPlan);
}
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:red">'+ sumN + '</span>';
len = vid.length;
st = '// Searching '+ searchText + '<br>';
st += '// ' + sum + ' videos found. Among them:<br>'+
'vst += "' + tit[len-1] + '"+<br>"' + vid[len-1] + '@";<br><br>';
document.getElementById('div1').innerHTML += st;
sum = 0;
return;
}
}
}
x = want - sum;
if(x >= portion){
maxRes = portion;
}else{
maxRes = x;
}
searchVid(nextPageToken);
}
</script>
</body></html>
PSPad editor 4.5.7 (2450) www.pspad.com 9/14/2015 5:11:22 PM Administrator

Page:1/4pdf-simple-search.html
H:xampphtdocshoc-book-Vikram-timv3a Last modification: 9/14/2015 2:57:32 PM
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>api3 search</title>
<style>
body{
background-color:#CCCCCC;
margin:0px;
padding:0px;
font-family:Arial;
font-size:10pt;
}
#r1 td{
border:1px solid gray;
font-size:10pt;
}
a{
text-decoration:none;
}
a:hover{
color:green;
}
input[type="button"], button{
background-color:#DDDDDD;
cursor:pointer;
padding:0px;
}
#vtitle{
width:812px;height:25px;color:white;background-color:#1B1B1B;
margin-top:-2px;overflow:hidden;
padding-top:10px;
}
</style>
</head>
<body>
<div align="center">
<div id='player'></div>
<div id="vtitle"></div>
<br>
<div id="menu" style="background-color:#6699CC;padding:4px;width:100%">
<table ><tr style="font-size:10pt;">
<td style="background-color:#EEEEEE" style="border:1px gray solid">
<b>All: 
<span id="allSpan" style="font-size:12pt;font-style: italic">0</span></b>
 
<b><i>Found:</i> 
<span id="foundSpan" style="font-size:12pt;font-style: italic;color:green">0
</span> </td></b>
<td style="border:1px gray solid;vertical-align:middle"> 
<b><i>Search Text:</i></b> <input type="text"
value="Folli Michelangelo"
id="searchtext1" size="72" style="border-style:inset"> 
</td>
PSPad editor 4.5.7 (2450) www.pspad.com Administrator9/14/2015 2:59:10 PM

</tr></table>
</div>
<br>
<b><i>Search Text may be:</i></b> 
Abba, Folli Michelangelo, Paul Mauriat, Richard Clayderman, Romantic Guitar ...
<br><br>
<b>Search Results</b>  
<button onclick="clearContent('r1')">Clear This Table</button>
<br><br>
<div id="list1"
style="width:750px;;height:300px;overflow:auto;background-color:white;text-align:left">
<table id="tableA" width="100%"><tbody id="r1">
</tbody></table>
</div>
<br><br>
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"
type="text/javascript">
</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 = 210; sum = 0; sumN = 0;
function start(num){
want = num;
gapi.client.load('youtube', 'v3', onApiLoad);
}
function onApiLoad(){
gapi.client.setApiKey('Abc**********************************123');
// Replace it with your API key and run this web with XAMPP (on PC)
// OR upload it to your hosting web then run it
searchVid();
}
function searchVid(PageToken){
var searchText= $('#searchtext1').val();
var request = gapi.client.youtube.search.list({
part: 'snippet',
q:searchText,
maxResults:maxRes,
pageToken:PageToken
});
request.execute(myPlan);
}
function myPlan(response){
nextPageToken=response.nextPageToken;
var resultCount = response.pageInfo.totalResults;
stList = '';
if(want >= resultCount){ want = resultCount}
for (var i=0; i<response.items.length;i++){

'onError': onPlayerError
}
});
}
function onPlayerError(error){
if ( error ){
nextVid();
}
}
function onPlayerStateChange(event) {
if (event.data == 0) {
nextVid();
return false;
}
}
function playVid(num){
jj=num;
showTit(num);
ide = vid[num];
player.loadVideoById(ide, "large");
ob = document.getElementById('list1')
ar = ob.getElementsByTagName('tr');
for(i=0;i<ar.length;i++){
if(ar[i].style.backgroundColor != "#EEEEEE"){
ar[i].style.backgroundColor = "#EEEEEE"
}
}
ar[num].style.backgroundColor = '#CCFF99';
}
function nextVid(){
len = vid.length; last = len-1;
if(jj <= last){jj=jj+1};
if (jj > last){jj=0};
playVid(jj);
}
function showTit(k){
document.getElementById("vtitle").innerHTML = (k+1) +
'/'+ vid.length + ' : ' + tit[k];
}
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 = []; jj = 0;
'<span style="color:green"><b>'+'0'+'</b></span>';
document.getElementById('allSpan').innerHTML = '<b>0</b>';
}
}
</script>
</body></html>

Find YouTube Videos Using API

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Find YouTube Videos Using API

Similar to Find YouTube Videos Using API (20)

More from phanhung20

More from phanhung20 (19)

Recently uploaded

Recently uploaded (20)

Find YouTube Videos Using API