Your SlideShare is downloading. ×
  • Like
Play search-videos-html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Play search-videos-html

  • 90 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
90
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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. 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. 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. 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. 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. 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. 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. 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#&nbsp;'+ 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. 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(); curLength = vid.length; obj = document.getElementById("newLen"); obj.value = '' + (curLength-oldLength); obj = document.getElementById("curLen"); obj.value = '' + (curLength-1); calcul(); } function playID(vidID){
  • 10. 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 +']&nbsp;&nbsp;<b>'+tit[i]+ '</b>';
  • 11. 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. 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. 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. 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 ); } curLength = vid.length; 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. 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. 16 sreenWidth = "835"; screenHeight = "480" $('#player1').attr('width','' + wi); $('#player1').attr('height','' + hi); $('#btnBigScreen').val("Big Screen"); window.scrollTo(0,0); bigScreen = false; } else{ wi = getWidth(); hi = getHeight(); screenWidth = "" + wi; screenHeight = "" + hi; $('#player1').attr('width', ''+wi); $('#player1').attr('height',''+ hi); $('#btnBigScreen').val("Normal Scr"); window.scrollTo(0,0); 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 + '&lt;script><br>'+ st2 + '&lt;/script><br>&lt;/div><br>&lt;/body><br>>&lt;html>'; document.getElementById("allHTML").innerHTML = allst; selectSt = st1+ '&lt;script><br>'+ st3 +'&lt;/script><br>&lt;/div><br>&lt;/body><br>&lt;html>';
  • 17. 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='&nbsp;&nbsp;STOP&nbsp;&nbsp;'; alert('Time is up!n'+ 'Click any song in the list to play this onen'+ '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. 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 HELPnn'+ 'There are about 100 videos from "YouTube.com", embedded in this webnn'+ 'Using this web you can easily add 250, 500, or 750 videos more. And the time for this task is only some minutesnn'+ 'Some videos that are not allowed to watch as embedded are recorded in "LIST OF NO PLAYABLE VIDEOS"nn' + '1- TO WATCH VIDEOS CONTINUOSLYnn'+ 'Click "to Play All" buttonn'+ 'Or click "to Play All" then click a song in list to begin with (for example, click "GIOVANNI MARRADI AMAPOLA")nn'+ '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) buttonnn'+ 'Click "End" if you want stop video immediatelynn'+ 'Click "to Play One" if you want to watch the curent video until its endnn'+ '2- TO SEARCH NEW VIDEOnn'+ 'a- Type the name of conductor or the name of orchestra or singer then click S360 to search 360 videosnn'+ 'b- Wait from 15 to 30 seconds until the percentage'+ ' "(playable videos)/(all search) %" is shownn'+ 'Repeat above the steps a, b three times, each time with another name of conductor, singer ...nn'+ '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"nn' + 'If percentage is not shown, you have to click "Manually Add Links"nn'+ '3- WATCHING AND SELECTING VIDEOSnn'+
  • 19. 19 'Click the first video you see in the "LIST OF PLAYABLE VIDEOS"nn'+ 'Listen the song one after another. If you love some video, click "Select This Videos" buttonnn' + 'The selecting videos process it time consuming. Because of that you can delay this task on the next daynn'+ '4- MAKING HTML FILE FOR YOUR WEBnn'+ 'Click "Make Web" button and you can see two HTML filesnn'+ 'The "Web with selected videos" and the "Web is all new videos"nn'+ '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>".nn'+ '4- USING NOTEPADnn'+ 'Click "Start", "All Programs", "Accessories", "Notepad" to open the program Notepadnn'+ 'In Notepad, click "Edit", "Paste" end you will see text of HTMLnn'+ 'If you do not understand HTML language, do not make any change in this textnn'+ 'To save the text as HTML:nn'+ 'Click "File", "Save as" then select:nn'+ '"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)nn'+ '"Save as type:" -> always select "All filesnn"'+ '"Encoding:" -> always select "UTF-8"nn'+ 'Click "OK"nn'+ '5- OPEN YOUR JUST CREATED HTML FILE TO CONTINUE SELECTING VIDEOSnn' function quickHelp(){ alert(qHelp); } function showHelp(){ qHelp1 = qHelp.replace(/n/g,'<br>'); document.getElementById("helpDiv").innerHTML = qHelp1; }
  • 20. 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);"> <input type="button" value="1h30" onclick="test(90);"> </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;">&nbsp;CLOCK&nbsp;</span></b> To: <b><span id="clockEnd" style="color:white;background-color:#6633FF;font- size:14px;padding:2px;border:2px solid white;">&nbsp;&nbsp;STOP&nbsp;&nbsp;</span></b> </td> <td align="center"> <input type="button" value="2 h" onclick="test(120);">
  • 21. 21 <input type="button" value="2h30" onclick="test(150);"> <input type="button" value="3 h" onclick="test(180);"> <input type="button" value="3h30" onclick="test(210);"> <input type="button" value="4 h" onclick="test(240);"> <input type="button" value="4h30" onclick="test(270);"> </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()"> &nbsp; <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: &nbsp; <input type="text" id="showSeconds" value="0/dur" size=28 style="text-align:center"> &nbsp; <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. 22 <span ></span> </div> <div> <input type="button" id="butPlay" value="to Play All" onclick="selectPlay()">&nbsp; <input type="button" value="End" onclick="endVid()">&nbsp; &nbsp; <input type="button" value="Back" onclick = "backVideo();">&nbsp; <input type="button" value="Next" onclick="nextVideo()"> </div> </td> </tr> </table> <br> <b>Existing Videos</b>&nbsp; <input type="text" id="oldLen" value="" size="6" style="text-align:center"> &nbsp; <b>New Videos</b> &nbsp; <input type="text" id="newLen" value="" size="6" style="text-align:center"> &nbsp; <b>Total Videos</b> &nbsp; <input type="text" id="curLen" value="" size="6" style="text-align:center"> &nbsp; <input type = "button" value="Manually Add Links" onclick="addLinks();"> &nbsp; <input type="text" id="percent" value="" size="16" style="text-align:center"> &nbsp; <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. 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()"> &nbsp; <input type="text" id="searchTerm" value="Franck Pourcel" size="65"> &nbsp; <input type="button" value="Search 120" onclick='clearAllNew();searchQ(1, 120)'> &nbsp; <input type="button" value="S180" onclick='clearAllNew();searchQ(1, 180)'> &nbsp; <input type="button" value="S240" onclick='clearAllNew();searchQ(1, 240)'> &nbsp; <input type="button" value="S330" onclick='clearAllNew();searchQ(1, 330)'> &nbsp; <input type="button" value="S360" onclick='clearAllNew();searchQ(1, 360)'> &nbsp; <input type="button" value="S390" onclick='clearAllNew();searchQ(1, 390)'> <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. 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. 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. 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> <!------ THIS IS FOR CREATING TWO HTML FILES -----> <div id="source1" style="display:none"> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br> &lt;html><br> &lt;head><br> &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"><br> &lt;title><br>Continously Playing&lt;/title><br> &lt;head><br> &lt;style><br> body{<br> margin:0px;<br> padding:0px;<br>
  • 27. 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> &lt;/style><br> &lt;script type="text/javascript" src="swfobjec.js"><br>&lt;/script><br> &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><br>&lt;/script><br> &lt;script><br> var bigScreen = false;<br> var screenWidth = "835";<br> var screenHeight = "480";<br> <br> function play(i){ <br>
  • 28. 28 $("#butSelectThis").removeAttr("disabled");<br> c = 0;<br> window.scrollTo(0,0);<br> imgSt = '&lt;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 + '");&lt;br>'+ <br> 'v("' + vid[i] + '"); d(' + dur[i] + ');&lt;br>&lt;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 +']&nbsp;&nbsp;&lt;b>'+tit[i]+'&lt;/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&lt;=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. 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&lt;=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. 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&lt;len;i++){<br> ima = '&lt;img src="http://img.youtube.com/vi/'+ vid[i] + '/default.jpg">';<br> xx = '&lt;li>&lt;a href="#" onclick="j =' + i +'; play(' <br> + i+');">'+ tit[i]+ '&lt;/a>&lt;br>&lt;br>'; <br> ss = ss + ima+'&lt;br>'+xx; <br> } <br> obj = document.getElementById('list1'); <br> obj.innerHTML = '&lt;ol>&lt;br>' + ss + '&lt;/ol>'; <br> } <br> <br>
  • 31. 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. 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&lt;len; i++){ <br> if(vidID == vid[i]){j=i;play(j)}<br> } <br> } <br> <br> function selectThis(){<br> xx = '&lt;a href="#" onclick="playID(''+ vid[j]+'');">'+tit[j]+'&lt;/a>&lt;br>&lt;br>id = '+ vid[j]; <br> obj = document.getElementById('selectDiv1');<br> obj.innerHTML = obj.innerHTML + '&lt;span style="float:left;padding-right:10px;padding- bottom:5px;">'+ <br> imgSt+'&lt;/span>' + xx + '&lt;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. 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='&nbsp;&nbsp;STOP&nbsp;&nbsp;';<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> &lt;/script><br> &lt;body onload="init();tim()" onload="quit()"><br> &lt;div align="center"><br> &lt;div id="player1Div"><br> &lt;iframe id="player1" width="835" height="480" <br> src="http://www.youtube.com/embed/eymxeenrI90?autoplay=0" frameborder="0" allowfullscreen ><br> &lt;/iframe><br> &lt;/div><br>
  • 34. 34 &lt;br><br> &lt;table border=1 style="width:835px;"><br> &lt;tr><br> &lt;td align="center"><br> &lt;input type="button" value="5 m" onclick="test(5);"><br> &lt;input type="button" value="20m" onclick="test(20);"><br> &lt;input type="button" value="45m" onclick="test(45);"><br> &lt;input type="button" value="1 h" onclick="test(60);"><br> &lt;input type="button" value="1h15" onclick="test(75);"><br> &lt;input type="button" value="1h30" onclick="test(90);"><br> &lt;/td><br> &lt;td style="font-size:12px;" align="center"><br> From: &lt;b><br>&lt;span id="clock" style="color:white;background-color:#336600;font- size:14px;padding:2px;border:2px solid white;"><br>&nbsp;CLOCK&nbsp;&lt;/span><br>&lt;/b><br> To: &lt;b><br>&lt;span id="clockEnd" style="color:white;background-color:#6633FF;font- size:14px;padding:2px;border:2px solid white;"><br>&nbsp;&nbsp;STOP&nbsp;&nbsp;&lt;/span><br>&lt;/b><br> &lt;/td><br> &lt;td align="center"><br> &lt;input type="button" value="2 h" onclick="test(120);"><br> &lt;input type="button" value="2h30" onclick="test(150);"><br> &lt;input type="button" value="3 h" onclick="test(180);"><br> &lt;input type="button" value="3h30" onclick="test(210);"><br> &lt;input type="button" value="4 h" onclick="test(240);"><br> &lt;input type="button" value="4h30" onclick="test(270);"><br>
  • 35. 35 &lt;/td><br> &lt;/td><br> &lt;/table><br> &lt;!-------------><br> &lt;br><br> &lt;table border=1 cellspacing=0><br> &lt;tr><br> &lt;td id="imgTD" style="width:122px;height:92px;"><br> '&lt;img src="http://img.youtube.com/vi/eymxeenrI90/default.jpg"><br>' &lt;/td><br> &lt;td valign="top" style="width:270px;" align="center"><br> &lt;input type="button" value="Big Screen" onclick="screenFull()" id = "btnBigScreen"><br> &lt;div id="curCodeTD" style="height:60px;border:1px #333 solid;margin:2px;padding:2px;overflow:auto;text-align:left;background-color:#ddd;"><br>&lt;/div><br> &lt;/td><br> &lt;td style="width:430px;" align="center"><br> Seconds: &nbsp; &lt;input type="text" id="showSeconds" value="0/dur" size=28 style="text-align:center"><br> &nbsp; &lt;input type="button" id="butSelectThis" value="Select This Video" onclick="selectThis()"><br> &lt;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> &lt;span ><br>&lt;/span><br> &lt;/div><br> &lt;div><br> &lt;input type="button" id="butPlay" value="Play All" onclick="selectPlay()"><br>&nbsp; &lt;input type="button" value="End" onclick="endVid()"><br>&nbsp; &nbsp; &lt;input type="button" value="Back" onclick = "backVideo();"><br>&nbsp; &lt;input type="button" value="Next" onclick="nextVideo()"><br> &lt;/div><br>
  • 36. 36 &lt;/td><br> &lt;/tr><br> &lt;/table><br> &lt;br><br> &lt;div id="list1" style="height:370px;"><br> &lt;/div><br> &lt;!---------------------------------><br> &lt;h3><br>SELECTED VIDEOS (JS CODE)&lt;/h3><br> &lt;table widh=680 height=130 border=1 cellspacing=0><br> &lt;tr><br>&lt;td width=419 style="background-color:#ddd;"><br> &lt;div id='selectDiv1' style="padding:10px;height:240px;overflow:auto;"><br> &lt;/div><br> &lt;/td><br> &lt;td width=419 valign=top style="background-color:#ddd;"><br> &lt;div id='selectDiv2' style="padding:10px;height:240px;overflow:auto;"><br> &lt;/div><br> &lt;/td&lt;/tr><br> &lt;/table><br> &lt;br><br> &lt;/div> <br> </div> <!-------- End of THIS IS FOR CREATING … -------> <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