play search-videos-html

1

CREATING YOUTUBE PLAYLIST WITH JAVASCRIPT

You can try and download this web (54 KB) at address:

https://files.myopera.com/phanhung20/files/playSearchVideos.html

http://www.mediafire.com/download/icv9yy3w8w2pbbl/playSearchVideos.html

There are in the web “playSearchVideos.html” 171 existing embedded videos from "YouTube.com".

Using this web you can easily add more videos (250, 500, 750 or more) . And the time for this task is

only some minutes. This web helps us create more simple web for playing only videos continuously

,without search videos function.

Image 1 – Play a video clip in “Big Screen”, the button “1 h” was clicked

All existing and newly found videos can be played continuously one after another.

Some videos that are not allowed to watch as embedded are stored in "LIST OF NO PLAYABLE VIDEOS".

2

1- TO WATCH VIDEOS CONTINUOSLY

Click "to Play All" button

Or click "to Play All" then click a song in list to begin with (for example, click "GIOVANNI MARRADI

AMAPOLA").

Click "1 h" button if you want to use our web in one hour. To test this function you can click "5 m" (5

minutes) button.

Click "End" if you want stop video immediately.

Click "to Play One" if you want to watch the current video until its end.

Image 2 – Play a video clip in “Normal Screen”, none of the time button was clicked

There are 669 videos found after three times of searching

(“Francis Goya”, “Fausto Papetti”, “Elvis Presley”)

3

2- TO SEARCH NEW VIDEO

a- Type the name of conductor or the name of orchestra or singer then click S360 to search 360 videos.

b- Wait from 15 to 30 seconds until the percentage "(playable videos)/(all search) %" is shown

Repeat above the steps a, b three times, each time with another name of conductor, singer ...

The name can be absolutely exact. Because of it, I have created a list of "READY SEARCH TERMS". You

can click, for example "101 Strings Orchestra" then click the button "S240" or "S360" to search 240 or

360 videos about "101 Strings Orchestra".

Image 3 – To search video clips of “101 String Orchestra”:

Click “101 String Orchestra” in the list of “READY TERMS” then click “S360”.

Wait 15, 20 seconds until appearing of percentage (304/360 = 84%)

Sometimes (if total number of videos is little), percentage can’t be shown so you have to click the

button "Manually Add Links" to see links to found videos.

4

3- WATCHING AND SELECTING VIDEOS

Click the first video that you see in the "LIST OF PLAYABLE VIDEOS".

Listen the song one after another. If you love some video, click "Select This Videos" button.

The selection of videos is time consuming. Because of that you can delay this task on the next day.

4- MAKING HTML FILE FOR YOUR WEB

Image 4 – Click the button “Make Web” to see HTML and javascript code

To select all the text:

select the first word (<!DOCTYPE), scroll down to the end,

press and hold Shift key and mouse-click after the last word (</html>)

5

4- USING NOTEPAD

Click "Start", "All Programs", "Accessories", "Notepad" to open the program Notepad

In Notepad, click "Edit", "Paste" end you will see text of HTML.

If you do not understand HTML language, do not make any change in this text.

Image 4 – Open Notepad, Edit, Paste then File, Save as …

To save the text as HTML:

Click "File", "Save as" then select

"File name:" -> type the file name, for example, if you have searched "Paul Mauriat" then "Elvis Presley"

and "Franck Pourcel" you may type Mauriat-Elvis-Pourcel.html (REMEMBER: to have always .html after

the file name).

"Save as type:" -> always select "All files".

"Encoding:" -> always select "UTF-8".

Click "Save" button.

5- OPEN YOUR JUST CREATED HTML FILE TO CONTINUE SELECTING VIDEOS

6

THE ENTIRE SOUR CODE OF playSearchVideo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Continously Playing</title>

<head>

<style>

body{

margin:0px;

padding:0px;

background-color:#999;

font-family:Arial;

font-size:12px;

}

td{

font-size:12px;

}

a {

text-decoration:none;

color:blue;

}

a:hover {

text-decoration:underline;

color: #0099ff;

}

h3{

margin-top:5px;

font-size:14px;

margin-bottom:5px;

}

#list1a, #list1b, #xxDiv, #yyDiv, #jsDiv,#loadListCodeDiv, #myListDiv, #selectHTML, #allHTML, #helpDiv{

width:680px; height:120px;

border:1px gray solid;

overflow:auto;

7

line-height:100%;

background-color:#ddd;

text-align:left;

padding:5px; }

</style>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

var bigScreen = false;

var screenWidth = "835";

var screenHeight = "480";

var term = "Elvis Presley";

var page = 1;

maxResults = 30; // maxResult range from 1 to 50

global_xx = "";

global_yy = "";

global_js = "";

curCode = "";

imgSt = "";

function searchQ(page, lim){

limit = lim;

term = document.getElementById('searchTerm').value;

term= encodeURIComponent(term);

email = 'http://gdata.youtube.com/feeds/api/videos?' +

'max-results=' + maxResults +

'&format=5&start-index=' + (((page - 1) * maxResults) + 1) +

'&q=' + term + '&v=2&alt=jsonc&callback=myCallback';

var oldsearchS = document.getElementById('searchS');

if (oldsearchS) { // Page 2

oldsearchS.parentNode.removeChild(oldsearchS);

}

var s = document.createElement('script');

s.setAttribute('src', email );

s.setAttribute('id', 'searchS');

s.setAttribute('type', 'text/javascript');

document.getElementsByTagName('head')[0].appendChild(s);

}

8

function myCallback(info){

var totalitems = info.data.totalItems;

if(totalitems < limit){limt=totalitems}

xx = ""; yy= ""; js="";

for( var i=0; i < maxResults; i++){

id = info.data.items[i].id;

title = info.data.items[i].title;

duration = info.data.items[i].duration;

ancho = '<a href="#" onclick="playID(\''+ id+'\')">'+

title+'</a></li><br>';

// Revealing the existence of “restrictions” and “status” is a key solution

// to filter not playable videos

bool1 = typeof info.data.items[i].restrictions != 'undefined';

bool2 = typeof info.data.items[i].status !='undefined';

bool =((!bool1) && (!bool2));

if(bool){

t(title);

v(id);

d(duration);

xx = xx + '<li>' + ancho + '</li>';

title1 = title.replace(/\"/g,'\\"');

js = js + 't("'+ title1 + '");<br>'+

'v("' + id + '"); d(' + duration + ');<br><br>';

}

else

{

yy = yy + '<li>NO# '+ ancho + '</li>'}

}

global_xx = global_xx + xx;

objx = document.getElementById('xxDiv');

objx.innerHTML = '<ol>'+global_xx+'</ol>';

global_yy = global_yy + yy;

objy = document.getElementById('yyDiv');

objy.innerHTML = '<ol>'+global_yy+'</ol>';

global_js = global_js + js;

objjs = document.getElementById('jsDiv');

9

objjs.innerHTML = global_js ;

// now is the taking decision (continue searching or end the process)

foundVideo = page * maxResults;

if (foundVideo < limit){

page = page + 1; searchQ(page, limit)}

else {page = 1;

curLength = vid.length;

init();

obj = document.getElementById("newLen");

obj.value = '' + (curLength-oldLength);

obj = document.getElementById("curLen");

obj.value = '' + (curLength-1);

calcul();

}

}

function calcul(){

liX = []; liY = [];

obj = document.getElementById('xxDiv');

liX = obj.getElementsByTagName('li');

obj = document.getElementById('yyDiv');

liY = obj.getElementsByTagName('li');

XLen = liX.length;

YLen = liY.length;

XYLen = XLen + YLen

x = Math.round(XLen*100/(XLen + YLen));

pcent = XLen + '/' + XYLen + ' = ' + x + ' %';

document.getElementById("percent").value = pcent;

}

function addLinks(){

init();


obj = document.getElementById("newLen");

obj.value = '' + (curLength-oldLength);

obj = document.getElementById("curLen");

obj.value = '' + (curLength-1);

calcul();

}

function playID(vidID){

10

len = vid.length;

for(i=0; i<len; i++){

if(vidID == vid[i]){j=i; play(j)}

}

}

function clearAllNew(){

obj = document.getElementById("xxDiv");

obj.innerHTML = "";

obj = document.getElementById("yyDiv");

obj.innerHTML = "";

global_xx = "";

global_yy = "";

xx = "";

yy = "";

document.getElementById("percent").value = "";

}

function readyTerm(term){

$("#searchTerm").val(term);

}

function play(i){

$("#butSelectThis").removeAttr("disabled");

c = 0;

window.scrollTo(0,0);

imgSt = '<img src="http://img.youtube.com/vi/'+ vid[i] + '/default.jpg">';

obj = document.getElementById("imgTD");

obj.innerHTML = imgSt;

title1 = tit[i].replace(/\"/g,'\\"');

curCode = 't("'+ title1 + '");<br>'+

'v("' + vid[i] + '"); d(' + dur[i] + ');<br><br>';

obj = document.getElementById("curCodeTD");

obj.innerHTML = curCode;

obj = document.getElementById("vidTitle");

last = last = vid.length - 1;

obj.innerHTML = '['+ j + ' / total:'+ last +'] <b>'+tit[i]+

'</b>';

11

obj = document.getElementById("player1");

stID = "http://www.youtube.com/embed/" + vid[i] + "?autoplay=1";

obj.setAttribute("src",stID);

}

var c = 0; var j = 0;

function count(){

last = vid.length - 1;

c = c + 1;

obj = document.getElementById("showSeconds");

obj.value = c + " / dur:" + dur[j];

if(c>dur[j]){

if(j<=last){j=j+1; play(j)}

if (j>last){j=1;play(j)}

}

mytimer = setTimeout("count()",1000);

}

playAll = false;

function selectPlay(){

if (playAll == false){

playAll = true;

obj = document.getElementById("butPlay");

obj.setAttribute("value","to Play One");

count();

}

else{

clrTimer();

}

}

function clrTimer(){

if(playAll){

obj = document.getElementById("butPlay");

obj.setAttribute("value","to Play All");

clearTimeout(mytimer);

playAll = false;

}

}

12

function backVideo(){

len = vid.length -1;

if(j>=2){j=j-1;play(j);}

if (j==1){play(j);alert("Begin Of List");}

}

function nextVideo(){

last = vid.length -1;

if(j<=last){j=j+1;play(j);}

if (j>last){j=1;play(j);}

}

function endVid(){

clrTimer();

st = "http://www.youtube.com/embed/Szi1JzY4z8M?autoplay=0";

obj = document.getElementById("player1");

obj.setAttribute("src",st);

obj = document.getElementById("vidTitle");

obj.innerHTML = 'PLAY ONE';

c = 0; j = 0;

}

function sec(m,s){

return m*60 + s;

}

function t(ti){

tit.push(ti);

}

function v(vi){

vid.push(vi);

}

function d(du){

dur.push(du);

}

function quit(){

if(playAll){

clearTimeout(mytimer);

}

}

//Creating three arrays

tit = []; vid = []; dur = [];

13

k=0;

tit[k]="" ;

vid[k]="" ;dur[k]=0;

t("Tavaszi szellő - ( Giovanni Marradi Too Young )");

v("Szi1JzY4z8M"); d(169);

t("GIOVANNI MARRADI AMAPOLA");

v("M8x3jPGd3dI"); d(146);

t("Giovanni Marradi - Siempre em mi corazon,,,");

v("7xuBmx3F9kw"); d(167);

t("Green Sleeves By Billy Vaughn");

v("LGCTyl49qIw"); d(167);

t("ARRIVEDERCI ROMA-(-MAGICO PIANO G. MARRADI )");

v("NxvVKqIifW4"); d(234);

t("Love Is a Many Splendored Thing by Lawrence Welk, Billy Vaughn");

v("bsE0_as02Fc"); d(322);

t("arriverderci roma...instrumental-12-05-17-16_wmv.wmv");

v("4Tae8cnio-I"); d(203);

t("Maximo Spodek, cuando calienta el sol, instrumental");

v("SnUYmlia0B4"); d(128);

t("TRIO LOS PANCHOS, SIN TI, BOLERO, INSTRUMENTAL");

v("ro-gXCJWipE"); d(200);

t("ROMANTIC PIANO, CHIQUITITA , ABBA, RELAXING, INSTRUMENTAL, HD");

v("lHKVT696NGM"); d(247);

t("MAXIMO SPODEK / I JUST CALLED TO SAY I LOVE YOU / STEVIE WONDER / PIANO / INSTRUMENTAL");

v("0osmn_qb90Q"); d(256);

t("MAXIMO SPODEK, HISTORIA DE UN AMOR, BOLERO PIANO INSTRUMENTAL");

v("oUworiK6Buc"); d(252);

14

t("ABRAZAME, JULIO IGLESIAS, INSTRUMENTAL");

v("q9TfsxH0MGo"); d(205);

t("MANHA DE CARNAVAL - HELMUT ZACHARIAS");

v("dgNI9p5-mpk"); d(183);

// ADD MORE VIDEOS CLIPS HERE

t("Stars on 45 - The Abba medley with NEW intro and outro - and 425 HD pictures!");

v("pkVQZNBNXOo"); d(502);

oldLength = vid.length;

curLength = oldLength;

function init(){

ss = '';

len = vid.length;

lentit = tit.length;

lendur = dur.length;

if(len != lentit || len != lendur || lendur!=lentit){

alert('vid = '+ len + '\n'+

'tit = '+ lentit + '\n'+

'dur = '+ lendur );

}


if(curLength == oldLength){

for (i=1;i<oldLength;i++){

ima = '<img src="http://img.youtube.com/vi/'+ vid[i] + '/default.jpg">'

xx = '<li><a href="#" onclick="j =' + i +'; play('

+ i+');">'+ tit[i]+ '</a><br><br>';

ss = ss + ima+'<br>'+xx;

}

obj = document.getElementById("list1a");

obj.innerHTML = '<ol><br>' + ss + '</ol>';

}

if(curLength > oldLength){

for (i=oldLength;i<curLength;i++){

ima = '<img src="http://img.youtube.com/vi/'+ vid[i] + '/default.jpg">'

yy = '<li><a href="#" onclick="j =' + i +'; play('

15

+ i+');">'+ tit[i]+ '</a><br><br>';

ss = ss + ima+'<br>'+yy;

}

obj = document.getElementById("list1b");

obj.innerHTML = '<ol><br>' + ss + '</ol>';

}

}

function getWidth(){

xWidth = null;

if(window.screen != null)

xWidth = window.screen.availWidth;

if(window.innerWidth != null)

xWidth = window.innerWidth;

if(document.body != null)

xWidth = document.body.clientWidth;

return xWidth;

}

function getHeight() {

xHeight = null;

if(window.screen != null)

xHeight = window.screen.availHeight;

if(window.innerHeight != null)

xHeight = window.innerHeight;

if(document.body != null)

xHeight = document.body.clientHeight;

return xHeight;

}

function screenFull(){

if(bigScreen == true){

var wi = 835;

var hi = 480;

16

sreenWidth = "835";

screenHeight = "480"

$('#player1').attr('width','' + wi);

$('#player1').attr('height','' + hi);

$('#btnBigScreen').val("Big Screen");


bigScreen = false;

}

else{

wi = getWidth();

hi = getHeight();

screenWidth = "" + wi;

screenHeight = "" + hi;

$('#player1').attr('width', ''+wi);

$('#player1').attr('height',''+ hi);

$('#btnBigScreen').val("Normal Scr");


bigScreen = true;

}

}

function selectThis(){

xx = '<a href="#" onclick="playID(\''+ vid[j]+'\');">'+tit[j]+'</a><br><br>id = '+ vid[j];

obj = document.getElementById('selectDiv1');

obj.innerHTML = obj.innerHTML + '<span style="float:left;padding-right:10px;padding-

bottom:5px;">'+imgSt+'</span>' + xx + '<br style="clear:both">';

obj = document.getElementById('selectDiv2');

obj.innerHTML = obj.innerHTML + curCode ;

$("#butSelectThis").attr("disabled","disabled");

}

function makeWeb(){

st1 = document.getElementById("source1").innerHTML;

st2 = document.getElementById("jsDiv").innerHTML;

st3 = document.getElementById("selectDiv2").innerHTML;

allst = st1 + '<script><br>'+ st2 + '</script><br></div><br></body><br>><html>';

document.getElementById("allHTML").innerHTML = allst;

selectSt = st1+ '<script><br>'+ st3 +'</script><br></div><br></body><br><html>';

17

document.getElementById("selectHTML").innerHTML = selectSt;

}

function formatSeconds(seconds){

var date = new Date(1970,0,1);

date.setSeconds(seconds);

return date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");

}

function tim(){ // this means time function

var d1=new Date();

var n1=d1.toTimeString();

n1 = n1.substring(0,8)

document.getElementById('clock').innerHTML=n1;

sss = secSinceMidnight();

if(sss == sec3){endVid();

document.getElementById('clockEnd').innerHTML=' STOP ';

alert('Time is up!\n'+

'Click any song in the list to play this one\n'+

'To watch continously click "to Play All", then click a song in list to begin');

}

timer2 = setTimeout('tim()',1000);

}

function secSinceMidnight(){

var now1 = new Date();

var hours = now1.getHours()*(60*60);

var minutes = now1.getMinutes()*60;

var seconds = now1.getSeconds();

return hours+minutes+seconds;

}

sec3 = 0; //Local variable;

function test(min){

sec1 = secSinceMidnight();

sec2 = min*60;

sec3 = sec1 + sec2;

resul = formatSeconds(sec3);

obj = document.getElementById("clockEnd");

18

obj.innerHTML = resul;

}

function load1(){

init();

tim();

document.getElementById('oldLen').value = ''+ (oldLength-1);

document.getElementById('newLen').value = '0';

document.getElementById('curLen').value = ''+ (oldLength-1);

}

qHelp = 'QUICK HELP\n\n'+

'There are about 100 videos from "YouTube.com", embedded in this web\n\n'+

'Using this web you can easily add 250, 500, or 750 videos more. And the time for this task is only

some minutes\n\n'+

'Some videos that are not allowed to watch as embedded are recorded in "LIST OF NO PLAYABLE

VIDEOS"\n\n' +

'1- TO WATCH VIDEOS CONTINUOSLY\n\n'+

'Click "to Play All" button\n'+

'Or click "to Play All" then click a song in list to begin with (for example, click "GIOVANNI MARRADI

AMAPOLA")\n\n'+

'Click "1 h" button if you want to use our web in one hour. To test this function you can click "5 m"

(5 minutes) button\n\n'+

'Click "End" if you want stop video immediately\n\n'+

'Click "to Play One" if you want to watch the curent video until its end\n\n'+

'2- TO SEARCH NEW VIDEO\n\n'+

'a- Type the name of conductor or the name of orchestra or singer then click S360 to search 360

videos\n\n'+

'b- Wait from 15 to 30 seconds until the percentage'+

' "(playable videos)/(all search) %" is shown\n'+

'Repeat above the steps a, b three times, each time with another name of conductor, singer

...\n\n'+

'The name can be absolutely exact. Because of it, I have created a list of "READY SEARCH TERMS".

You can click, for example "101 Strings Orchestra" then click the button "S240" or "S360" to search 240

or 360 videos about "101 Strings Orchestra"\n\n' +

'If percentage is not shown, you have to click "Manually Add Links"\n\n'+

'3- WATCHING AND SELECTING VIDEOS\n\n'+

19

'Click the first video you see in the "LIST OF PLAYABLE VIDEOS"\n\n'+

'Listen the song one after another. If you love some video, click "Select This Videos" button\n\n' +

'The selecting videos process it time consuming. Because of that you can delay this task on the next

day\n\n'+

'4- MAKING HTML FILE FOR YOUR WEB\n\n'+

'Click "Make Web" button and you can see two HTML files\n\n'+

'The "Web with selected videos" and the "Web is all new videos"\n\n'+

'Using mouse-drag to select all html file (from "<!DOCTYPE ..." to </html>)\n'+

'Instead of "mouse drag" you can do like this: mouse-drag to select only the first word

"<!DOCTYPE", scroll down to the end of HTML file, press and hold the key button "Shift", mouse click

after ">" of the last word "<html>".\n\n'+

'4- USING NOTEPAD\n\n'+

'Click "Start", "All Programs", "Accessories", "Notepad" to open the program Notepad\nn'+

'In Notepad, click "Edit", "Paste" end you will see text of HTML\n\n'+

'If you do not understand HTML language, do not make any change in this text\n\n'+

'To save the text as HTML:\n\n'+

'Click "File", "Save as" then select:\n\n'+

'"File name:" -> type the file name, for example, if you have searched "Paul Mauriat" then "Elvis

Presley" and "Franck Pourcel" you may type Mauriat-Elvis-Pourcel.html (REMEMBER: to have always

.html after the file name)\n\n'+

'"Save as type:" -> always select "All files\n\n"'+

'"Encoding:" -> always select "UTF-8"\n\n'+

'Click "OK"\n\n'+

'5- OPEN YOUR JUST CREATED HTML FILE TO CONTINUE SELECTING VIDEOS\n\n'

function quickHelp(){

alert(qHelp);

}

function showHelp(){

qHelp1 = qHelp.replace(/\n/g,'<br>');

document.getElementById("helpDiv").innerHTML = qHelp1;

}

20

</script>

</head>

<body onload="load1();showHelp();quickHelp();" onload="quit();">

<div align="center">

<div id="player1Div">

<iframe id="player1" width="835" height="480"

src="http://www.youtube.com/embed/Szi1JzY4z8M?autoplay=0" frameborder="0" allowfullscreen >

</iframe>

</div>

<br>

<table border=1 style="width:835px;">

<tr>

<td align="center">

<input type="button" value="5 m" onclick="test(5);">

<input type="button" value="20m" onclick="test(20);">

<input type="button" value="45m" onclick="test(45);">

<input type="button" value="1 h" onclick="test(60);">

<input type="button" value="1h15" onclick="test(75);">


</td>

<td style="font-size:12px;" align="center">

From:

<b><span id="clock" style="color:white;background-color:#336600;font-

size:14px;padding:2px;border:2px solid white;"> CLOCK </span></b>

To:

<b><span id="clockEnd" style="color:white;background-color:#6633FF;font-

size:14px;padding:2px;border:2px solid white;"> STOP </span></b>

</td>

<td align="center">


21






</td>

</td>

</table>



<br>

<table border=1 cellspacing=0>

<tr>

<td id="imgTD" style="width:122px;height:92px;">

'<img src="http://img.youtube.com/vi/Szi1JzY4z8M/default.jpg">'

</td>

<td valign="top" style="width:270px;" align="center">

<input type="button" value="Quick Help" onclick="quickHelp()">

<input type="button" value="Big Screen" onclick="screenFull()"

id = "btnBigScreen">

<div id="curCodeTD" style="height:60px;border:1px #333

solid;margin:2px;padding:2px;overflow:auto;text-align:left;background-color:#ddd;"></div>

</td>

<td style="width:430px;" align="center">

Seconds:

<input type="text" id="showSeconds" value="0/dur" size=28 style="text-align:center">

<input type="button" id="butSelectThis" value="Select This Video" onclick="selectThis()">

<div id="vidTitle" style="padding-top:2px;margin-top:0px;height:39px;border:1px #333

solid;margin:2px;padding:2px;overflow:auto;text-align:left;background-color:#ddd;">

22

<span ></span>

</div>

<div>

<input type="button" id="butPlay" value="to Play All" onclick="selectPlay()">

<input type="button" value="End" onclick="endVid()">

<input type="button" value="Back" onclick = "backVideo();">

<input type="button" value="Next" onclick="nextVideo()">

</div>

</td>

</tr>

</table>

<br>

<b>Existing Videos</b>

<input type="text" id="oldLen" value="" size="6" style="text-align:center">

<b>New Videos</b>

<input type="text" id="newLen" value="" size="6" style="text-align:center">

<b>Total Videos</b>

<input type="text" id="curLen" value="" size="6" style="text-align:center">

<input type = "button" value="Manually Add Links" onclick="addLinks();">

<input type="text" id="percent" value="" size="16" style="text-align:center">

<input type = "button" value="playable/all" onclick="calcul();">

<br>

<br>

<table border=1 width=835>

<tr><td width=49% valign=top>

<div id="list1a" style="line-height:150%;height:270px;padding:0px;overflow:auto;width:416px"></div>

</td>

<td width=49% valign=top>

23

<div id="list1b" style="line-height:150%;height:270px;padding:0px;overflow:auto;width:416px"></div>

</td></tr>

<table>

<br>

<input type="button" value="Clear All New" onclick="clearAllNew()">

<input type="text" id="searchTerm" value="Franck Pourcel" size="65">

<input type="button" value="Search 120" onclick='clearAllNew();searchQ(1, 120)'>

<input type="button" value="S180" onclick='clearAllNew();searchQ(1, 180)'>





<br>

<br>

<b>LIST OF READY SEARCH TERMS (Click a name, then click the button "S360")</b>

<br>

<br>

<table id="readyTable" width=830 height=102 border=1 cellpadding=8 >

<tr>

<td valign="top" style="background-color:#ddd;">

<div style="height:100px;overflow:auto;width:410px;line-height:150%">

<a href="javascript:readyTerm('Franck Pourcel')">Franck Pourcel</a>

<br>

<a href="javascript:readyTerm('101 Strings Orchestra')">101 Strings Orchestra</a>

<br>

<a href="javascript:readyTerm('Billy Vaughn')">Billy Vaughn</a>

<br>

<a href="javascript:readyTerm('Caravelli')">Caravelli</a>

<br>

<a href="javascript:readyTerm('Helmut Zacharias')">Helmut Zacharias</a>

<br>

<a href="#" onclick="readyTerm('Maximo Spodek');return false">Maximo Spodek</a>

24

<br>

<a href="#" onclick="readyTerm('Giovanni Marradi');return false">Giovanni Marradi</a>

<br>

<a href="javascript:readyTerm('Manuel & The Music of the Mountains')">Manuel & The Music of the

Mountains</a>

<br>

<a href="javascript:readyTerm('Andre Kostelanetz')">Andre Kostelanetz</a>

<br>

<a href="javascript:readyTerm('Klaus Wunderlich')">Klaus Wunderlich</a>

<br>

<a href="javascript:readyTerm('Fausto Papetti')">Fausto Papetti</a>

<br>

<a href="javascript:readyTerm('Mantovani')">Mantovani</a>

<br>

<a href="javascript:readyTerm('James Last')">James Last</a>

<br>

<a href="javascript:readyTerm('Francis Goya')">Francis Goya</a>

<br>

<a href="javascript:readyTerm('Nicolas de Angelis')">Nicolas de Angelis</a>

<br>

<a href="javascript:readyTerm('Ricky King')">Ricky King</a>

<br>

<a href="javascript:readyTerm('Paul Mauriat')">Paul Mauriat</a>

<br>

<a href="javascript:readyTerm('Richard Cleyderman')">Richard Cleyderman</a>

<br>

<a href="javascript:readyTerm('Orchester Charles Monet')">Orchester Charles Monet</a>

<br>

<a href="javascript:readyTerm('ABBA')">ABBA</a>

<br>

<a href="javascript:readyTerm('Celine Dion')">Celine Dion</a>

<br>

<a href="javascript:readyTerm('Mireille Mathieu')">Mireille Mathieu</a>

<br>

<a href="javascript:readyTerm('Tom Jones')">Tom Jones</a>

<br>

<a href="javascript:readyTerm('Smokie')">Smokie</a>

<br>

<a href="javascript:readyTerm('Julio Iglesias')">Julio Iglesias</a>

<br>

<a href="javascript:readyTerm('Jason Donovan')">Jason Donovan</a>

25

<br>

<a href="javascript:readyTerm('Madonna')">Madonna</a>

<br>

<a href="javascript:readyTerm('Al Bano and Romina Power')">Al Bano and Romina Power</a>

<br>

<a href="javascript:readyTerm('Britney Spear')">Britney Spear</a>

<br>

</div>

</td>

<td valign="top" style="background-color:#ddd;">

<div style="height:100px;overflow:auto;width:410px;line-height:150%">

<a href="javascript:readyTerm('kotasierota');">kotasierota</a>

<br>

<a href="javascript:readyTerm('TBluedream');">TBluedream</a>

<br>

<a href="javascript:readyTerm('RickSteves');">RickSteves - tourism</a>

<br>

<a href="javascript:readyTerm('denniscallan');">denniscallan</a>

<br>

<a href="javascript:readyTerm('hoosiertim');">hoosiertim</a>

<br>

<a href="javascript:readyTerm('dudhande');">dudhande</a>

<br>

</div>

</td>

</tr>

</table>

<br>

<table border=1 width=835>

<tr><td width=49% valign=top>

<h3>LIST OF NOT PLAYABLE VIDEOS</h3>

<div id="yyDiv" style="line-height:100%;height:170px;padding:0px;overflow:auto;width:416px"></div>

</td>

<td width=49% valign=top>

<h3>LIST OF PLAYABLE VIDEOS</h3>

<div id="xxDiv" style="line-height:100%;height:170px;padding:0px;overflow:auto;width:416px"></div>

</td></tr>

<table>

26

<h3>SELECTED VIDEOS (JS CODE)</h3>

<table widh=680 height=240 border=1 cellspacing=0>

<tr><td width=419 valign=top style="background-color:#ddd;">

<div id='selectDiv1' style="padding:10px;height:240px;overflow:auto;">

</div>

</td>

<td width=419 valign=top style="background-color:#ddd;">

<div id='selectDiv2' style="padding:10px;height:240px;overflow:auto;">

</div>

</td</tr>

</table>

<br>

<h3>ALL NEW VIDEOS (JS CODE)</h3>

<div id='jsDiv'>

</div>

<br>

<input type = "button" value="Make Web" onclick="makeWeb();">

<h3>WEB WITH SELECTED VIDEOS</h3>

<div id='selectHTML' style="font-size:14px;height:360px;background-color:#eee;">

</div>

<h3>WEB WITH ALL NEW VIDEOS</h3>

<div id='allHTML' style="font-size:14px;height:360px;background-color:#eee;">

</div>



<div id="source1" style="display:none">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br>

<html><br>

<head><br>

<meta http-equiv="content-type" content="text/html; charset=utf-8"><br>

<title><br>Continously Playing</title><br>

<head><br>

<style><br>

body{<br>

margin:0px;<br>

padding:0px;<br>

27

background-color:#999;<br>

font-family:Arial;<br>

font-size:12px;<br>

}<br>

td{<br>

font-size:12px;<br>

}<br>

a {<br>

text-decoration:none;<br>

color:blue;<br>

}<br>

a:hover {<br>

text-decoration:underline;<br>

color: #0099ff;<br>

}<br>

<br>

h3{<br>

margin-top:5px;<br>

font-size:14px;<br>

margin-bottom:5px;<br>

}<br>

<br>

#list1, #xxDiv, #yyDiv, #jsDiv,#loadListCodeDiv, #myListDiv, #selectHTML, #allHTML, #helpDiv{<br>

width:680px; height:120px;<br>

border:1px gray solid;<br>

overflow:auto;<br>

line-height:100%;<br>

background-color:#ddd;<br>

text-align:left; <br>

padding:5px; } <br>

<br>

</style><br>

<script type="text/javascript" src="swfobjec.js"><br></script><br>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><br></script><br>

<script><br>

var bigScreen = false;<br>

var screenWidth = "835";<br>

var screenHeight = "480";<br>

<br>

function play(i){ <br>

28

$("#butSelectThis").removeAttr("disabled");<br>

c = 0;<br>

window.scrollTo(0,0);<br>

imgSt = '<img src="http://img.youtube.com/vi/'+ vid[i] + '/default.jpg">';<br>

obj = document.getElementById("imgTD");

obj.innerHTML = imgSt;<br>

title1 = tit[i].replace(/\"/g,'\\"');<br>

curCode = 't("'+ title1 + '");<br>'+ <br>

'v("' + vid[i] + '"); d(' + dur[i] + ');<br><br>'; <br>

obj = document.getElementById("curCodeTD");<br>

obj.innerHTML = curCode;<br>

obj = document.getElementById("vidTitle");<br>

last = vid.length - 1;<br>

obj.innerHTML = '['+ j + ' / total:'+ last +'] <b>'+tit[i]+'</b>';<br>

obj = document.getElementById("player1");<br>

stID = "http://www.youtube.com/embed/" + vid[i] + "?autoplay=1";<br>

obj.setAttribute("src",stID);<br>

}<br>

var c = 0; var j = 0;<br>

<br>

function count(){<br>

last = vid.length - 1;<br>

c = c + 1;<br>

obj = document.getElementById("showSeconds");<br>

obj.value = c + " / dur:" + dur[j];<br>

if(c>dur[j]){<br>

if(j<=last){j=j+1; play(j)}<br>

if (j>last){j=1;play(j)}<br>

}<br>

mytimer = setTimeout("count()",1000);<br>

}<br>

playAll = false;<br>

function selectPlay(){<br>

if (playAll == false){<br>

playAll = true;<br>

obj = document.getElementById("butPlay");<br>

obj.setAttribute("value","Play One");<br>

count(); <br>

} <br>

else{<br>

29

clrTimer();<br>

}<br>

}<br>

<br>

function clrTimer(){<br>

playAll = false;<br>

obj = document.getElementById("butPlay");<br>

obj.setAttribute("value","Play All");<br>

clearTimeout(mytimer);<br>

obj = document.getElementById("showSeconds");<br>

obj.value = "PLAY ONE / dur:" + dur[j];<br>

}<br>

<br>

function backVideo(){<br>

len = vid.length -1;<br>

if(j>=2){j=j-1;play(j);}<br>

if (j==1){play(j);alert("Begin Of List");}<br>

}<br>

function nextVideo(){<br>

last = vid.length -1;<br>

if(j<=last){j=j+1;play(j);}<br>

if (j><br>last){j=1;play(j);} <br>

} <br>

function endVid(){<br>

clrTimer();<br>

st = "http://www.youtube.com/embed/eymxeenrI90?autoplay=0";<br>

obj = document.getElementById("player1");<br>

obj.setAttribute("src",st);<br>

obj = document.getElementById("vidTitle");<br>

obj.innerHTML = '';<br>

c = 0; j = 0;<br>

}<br>

<br>

function sec(m,s){<br>

return m*60 + s;<br>

}<br>

function t(ti){<br>

tit.push(ti);<br>

}<br>

function v(vi){<br>

vid.push(vi); <br>

30

} <br>

function d(du){<br>

dur.push(du);<br>

}<br>

function quit(){<br>

if(mytimer){<br>

clearTimeout(mytimer);<br>

}<br>

}<br>

<br>

//Creating three arrays <br>

tit = []; vid = []; dur = [];<br>

<br>

k=0; <br>

tit[k]="" ; <br>

vid[k]="" ;dur[k]=0; <br>

<br>

oldLength = vid.length;<br>

curLength = oldLength;<br>

<br>

function init(){<br>

ss = '';<br>

len = vid.length;<br>

lentit = tit.length;<br>

lendur = dur.length;<br>

if(len != lentit || len != lendur || lendur!=lentit){<br>

alert('vid = '+ len + '\n'+ <br>

'tit = '+ lentit + '\n'+ <br>

'dur = '+ lendur );<br>

}<br>

<br>

for (i=1;i<len;i++){<br>

ima = '<img src="http://img.youtube.com/vi/'+ vid[i] + '/default.jpg">';<br>

xx = '<li><a href="#" onclick="j =' + i +'; play(' <br>

+ i+');">'+ tit[i]+ '</a><br><br>'; <br>

ss = ss + ima+'<br>'+xx; <br>

} <br>

obj = document.getElementById('list1'); <br>

obj.innerHTML = '<ol><br>' + ss + '</ol>'; <br>

} <br>

<br>

31

function getWidth(){<br>

xWidth = null; <br>

if(window.screen != null)<br>

xWidth = window.screen.availWidth; <br>

<br>

if(window.innerWidth != null)<br>

xWidth = window.innerWidth; <br>

<br>

if(document.body != null) <br>

xWidth = document.body.clientWidth; <br>

<br>

return xWidth;<br>

} <br>

function getHeight() {<br>

xHeight = null; <br>

if(window.screen != null) <br>

xHeight = window.screen.availHeight;<br>

<br>

if(window.innerHeight != null)<br>

xHeight = window.innerHeight;<br>

<br>

if(document.body != null) <br>

xHeight = document.body.clientHeight;<br>

<br>

return xHeight; <br>

} <br>

<br>

function screenFull(){ <br>

<br>

if(bigScreen == true){ <br>

var wi = 835; <br>

var hi = 480; <br>

sreenWidth = "835"; <br>

screenHeight = "480" <br>

$('#player1').attr('width','' + wi); <br>

$('#player1').attr('height','' + hi); <br>

$('#btnBigScreen').val("Big Screen"); <br>

window.scrollTo(0,0); <br>

bigScreen = false; <br>

}<br>

else{<br>

32

wi = getWidth();<br>

hi = getHeight();<br>

screenWidth = "" + wi;<br>

screenHeight = "" + hi;<br>

$('#player1').attr('width', ''+wi); <br>

$('#player1').attr('height',''+ hi);<br>

$('#btnBigScreen').val("Normal Scr"); <br>

window.scrollTo(0,0); <br>

bigScreen = true; <br>

}<br>

}<br>

<br>

function playID(vidID){ <br>

len = vid.length; <br>

for(var i=0; i<len; i++){ <br>

if(vidID == vid[i]){j=i;play(j)}<br>

} <br>

} <br>

<br>

function selectThis(){<br>

xx = '<a href="#" onclick="playID(\''+ vid[j]+'\');">'+tit[j]+'</a><br><br>id = '+ vid[j]; <br>

obj = document.getElementById('selectDiv1');<br>

obj.innerHTML = obj.innerHTML + '<span style="float:left;padding-right:10px;padding-

bottom:5px;">'+ <br>

imgSt+'</span>' + xx + '<br style="clear:both">'; <br>

obj = document.getElementById('selectDiv2');<br>

obj.innerHTML = obj.innerHTML + curCode ; <br>

$("#butSelectThis").attr("disabled","disabled");<br>

}<br>

<br>

function formatSeconds(seconds){<br>

var date = new Date(1970,0,1);<br>

date.setSeconds(seconds);<br>

return date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");<br>

} <br>

<br>

function tim(){ // time <br>

<br>

var d1=new Date();<br>

33

var n1=d1.toTimeString();<br>

// alert(typeof n); <br>

n1 = n1.substring(0,8) <br>

document.getElementById('clock').innerHTML=n1;<br>

sss = secSinceMidnight(); <br>

if(sss == sec3){endVid(); <br>

document.getElementById('clockEnd').innerHTML=' STOP ';<br>

}<br>

timer2 = setTimeout('tim()',1000); <br>

} <br>

function secSinceMidnight(){ <br>

<br>

var now1 = new Date();<br>

var hours = now1.getHours()*(60*60);<br>

var minutes = now1.getMinutes()*60;<br>

var seconds = now1.getSeconds();<br>

return hours+minutes+seconds;<br>

}<br>

<br>

sec3 = 0; //Local variable;<br>

function test(min){<br>

sec1 = secSinceMidnight();<br>

sec2 = min*60;<br>

sec3 = sec1 + sec2;<br>

resul = formatSeconds(sec3); <br>

//alert('time + 30 minuts = '+ sec3 + ' = '+resul);<br>

obj = document.getElementById("clockEnd");<br>

obj.innerHTML = resul; <br>

}<br>

</script><br>

<body onload="init();tim()" onload="quit()"><br>

<div align="center"><br>

<div id="player1Div"><br>

<iframe id="player1" width="835" height="480" <br>

src="http://www.youtube.com/embed/eymxeenrI90?autoplay=0" frameborder="0"

allowfullscreen ><br>

</iframe><br>

</div><br>

34

<br><br>

<table border=1 style="width:835px;"><br>

<tr><br>

<td align="center"><br>

<input type="button" value="5 m" onclick="test(5);"><br>

<input type="button" value="20m" onclick="test(20);"><br>

<input type="button" value="45m" onclick="test(45);"><br>

<input type="button" value="1 h" onclick="test(60);"><br>

<input type="button" value="1h15" onclick="test(75);"><br>


</td><br>

<td style="font-size:12px;" align="center"><br>

From:

<b><br><span id="clock" style="color:white;background-color:#336600;font-

size:14px;padding:2px;border:2px solid white;"><br> CLOCK </span><br></b><br>

To:

<b><br><span id="clockEnd" style="color:white;background-color:#6633FF;font-

size:14px;padding:2px;border:2px solid

white;"><br> STOP </span><br></b><br>

</td><br>

<td align="center"><br>







35

</td><br>

</td><br>

</table><br>

<br>

<br><br>

<table border=1 cellspacing=0><br>

<tr><br>

<td id="imgTD" style="width:122px;height:92px;"><br>

'<img src="http://img.youtube.com/vi/eymxeenrI90/default.jpg"><br>'

</td><br>

<td valign="top" style="width:270px;" align="center"><br>

<input type="button" value="Big Screen" onclick="screenFull()"

id = "btnBigScreen"><br>

<div id="curCodeTD" style="height:60px;border:1px #333

solid;margin:2px;padding:2px;overflow:auto;text-align:left;background-color:#ddd;"><br></div><br>

</td><br>

<td style="width:430px;" align="center"><br>

Seconds:

<input type="text" id="showSeconds" value="0/dur" size=28 style="text-align:center"><br>

<input type="button" id="butSelectThis" value="Select This Video" onclick="selectThis()"><br>

<div id="vidTitle" style="padding-top:2px;margin-top:0px;height:39px;border:1px #333

solid;margin:2px;<br>

padding:2px;overflow:auto;text-align:left;background-color:#ddd;"><br>

<span ><br></span><br>

</div><br>

<div><br>

<input type="button" id="butPlay" value="Play All" onclick="selectPlay()"><br>

<input type="button" value="End" onclick="endVid()"><br>

<input type="button" value="Back" onclick = "backVideo();"><br>

<input type="button" value="Next" onclick="nextVideo()"><br>

</div><br>

36

</td><br>

</tr><br>

</table><br>

<br><br>

<div id="list1" style="height:370px;"><br> </div><br>

<br>

<h3><br>SELECTED VIDEOS (JS CODE)</h3><br>

<table widh=680 height=130 border=1 cellspacing=0><br>

<tr><br><td width=419 style="background-color:#ddd;"><br>

<div id='selectDiv1' style="padding:10px;height:240px;overflow:auto;"><br>

</div><br>

</td><br>

<td width=419 valign=top style="background-color:#ddd;"><br>

<div id='selectDiv2' style="padding:10px;height:240px;overflow:auto;"><br>

</div><br>

</td</tr><br>

</table><br>

<br><br>

</div> <br>

</div>



<h3>HELP</h3>

<div id="helpDiv" style="height:420px;padding:40px;overflow:auto;font-size:14px;font-

family:arial;line-height:130%;background-color:#fff;">

</div>

<br>

<div style="width:420px;background-color:#003300; color:white;border:2px solid white;font-

size:16px;font-weight:bold;padding:6px;margin-bottom:30px;">

<i>Thank you for attention * By pvhung20 * 08-2013</i>

</div>

</div>

</body>

</html>

Thank you foThank you foThank you foThank you for attention * By pvhung20 * 08r attention * By pvhung20 * 08r attention * By pvhung20 * 08r attention * By pvhung20 * 08----2013201320132013

play search-videos-html

Technology