PLAY VIDEOS WITHOUT USING API FOR IFRAME
The best way to write a web page playing youtube videos is to use API for iframe embeds.
But here I try not to use api but work only with simple embed code and javascript.
Suppose we have used another website to find a string of our favorite video ids.
For example:
st1 = 'IlSbsmPfSQA, X1Bhgl3izdU, 7Wr8fl5Yu0c'
Then we use the following code to make a playlist
<iframe id = "ifr1" src = "http://www.youtube.com/embed/?playlist='+st1+
&autoplay=1&enablejsapi=1" frameborder = "0" allowfullscreen> </ iframe>
Web "non-api-playlist" works as follows:
1. After finding 250 videos (eg find "Ricky King"),
I have to split the given string into two strings of 125 videos. Because YouTube does not let us
use simple embed with more than 130 videos.
2. There are 2 buttons "playlist 1" and "playlist2"
We will click on those buttons to shuffle arrays st1 or st2
function playArr(str){// shuffle st1 or st2
strg = str.replace (/ \ s / g, '');
ar = strg.split (',');
ss10 = ar.shuffle ();
makeLinks (ss10);
var ar1 = ss10.join ();
x = '<iframe id = "ifr1" src = "http://www.youtube.com/embed/?playlist='+ar1+
'&autoplay=1&enablejsapi=1" frameborder = "0" allowfullscreen> </ iframe>' ;
document.getElementById ('div1'). innerHTML = x;
}
Array.prototype.shuffle = function () {
for (var j, x, i = This.length; i; j = parseInt (Math.random () * i),
x = this [- i], this [i] = this [j], this [j ] = x);
return this;
}
function makeLinks(vid){
ss = ''
len = vid.length;
for(i=0; i<len;i++){
ss +='<tr>'+
'<td style="width:80px;">'+
'<img width="80" height="60" src="http://img.youtube.com/vi/'+
vid[i] +'/default.jpg">'+
'</td><td><b>'+ i +'</b> <a href="#" '+
'onclick="playVid('+i+'); return false">'+
vid[i] +'</a></td></tr>';
}
document.getElementById('r1').innerHTML = ss;
}
3. To have ability "click on video id to start playing videos from that point on"
we must work harder to write code (while our web runs also slower), when compared
with using Web API.
This is the code of the function "Play Video":
s10 = st1.slice (); // s10 is global array, clone st1 to get s10
function playVid(num) {// num is the ordinal number of the id that we click on
//Cut array s10 into 2 parts. The position of cutting is the video that we click
aa = ss10.slice (0, num);
bb = ss10.slice (num, ss10.length-1);
// Make new array starting with the second cutted part
ss10 = bb.concat (aa);
ar1 = ss10.join ();
makeLinks (ss10);
x = '<iframe id = "ifr1" src = "http://www.youtube.com/embed/?playlist='+ar1+
'& Autoplay = 1 & enablejsapi = 1 "frameborder =" 0 "allowfullscreen> </ iframe>';
document.getElementById ('div1'). innerHTML = x;
}
NOTE:
Somewhere people said that in the embed code "autoplay = 1" is useless.
That may be true.
So by clicking on video id you only load the playlist with new order of videos.
In order to start playing playlist of videos you must click the button
"Play" (|> ),
white triangle on red background or white triangle on black that is located in center or at the
left-bottom corner of player screen.
The following is the file:http://pvhung20.url.ph/api3/non-api-playlists.html
SOURCE CODE OF non-api-playlists.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> body{ background-color:#999999; font-family:Arial;margin:0px;padding:0px;font-size:11pt } #ifr1{ width:610px; height:388px; } a{ color:blue;text-decoration:none; } a:hover { background-color: #CCFF99; } input[type="button"], button{ background-color:#DDDDDD;cursor:pointer;padding:0px; } #header{ background-color:#006699;color:white;font-family:'Time new roman'; font-size:16pt;font-style:italic;font-weight:bold;width:598px;padding:6px; } #r1 td{ border:1px solid gray;vertical-align:top; } </style> </head> <body onload="playArr(st1)"> <div align="center"> <div id="header"> SUFFLE THEN PLAY <button onclick="playArr(st1)">playlist 1</button> <button onclick="playArr(st2)">playlist 2</button> </div> <div id='div1'> </div> <br> <div id="list1" style="width:450px;;height:250px;overflow:auto;padding:0px;background-color:#EEEEEE;text-align:left"> <table id="tableA" width="100%"><tbody id="r1"> </tbody></table> </div> <br> <b>NOTE:</b> If the video is "restricted from playback on certain sites"<br> then move mouse ponter to the right-bottom corner of the screen and click the button >>| (Next) <br> <br> </div> <!--center--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> function makeLinks(vid){ ss = '' len = vid.length; for(i=0; i<len;i++){ ss +='<tr>'+ '<td style="width:80px;">'+ '<img width="80" height="60" src="http://img.youtube.com/vi/'+ vid[i] +'/default.jpg">'+ '</td><td><b>'+ i +'</b> <a href="#" '+ 'onclick="playVid('+i+'); return false">'+ vid[i] +'</a></td></tr>'; } document.getElementById('r1').innerHTML = ss; } ss10 = []; function playArr(str){ strg = str.replace(/\s/g, ''); ar = strg.split(','); ss10 = ar.shuffle(); makeLinks(ss10); var ar1 = ss10.join(); x = '<iframe id="ifr1" src="http://www.youtube.com/embed/?playlist='+ar1+'&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>'; document.getElementById('div1').innerHTML = x; } Array.prototype.shuffle = function() { for (var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x); return this; }; function playVid(num){ aa = ss10.slice(0,num); bb = ss10.slice(num,ss10.length-1); ss10 = bb.concat(aa); ar1 = ss10.join(); makeLinks(ss10); x = '<iframe id="ifr1" src="http://www.youtube.com/embed/?playlist='+ar1+ '&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>'; document.getElementById('div1').innerHTML = x; } st1 = 'IlSbsmPfSQA, X1Bhgl3izdU, 7Wr8fl5Yu0c, PFiGuZIs48E, cpJO9xfpI8Q,'+ 'wSdC7hsyX7M, 9mGSInLx3ew, P28nykh1mMw, VMojEmjV7HI, H3rd4COPSTM,'+ 'vy8YS54Hc2k, HzM0A5Brelo, eiMkozKrfVA, KdLJwTaOEsA, dCK6tBBR2-E,'+ 'pUHXNr9w4tU, juwhSW9g3QY, jPt9LiXp8hE, zE3Q_KZ9EWU, IPahvA3gAQI,'+ 'A_qWo-JYUNY, eytDOfDjKyw, lBBgiWPPgTY, C8c5mLW4gPs, ItNDk5qAsYY,'+ 'v9Lfiug-phw, u6HnfPHTaDc, x3xMhE0x6Q0, SP8-rJn9iso, c0b_PbG8tzA,'+ 'vT92jeAiaAw, S6PSmJ1CvgA, 7OzSpkXXefk, 4Ey5h67EHho, fyTsrClQKig,'+ 'Q2I-QNhnBTM, 3AbnpovNASk, wIAhd3RoSUk, 7LCJEVb0hL4, E8XXk_oYvNE,'+ 'E1MLT3QNhq0, J0WKl7NaiHg, 3z4DJUV7iTY, RgbbTXZRHD0, mND18bU9Bhw,'+ 'oiKzo0wQxiE, A92h94veKOg, 8RWEQ6MxtA8, 5JMTTaAbz2M, S5ca1emtask,'+ 'YSFO_hgHVJg, juvltQIxQAY, SQIVt2qf7H4, f-dkVU014Cg, Vk_sipE3MPk,'+ 'P-kwFA03vHw, mc8LXjqwESc, M8mzBAsEWYE, kJqJK2tPldY, iQsWb-1AJDo,'+ '-TOFvujXCU4, Tfys2brEZDA, mv6mt-yw7dg, YGvRKD8wiEA, N1hT7m_Fs-Y,'+ 'nCzA8Rxzm2g, k6ySVg1uVZc, 6GLhwfoDmLc, KNZ2_5g1NbI, 4acj__lAjBc,'+ 'qNDlcHG9hPE, XLiS81-Q_Bs, _eYfRJLfvkE, zq5j24Hgvvo, gr9tSGqidqo,'+ 'CHDg0wfJa2Y, QxfF61oQs-I, DFhv6NA4L0g, GvGsmzEAtRw, 8xfXd0ymvtg,'+ 'ZK2Lm8Hi6-s, AJGQWnzoV1I, FN-wybwAtAQ, hRJaQpZlJbY, qRjWmBv2zCo,'+ '6p15sTCVV9Q, 8kt0GzUGVxU, QTy6JiUuUR8, 5dB0e4vrZ7k, -8dLg29NUCg,'+ 'fTqnVe8sg54, LG8q3uXKIYA, npkyc-cHe5M, mrlW4k2TaPQ, Ur6Z6qdrNgc,'+ 'RlIghE1VOxQ, zRyLDSKYGCc, O8QuiFsx_D4, PSnvvxpfXZ8, qEhcP0rEhLg,'+ 'o-BSLnKjSZY, QXXI8iTFbD0, kf-MgUS9SV0, wDT6B1hnucI, bKpA6Q1_Mk0,'+ '5wP-ixPA-ww, 62tNQ-vzvEU, 5PsD0GUqpaY, 8VdMaTe3QZE, A7-x9FXmE6g,'+ '7DI9GqJ1sbw, UyQvPCBDMLE, _Y_OFNlPgmg, GrKvNLc4uQk, M2z3P18a8xc,'+ 'wURFaP392mM, 7KZs87udJ7Y, T4FdVjkuKqk, _B-j_riann0, tNY8AWpQFl0,'+ 'CfajH-uTYeI, 39Rvs_tjBig, zVkzGFV6DUg, yKTBZjZ2rUc, oUJ3g0Q1IkA'; st2 = '-GVkfpk74eE, ba0tck68sU0, FFnShvfQ2WI, tf4Kc2lCHhA, uvuc8XMwFF0,'+ '7dgNCrvVTTQ, YZ1jjgDpV-Q, ELPWYd6rXwI, xKDVfFwp5r8, rSjlrUqXJGQ,'+ 'uxwJxLGYKDI, -rZnr70ioAg, 19CqHw91Gt8, Fy-7kZOfgYQ, aS5eOH4V2is,'+ '_j9nTk9nb4U, Xypiy99jJLk, oyqLS_cqwk8, zOAj3OHztso, xlkGB8j5FkA,'+ 'n5SVkG7sCIc, KJtqNKCviro, qzrdK4lz2dU, X2FPvAYvPEc, YLveD8Z6hxU,'+ 'krsST4WDdJ0, qlKix2dZFAM, ymDYgK6ClPs, vCHIvAWVBDQ, -r3ripeFwIY,'+ 'p83dF89hEtc, VIT88kS1QSE, hNQySCctfRk, RP2CHlZG1d8, ghrHH5btg0g,'+ 'hqZixOuH_qo, bqLCvQiwC3Q, Hnhx2_MuEIM, zVt8tpNL33U, hJbjGNKPHAs,'+ 'l3SbnhMZCcE, wimHUWVGHuE, _7ZCd_UCfg0, 1ZBFg2VJiD8, S1v6WQ8XxPc,'+ 'Tgd5hBFBv4U, ADbO14oAd7s, fS1jwL-0p2g, BYyHlTxZzVM, CFcO3qnAIw4,'+ 'WKoIPlLVxGg, BJIZbKXVNEA, wHrEIyH66Ok, joaKlgd4cco, GFtxfeLKMec,'+ 'Qa0RAw2g8hE, SrMbOvQVAgI, JD5Z6eI4HhY, ImyEzSLWPns, WIByJdNyovE,'+ 'FSxoo4-D1tI, DTTOQEvhx7M, ZzN9ipyyKSY, MMnFDX8h4k4, hSpnZUX0zTQ,'+ 'U8IYQyH9CWI, OFwlJX2Xhd8, bwgkzfjSCGU, TJ9FvKgL50A, wFWUcYsB7jg,'+ '2aZ7tXFGoxA, vhH3bsgYYjU, _yHcvA2MF4c, bARWE5T6bm0, 5Ko9Hg1BGJs,'+ 'nrmNJrv5Nkc, rk8S60mK_LU, FozoWds85uw, 2CmjzCrdxq4, UipeYKEkV8c,'+ '9JwzlG_x8iY, knSqgkXMpoQ, jRqQ9st_4-g, FBcxS6CP2e4, UxDngw05MOc,'+ 'qTjw_6bmZuw, emi0WoYtoCs, sU_T8dMrPqg, ax8mQf0Ig6g, 6Apnw-r8ZN8,'+ 'xeLpkGMGkZQ, DL5AHBfGk40, w_ldZI2kPwQ, 5ICehPVw3jE, pp4o8cP8zNo,'+ 'TFf76GeT2DI, 7L4NPqVhNoI, toYKmgSmOLg, PkgcwB0_OZY, kiu_zM6z8qo,'+ 'FwmciYRRtqw, thaM4tDJn-E, 8bz-QhCp4QQ, 43JopULvBPc, JNif2hXcMA0,'+ '1YMM7HNeyTk, Fo0isgrTMPg, CO8lYZrXuQw, _fGdTksIjiA, yofE_nLzLhY,'+ 'vt1YGgN491o, wtLtXmsoGEo, aTjtIJH-lQs, XxIEUWzRSpI, D5zLtheh20c,'+ 'BktnSOi7tVw, fhhFXwPE5XU, zrbD7J9d3wQ, Ysw_3DTLcbo, GPsfxbbe2DE,'+ 'HtQ5lAghaiE, IfIsvdR5xQU, 9kz0fw2adOI, Pw5zdYDn4mU, ICucsAe2XF4'; </script> </body></html> <!--163 lines-->The following is the file:
http://pvhung20.url.ph/api3/create-nonjs-playlist.html
SOURCE CODE OF create-nonjs-playlist.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="author" content="pvhung20"> <title>playlist creating</title> <style> body{ background-color:#999999; margin:0px;padding:0px; font-family:Arial;font-size:10pt; } #header1{ color:white; font-weight:bold;width:620px;height:24px; background-color:#006699;padding:3px; position: fixed; left: 193px; 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:14pt;text-align:center;font-style:italic; } #wantSpan{ color:white; } #foundText{ color:white; } td{ font-size:10pt;vertical-align:top;border:1px gray solid; } #player{ background-color:#999999; } .bar{ width:608px;height:20px;background-color: #CCC999; color:black;font-weight:bold;padding:6px; } /* #menu{ font-weight:bold;font-style:italic } */ </style> </head> <body onload="init()"> <div align="center"> <table id="header1" width="620" style="background-color:#006699"> <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(300)">S300</button> </td> </tr> </table> </td> </tr> </table> <div style="width:100%;height:70px"></div> <span id="response1"></span> <b>-</b> <span id="count"></span> <br> <div id="tip" style = "margin-top:8px;width:590px;height:100px;overflow:auto;background-color:#EEEEEE;text-align:left;padding:15px;line-height:160%"> <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('Carpenters'); return false">Carpenters</a>, <a href="#" onclick="readyTerm('Enrique Chia'); return false">Enrique Chia</a>, <a href="#" onclick="readyTerm('Caravelli'); return false">Caravelli</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> <div class="bar"> <i>AREA A - For showing, typing text to save</i> </div> <br> <input type="text" id="fileName" value="nonapi-playlist.html" size="70"> <a id="anch" href='' onclick="makeLink(this, document.getElementById('areaRes').value);"> <b style="background-color:green;color:white;border:2px white solid">SAVE</b> </a> <br> <br> <textarea id='areaRes' style="width:610px;height:300px;padding:5px"></textarea> <br> <br> <div class="bar" style="height:54px;"> <i>LOAD PLAYLIST <button type="button" onclick="loadPlaylist_ids(0,124);">loadPlaylist (0-124)</button> <button type="button" onclick="loadPlaylist_ids(125,249);">loadPlaylist (125,249)</button> <button type="button" onclick="loadPlaylist_ids(250,299);">loadPlaylist (250,299)</button> AND PLAY IT </i> <div style="width:600px;height:5px;"></div> <div id="showState" style="margin-left:60px;margin-right:8px;float:left;width:100px;height:18px"> </div> <button type="button" onclick="previousYoutube();">Prev</button> <button type="button" onclick="stopYoutube();">Stop</button> <button type="button" onclick="playYoutube();">Play</button> <button type="button" onclick="pauseYoutube();">Pause</button> <button type="button" onclick="nextYoutube();">Next</button> </div> <div id="title" style="width:620px;height:30px;overflow:hidden;"> </div> <div id="player"></div> <br> <br> <!--##################### CODE ###########################--> <textarea id="code1" style="display:none"> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> body{ background-color:#999999; font-family:Arial;margin:0px;padding:0px;font-size:11pt } #ifr1{ width:610px; height:388px; } a{ color:blue;text-decoration:none; } a:hover { background-color: #CCFF99; } input[type="button"], button{ background-color:#DDDDDD;cursor:pointer;padding:0px; } #header{ background-color:#006699;color:white;font-family:'Time new roman'; font-size:16pt;font-style:italic;font-weight:bold;width:598px;padding:6px; } #r1 td{ border:1px solid gray;vertical-align:top; } </style> </head> <body onload="playArr(st1)"> <div align="center"> <div id="header"> SUFFLE THEN PLAY <button onclick="playArr(st1)">playlist 1</button> <button onclick="playArr(st2)">playlist 2</button> </div> <div id='div1'> </div> <br> <div id="list1" style="width:450px;;height:250px;overflow:auto;padding:0px;background-color:#EEEEEE;text-align:left"> <table id="tableA" width="100%"><tbody id="r1"> </tbody></table> </div> <br> <b>NOTE:</b> If the video is "restricted from playback on certain sites"<br> then move mouse ponter to the right-bottom corner of the screen and click the button >>| (Next) <br> <br> </div> <!--center--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> function makeLinks(vid){ ss = '' len = vid.length; for(i=0; i<len;i++){ ss +='<tr>'+ '<td style="width:80px;">'+ '<img width="80" height="60" src="http://img.youtube.com/vi/'+ vid[i] +'/default.jpg">'+ '</td><td><b>'+ (i+1) +'</b> <a href="#" '+ 'onclick="playVid('+i+'); return false">'+ vid[i] +'</a></td></tr>'; } document.getElementById('r1').innerHTML = ss; } ss10 = []; function playArr(str){ strg = str.replace(/\s/g, ''); ar = strg.split(','); ss10 = ar.shuffle(); makeLinks(ss10); var ar1 = ss10.join(); x = '<iframe id="ifr1" src="http://www.youtube.com/embed/?playlist='+ar1+'&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>'; document.getElementById('div1').innerHTML = x; } Array.prototype.shuffle = function() { for (var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x); return this; }; function playVid(num){ aa = ss10.slice(0,num); bb = ss10.slice(num,ss10.length-1); ss10 = bb.concat(aa); ar1 = ss10.join(); makeLinks(ss10); x = '<iframe id="ifr1" src="http://www.youtube.com/embed/?playlist='+ar1+ '&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>'; document.getElementById('div1').innerHTML = x; } </textarea> <!--##################### End Of CODE ###########################--> <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> 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 = []; ss = ''; 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, /* REPLACE YOUR API KEY */ 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; if(typeof videoID != 'undefined'){ sum++ ; sumN++ ; tit.push(title); vid.push(videoID); if((sum == want)||(sum == resultCount)){ document.getElementById('foundText').innerHTML = '<span style="color:#FF66FF"><b>'+sum+'</b></span>'; document.getElementById('wantSpan').innerHTML = '<span style="color:#FFFF33">'+ sumN + '</span>'; sum = 0; alert('OK'); makeWeb(); return; } } } x = want - sum; if(x >= portion){ maxRes = portion; }else{ maxRes = x; } searchVid(nextPageToken); }); } ////// 2- SAVE TO LOCAL PC HARD DISK (AS html, javascript, plain text) //////// function makeLink(thi, text2save){ thi.download = document.getElementById("fileName").value; thi.href = "data:text/html; charset=utf-8, " + encodeURIComponent(text2save); } /////////////////// 3- LOAD PLAY LIST ////////////////////// vid1 = []; number = 125; idSt = []; function makeArray(a,b){ vid1 = vid.slice(a, b); st20 = vid1.join(','); } function loadPlaylist_ids(p,q) { // loadPlaylist_array(p,q){ makeArray(p,q); player.loadPlaylist({ 'playlist': st20, 'listType': 'playlist', 'index': 0, 'startSeconds': 0, 'suggestedQuality': 'small' }); } ///////////////////4- 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: 'otPNwTrva0I', playerVars: { controls: '1', // or '2' 'loop': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerError(error){ if ( error ){ nextYoutube(); } } function onPlayerReady(event) { // ... } function onPlayerStateChange(event) { // ... } function previousYoutube() { player.previousVideo() } function playYoutube() { player.playVideo(); } function pauseYoutube() { player.pauseVideo(); } function stopYoutube() { player.seekTo(0, true); player.stopVideo(); } function nextYoutube() { player.nextVideo(); } ///////////////////// 5- GENERATE HTML FILE ////////////////////////////// function makeWeb(){ html = $('#code1').val(); st2 = ''; st2a = ''; if(vid.length >= 250){ maxlen = 250 }else { maxlen = vid.length } for(i=0;i<125;i++){ if((i+1)%5 == 0){ st2 += vid[i]+",'+\n'"; }else{ st2 += vid[i]+", "; } } if(maxlen >125){ start = 125; for(i=start;i<250;i++){ if((i+1)%5 == 0){ st2a += vid[i]+",'+\n'"; }else{ st2a += vid[i]+", "; } } } st2x = st2.substring(0,(st2.length-5)); st2x +="'"; st2ax = st2a.substring(0,(st2a.length-5)); st2ax +="'"; kk = html +'\n'+"st1 = '"+ st2x +';\n\n'+ "st2 = '"+ st2ax+';\n\n'+ '</scr'+'ipt>\n'+ '</body></html>' document.getElementById('areaRes').value = kk; } /////////////////// 6 COMMON FUNCTIONS ///////////////////// function init(){ leftNum = $('#player').position().left; leftN = Math.round(leftNum); document.getElementById('header1').style.left = leftN; document.getElementById('areaRes').value = ''; sum = 0; document.getElementById('foundText').innerHTML = '0'; } function readyTerm(term){ $("#searchtext1").val(term); } function goto(nam) { window.location.hash= nam; } </script> </html> <!-- 514 lines -->
The following is the file:
http://play-videos.url.ph/v3/create-nonapi-playlist.html
This web search 300 videos then uses 250 videos to create above web (non-api-playlists.html)
Here the the player works better because it is using "Youtube API for Iframe"
SOURCE CODE OF create-nonapi-playlist.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="author" content="pvhung20"> <title>playlist creating</title> <style> body{ background-color:#999999; margin:0px;padding:0px; font-family:Arial;font-size:10pt; } #header1{ color:white; font-weight:bold;width:620px;height:24px; background-color:#006699;padding:3px; position: fixed; left: 193px; 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:14pt;text-align:center;font-style:italic; } #wantSpan{ color:white; } #foundText{ color:white; } td{ font-size:10pt;vertical-align:top;border:1px gray solid; } #player{ background-color:#999999; } .bar{ width:608px;height:20px;background-color: #CCC999; color:black;font-weight:bold;padding:6px; } /* #menu{ font-weight:bold;font-style:italic } */ </style> </head> <body onload="init()"> <div align="center"> <table id="header1" width="620" style="background-color:#006699"> <tr> <td align="center" style="vertical-align:middle;font-size:12pt;font-weight:bold"> <b><i>Search:</i></b> <input type="text" value="101 Strings" 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(300)">S300</button> </td> </tr> </table> </td> </tr> </table> <div style="width:100%;height:70px"></div> <span id="response1"></span> <b>-</b> <span id="count"></span> <br> <div id="tip" style = "margin-top:8px;width:590px;height:100px;overflow:auto;background-color:#EEEEEE;text-align:left;padding:15px;line-height:160%"> <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('Carpenters'); return false">Carpenters</a>, <a href="#" onclick="readyTerm('Enrique Chia'); return false">Enrique Chia</a>, <a href="#" onclick="readyTerm('Caravelli'); return false">Caravelli</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> <div class="bar"> <i>AREA A - For showing, typing text to save</i> </div> <br> <input type="text" id="fileName" value="nonapi-playlist.html" size="70"> <a id="anch" href='' onclick="makeLink(this, document.getElementById('areaRes').value);"> <b style="background-color:green;color:white;border:2px white solid">SAVE</b> </a> <br> <br> <textarea id='areaRes' style="width:610px;height:300px;padding:5px"></textarea> <br> <br> <div class="bar" style="height:54px;"> <i>LOAD PLAYLIST <button type="button" onclick="loadPlaylist_ids(0,124);">loadPlaylist (0-124)</button> <button type="button" onclick="loadPlaylist_ids(125,249);">loadPlaylist (125,249)</button> <button type="button" onclick="loadPlaylist_ids(250,299);">loadPlaylist (250,299)</button> AND PLAY IT </i> <div style="width:600px;height:5px;"></div> <div id="showState" style="margin-left:60px;margin-right:8px;float:left;width:100px;height:18px"> </div> <button type="button" onclick="previousYoutube();">Prev</button> <button type="button" onclick="stopYoutube();">Stop</button> <button type="button" onclick="playYoutube();">Play</button> <button type="button" onclick="pauseYoutube();">Pause</button> <button type="button" onclick="nextYoutube();">Next</button> </div> <div id="title" style="width:620px;height:30px;overflow:hidden;"> </div> <div id="player"></div> <br> <br> <!--##################### CODE ###########################--> <textarea id="code1" style="display:none"> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> body{ background-color:#999999; font-family:Arial;margin:0px;padding:0px;font-size:11pt } #ifr1{ width:610px; height:388px; } a{ color:blue;text-decoration:none; } a:hover { background-color: #CCFF99; } input[type="button"], button{ background-color:#DDDDDD;cursor:pointer;padding:0px; } #header{ background-color:#006699;color:white;font-family:'Time new roman'; font-size:16pt;font-style:italic;font-weight:bold;width:598px;padding:6px; } #r1 td{ border:1px solid gray;vertical-align:top; } </style> </head> <body onload="playArr(st1)"> <div align="center"> <div id="header"> SUFFLE THEN PLAY <button onclick="playArr(st1)">playlist 1</button> <button onclick="playArr(st2)">playlist 2</button> </div> <div id='div1'> </div> <br> <div id="list1" style="width:450px;;height:250px;overflow:auto;padding:0px;background-color:#EEEEEE;text-align:left"> <table id="tableA" width="100%"><tbody id="r1"> </tbody></table> </div> <br> <b>NOTE:</b> If the video is "restricted from playback on certain sites"<br> then move mouse ponter to the right-bottom corner of the screen and click the button >>| (Next) <br> <br> </div> <!--center--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> function makeLinks(vid){ ss = '' len = vid.length; for(i=0; i<len;i++){ ss +='<tr>'+ '<td style="width:80px;">'+ '<img width="80" height="60" src="http://img.youtube.com/vi/'+ vid[i] +'/default.jpg">'+ '</td><td><b>'+ (i+1) +'</b> <a href="#" '+ 'onclick="playVid('+i+'); return false">'+ vid[i] +'</a></td></tr>'; } document.getElementById('r1').innerHTML = ss; } ss10 = []; function playArr(str){ strg = str.replace(/\s/g, ''); ar = strg.split(','); ss10 = ar.shuffle(); makeLinks(ss10); var ar1 = ss10.join(); x = '<iframe id="ifr1" src="http://www.youtube.com/embed/?playlist='+ar1+'&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>'; document.getElementById('div1').innerHTML = x; } Array.prototype.shuffle = function() { for (var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x); return this; }; function playVid(num){ aa = ss10.slice(0,num); bb = ss10.slice(num,ss10.length-1); ss10 = bb.concat(aa); ar1 = ss10.join(); makeLinks(ss10); x = '<iframe id="ifr1" src="http://www.youtube.com/embed/?playlist='+ar1+ '&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>'; document.getElementById('div1').innerHTML = x; } </textarea> <!--##################### End Of CODE ###########################--> <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> 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 = []; ss = ''; 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, /* REPLACE WITH YOUR API KEY */ 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; if(typeof videoID != 'undefined'){ sum++ ; sumN++ ; tit.push(title); vid.push(videoID); if((sum == want)||(sum == resultCount)){ document.getElementById('foundText').innerHTML = '<span style="color:#FF66FF"><b>'+sum+'</b></span>'; document.getElementById('wantSpan').innerHTML = '<span style="color:#FFFF33">'+ sumN + '</span>'; sum = 0; alert('OK'); makeWeb(); return; } } } x = want - sum; if(x >= portion){ maxRes = portion; }else{ maxRes = x; } searchVid(nextPageToken); }); } ////// 2- SAVE TO LOCAL PC HARD DISK (AS html, javascript, plain text) //////// function makeLink(thi, text2save){ thi.download = document.getElementById("fileName").value; thi.href = "data:text/html; charset=utf-8, " + encodeURIComponent(text2save); } /////////////////// 3- LOAD PLAY LIST ////////////////////// vid1 = []; number = 125; idSt = []; function makeArray(a,b){ vid1 = vid.slice(a, b); st20 = vid1.join(','); } function loadPlaylist_ids(p,q) { // loadPlaylist_array(p,q){ makeArray(p,q); player.loadPlaylist({ 'playlist': st20, 'listType': 'playlist', 'index': 0, 'startSeconds': 0, 'suggestedQuality': 'small' }); } ///////////////////4- 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: 'otPNwTrva0I', playerVars: { controls: '1', // or '2' 'loop': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerError(error){ if ( error ){ nextYoutube(); } } function onPlayerReady(event) { // ... } function onPlayerStateChange(event) { // ... } function previousYoutube() { player.previousVideo() } function playYoutube() { player.playVideo(); } function pauseYoutube() { player.pauseVideo(); } function stopYoutube() { player.seekTo(0, true); player.stopVideo(); } function nextYoutube() { player.nextVideo(); } ///////////////////// 5- GENERATE HTML FILE ////////////////////////////// function makeWeb(){ html = $('#code1').val(); st2 = ''; st2a = ''; if(vid.length >= 250){ maxlen = 250 }else { maxlen = vid.length } for(i=0;i<125;i++){ if((i+1)%5 == 0){ st2 += vid[i]+",'+\n'"; }else{ st2 += vid[i]+", "; } } if(maxlen >125){ start = 125; for(i=start;i<250;i++){ if((i+1)%5 == 0){ st2a += vid[i]+",'+\n'"; }else{ st2a += vid[i]+", "; } } } st2x = st2.substring(0,(st2.length-5)); st2x +="'"; st2ax = st2a.substring(0,(st2a.length-5)); st2ax +="'"; kk = html +'\n'+"st1 = '"+ st2x +';\n\n'+ "st2 = '"+ st2ax+';\n\n'+ '</scr'+'ipt>\n'+ '</body></html>' document.getElementById('areaRes').value = kk; } /////////////////// 6 COMMON FUNCTIONS ///////////////////// function init(){ leftNum = $('#player').position().left; leftN = Math.round(leftNum); document.getElementById('header1').style.left = leftN; document.getElementById('areaRes').value = ''; sum = 0; document.getElementById('foundText').innerHTML = '0'; } function readyTerm(term){ $("#searchtext1").val(term); } function goto(nam) { window.location.hash= nam; } </script> </html> <!-- 514 lines -->
