How to save the video list and where to store it
WATCH MY WEB:

http://pvhung20.url.ph/api-78-player-mini.html

Previously...
…
However sooner or later users will seek to put the files on the network to see a lot more videos. This
allows us to thin...
loadTxtFile('file2.txt','#inputArea2');
}
</script>

The following function is to convert text lines to javascript arrays:...
if(b22 == ""){b22 = "Video " + (i+1)}
tti.push(b22);
}
vvi[0] = 'vv'; tti[0]= 'tt';
vid.splice(0,1);
tit.splice(0,1);
vid ...
Move the mouse into the file name;
Right-click, Choose "Edit file":

To save all changed content to the file "file1.txt" j...
FULL SOURCE CODE OF "api-78-player-mini.html"
Together with "file1.txt" and "file2.txt", it was uploaded to "hostinger ser...
T2mwFCxYOj+TDARC5CT4Hb8AzgCEIopZ SSoyHfICJauq0ejQSnSsXukzYFAYWROZMEss72LCumG3w
nFetxV8L3p4AEJzAqEZmAQzAAAAJXRF WHRkYXRlOmN...
margin-bottom:5px;
}

#searchDiv input[type=button]{
background-color:#DDDDDD;
}

.green{
background-color:green;
color:wh...
});
}
function initTxt(){
loadTxtFile('file1.txt','#inputArea1');
loadTxtFile('file2.txt','#inputArea2');
}
</script>

</h...
<img src="http://img.youtube.com/vi/IvkiRUGCTBA/default.jpg" width=94% height=94%>
</td>
<td valign="top" style="width:406...
</span>
&nbsp;
&nbsp;
<input type="button" value="to Big Screen" onclick="screenSize()"
id = "btnScreen" style="background...
<div style="background-color:#003399;color:white;font-family:'Times New Roman';
margin:1px;">
<h2 style="margin-top:4px;">...
<br>
<br>
3- <span class="green">Type (or copy and paste) in beneath box the following
text</span>:
<br>
Eagles - Hotel Ca...
text-align:left;background-color:#eee;line-height:150%;font-family:Arial;
font-size:12px;">

</textarea>
<br>
<br>
<input ...
overflow:auto;text-align:left;background-color:#eee;line-height:150%;
font-family:Arial;font-size:12px;">

</textarea>
<br...
width: wi,
height:hi,
videoId: vId,
playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
ev...
Sta = event.data;
if (Sta == -1){Stat = 'wait' };
if (Sta == 0){Stat = 'end' };
if (Sta == 1){Stat = 'play' };
if (Sta == ...
if(jj <= last){jj=jj+1};
if (jj > last){jj=1};
showVid(jj);
}

function showVid(num){
// window.scrollTo(0,0);
jj = num;
d...
//Creating three arrays

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

function t(ti){
tit.push(ti);
}
function v(vi){
vid.push(vi);
}
fu...
ima = '<img src="http://img.youtube.com/vi/'+ vid[ii] + '/default.jpg"<br>';
xx = '<li><a href="#" onclick="showVid('+ ii ...
function tim(){ // timer
var d1=new Date();
var n1=d1.toTimeString();
n1 = n1.substring(0,8)
document.getElementById('cloc...
var wi = 812;
var hi = 516;
obj.width = wi;
obj.height = hi;
document.getElementById('btnScreen').value = "to Big Screen";...
}
}
tempArr = []; tv = [] ; vvi = [] ; tti = [];
st = document.getElementById(place).value;
st = st.replace(/r|n|rn/g,'');...
t("01. Never On Sunday (Cha Cha Cha) - Ballroom Dancing");
v("IvkiRUGCTBA"); d(273);

t("02. Guantanamera (Cha Cha Cha) - ...
Upcoming SlideShare
Loading in …5
×

How to-save-video-list

978 views
783 views

Published on

Using jquery function load to get data from txt file for video playlist. This it a web for continuously playing youtube video clips.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
978
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to-save-video-list

  1. 1. How to save the video list and where to store it WATCH MY WEB: http://pvhung20.url.ph/api-78-player-mini.html Previously I was using javascript language to save the video list . This way of writing helps us easily write code. But users will find it quite confusing. For example, the two functions t(“…”) and v(“…”) must be always exist for each video clip. t("Besame Mucho CUBA!"); v("C-0geZkFHKE"); d(229); // array dur[i] = 229 may be removed if we use “google iframe api” t("Franck Pourcel - Adieu Mon Amour (adios mi amor)"); v("glccRBlBRvE"); d(156); 1
  2. 2. … However sooner or later users will seek to put the files on the network to see a lot more videos. This allows us to think about using a normal text to save video list. In this case we can rewrite the above lines shorter as the following: Besame Mucho CUBA! C-0geZkFHKE ] Franck Pourcel - Adieu Mon Amour (adios mi amor) glccRBlBRvE ] … Unfortunately to use text format for video list, both html file and txt file must be uploaded in the same server and in the same domain. Also we will have to use a few lines of jquery command : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> function loadTxtFile(file,place){ $(place).load( file, function( response, status, xhr ) { if ( status == "error" ) { var msg = "Sorry but there was an error: "; st = msg + xhr.status + " " + xhr.statusText; alert(st); } }); } function initTxt(){ loadTxtFile('file1.txt','#inputArea1'); 2
  3. 3. loadTxtFile('file2.txt','#inputArea2'); } </script> The following function is to convert text lines to javascript arrays: tit array and vid array: function textToJS(place){ if(place !="inputArea"){ if(place=="inputArea1"){ document.getElementById("butArea1").disabled = true; } if(place=="inputArea2"){ document.getElementById("butArea2").disabled = true; } } tempArr = []; tv = [] ; vvi = [] ; tti = []; st = document.getElementById(place).value; st = st.replace(/r|n|rn/g,''); tempArr = st.split("]"); vvi[0] = "" ; tti[0] = ""; for(i=0; i<tempArr.length; i++){ b1 = tempArr[i].replace(/^s+|s+$/g, ''); b11 = b1.substring(b1.length-11,b1.length) vvi.push(b11); b22 = b1.substring(0,b1.length-11); 3
  4. 4. if(b22 == ""){b22 = "Video " + (i+1)} tti.push(b22); } vvi[0] = 'vv'; tti[0]= 'tt'; vid.splice(0,1); tit.splice(0,1); vid = vvi.concat(vid); tit = tti.concat(tit); init(); } I have rewritten the file "http://pvhung20.url.ph/api-70-play-paste.html " to new file " http://pvhung20.url.ph/ api-78-player-mini.html" , in order that its source code is more concise and easier to read. It is better to use the character “#” instead of the closing square bracket “]” as "character-delimiter" between clips because the character "#" is rarely used. To change the content of the text list files you should use Notepad to create the file with the same name (file1.txt, file2.txt) with new content. Then you log into your domain, remove the old files. Then upload the new files to the server. If you are using "hostinger server" then you can directly edit files online Login to the server: 4
  5. 5. Move the mouse into the file name; Right-click, Choose "Edit file": To save all changed content to the file "file1.txt" just click on the button "Save" 5
  6. 6. FULL SOURCE CODE OF "api-78-player-mini.html" Together with "file1.txt" and "file2.txt", it was uploaded to "hostinger server" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>NONSTOP api-78-player-mini.html</title> <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoL Q9TAAAAY1BMVEUAgIAAAAD///+i0ND6/PzK 5eUbjo6GwsL1+vpzubnV6uq73d263d3R6OhwuLj4/P xLpaVGo6Pu9/cjkZESiIgWior+/v4CgIBV qqrs9vbW6+u53Ny12tqy2dn8/f3H4+MZjIzKk0QLAAA AAWJLR0QB/wIt3gAAAAlwSFlzAAAASAAA AEgARslrPgAAAFlJREFUGNOFjlkKgDAMBeOz7mu17uv9 6
  7. 7. T2mwFCxYOj+TDARC5CT4Hb8AzgCEIopZ SSoyHfICJauq0ejQSnSsXukzYFAYWROZMEss72LCumG3w nFetxV8L3p4AEJzAqEZmAQzAAAAJXRF WHRkYXRlOmNyZWF0ZQAyMDEzLTA5LTI4VDA2OjUwOjM1Kz AyOjAwnWHzigAAACV0RVh0ZGF0ZTpt b2RpZnkAMjAxMy0wOS0yOFQwNjo1MDozNSswMjowMOw8SzY AAAAASUVORK5CYII= " rel="icon" type="image/x-icon" /> <style> body{ padding:0px; margin:0px; background-color:#999; font-family:Arial; font-size:12px; } a{ text-decoration:none; color:blue; } a:hover { text-decoration:underline; color: #0099ff; } h3{ margin-top:5px; font-size:14px; 7
  8. 8. margin-bottom:5px; } #searchDiv input[type=button]{ background-color:#DDDDDD; } .green{ background-color:green; color:white; font-weight:bold; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> function loadTxtFile(file,place){ //document.getElementById("inputArea").value = ""; $(place).load( file, function( response, status, xhr ) { if ( status == "error" ) { var msg = "Sorry but there was an error: "; st = msg + xhr.status + " " + xhr.statusText; alert(st); } 8
  9. 9. }); } function initTxt(){ loadTxtFile('file1.txt','#inputArea1'); loadTxtFile('file2.txt','#inputArea2'); } </script> </head> <body onload='tim();initTxt();init()'> <div align="center"> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <br> <input id="videoTitle" type="text" value="" style="text-align:center;width:812px;color:white;background-color:#1B1B1B; border:0px;font-weight:normal;padding:4px;"> <br> <!-----------> <table border=1 style="background-color:#4798B6;height:50px;font-size:12px; margin-top:4px;"> <tr> <td id="imgTD" style="width:106px" align="center"> 9
  10. 10. <img src="http://img.youtube.com/vi/IvkiRUGCTBA/default.jpg" width=94% height=94%> </td> <td valign="top" style="width:406px;"> <div id="curCodeTD" style="height:70px;;border:0px #333 solid;margin:2px; padding:2px; overflow:auto;"> </div> </td> <td valign="top" style="width:280px;background-image:url('blue-short.jpg')"> <div style="padding:4px;"> <span style="border:2px solid white;padding:2px;background-color:#336699"> &nbsp; <span id="videoStatus" style="color:#FF66CC;text-align:center;font-weight:bold; width:50px;"> wait</span> &nbsp; <b><span id="curTimeSpan" style="width:35px;text-align:'center'; color:white";>00</span> </b> &nbsp;<b><span style="color:white">/</span>&nbsp; <span id="durationSpan" style="width:35px;text-align:'center'; color:white";>00</span></b> &nbsp; 10
  11. 11. </span> &nbsp; &nbsp; <input type="button" value="to Big Screen" onclick="screenSize()" id = "btnScreen" style="background-color:#DDD"> </div> <div style="padding:4px;padding-top:2px;"> <span id="clock" style="color:white;background-color:#336600;font-size:14px; padding:2px;border:2px solid white;font-weight:bold">&nbsp;CLOCK&nbsp;</span> &nbsp; <input type="button" id="btnStart" value=" Start " onclick ="showVid(1)" style="background-color:#DDD"> &nbsp; <input type="button" value="Back" onclick ="backVideo();" style="background-color:#DDD"> &nbsp; <input type="button" value="Next" onclick="nextVideo()" style="background-color:#DDD"> </div> </td> </tr> </table> 11
  12. 12. <div style="background-color:#003399;color:white;font-family:'Times New Roman'; margin:1px;"> <h2 style="margin-top:4px;"><i><b>API PLAYER PASTE (If this page is ON PC: Use FFox, Chrome; ON NET: Opera, FFox, Chrome)</b></i></h2> </div> <!--end of control menu --> <b style="font-size:20px;font-family:'Times New Roman';">WORKING LIST</b><br> <div id='list1' style="width:750px;height:360px;border:1px gray solid;overflow:auto; text-align:left;background-color:#eee;line-height:150%"> </div> <br> <!--/////////////////////////////////--> <hr> <b style="font-size:20px;font-family:'Times New Roman';">VIDEO LIST EDITOR</b><br> <br> <div style="background-color:#FFFFCC;border:1px solid #333;width:655px; height:240px;font-size:12px;text-align:left;overflow:auto;padding:20px; line-height:160%"> 1- <span class="green">Click on the button "Add file1 to List"</span>. <br> 2- <span class="green">Click on the button "Add file2 to List"</span>. <br> Note that you can buttons "Load Travel1" and "Load Travel2" workes only one time. 12
  13. 13. <br> <br> 3- <span class="green">Type (or copy and paste) in beneath box the following text</span>: <br> Eagles - Hotel California (Lyrics)<br> h0G1Ucw5HDg ]<br> Bertie Higgins - Casablanca (Lyrics)<br> Blx9lHMivQs ]<br> Lionel Richie - Hello<br> PDZcqBgCS74 <br> <br> <span class="green">then click the button "Add Beneath Text"</span>. You will see that three new video clips added to the WORKING LIST <br> <br> </div> <br> <input type="button" value="Add Beneath Text" onclick="textToJS('inputArea')" style="background-color:#DDD"> <br> <br> <textarea id='inputArea' style="width:750px;height:200px;border:1px gray solid; overflow:auto; 13
  14. 14. text-align:left;background-color:#eee;line-height:150%;font-family:Arial; font-size:12px;"> </textarea> <br> <br> <input id="butArea1" type="button" value="Add file1 to List" onclick="textToJS('inputArea1')" style="background-color:#DDD" > <br> <br> <textarea id='inputArea1' style="width:750px;height:200px;border:1px gray solid; overflow:auto; text-align:left;background-color:#eee;line-height:150%;font-family:Arial; font-size:12px;"> </textarea> <br> <br> <input id="butArea2" type="button" value="Add file2 to List" onclick="textToJS('inputArea2')" style="background-color:#DDD"> <br> <br> <textarea id='inputArea2' style="width:750px;height:200px;border:1px gray solid; 14
  15. 15. overflow:auto;text-align:left;background-color:#eee;line-height:150%; font-family:Arial;font-size:12px;"> </textarea> <br> <br> <br> <script> jj = 1; Sta = -1; sss = 0; var tag = document.createElement('script'); tag.src = "http://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // after the API code downloads. var player; wi = '' + 812; hi = '' + 516; function onYouTubePlayerAPIReady() { vId = vid[1] player = new YT.Player('player', { 15
  16. 16. width: wi, height:hi, videoId: vId, playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, }, events: { 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerError(error) { if ( error ) {nextVideo();} } function onPlayerStateChange1(event) { Sta = event.data; if (Sta == 0) { nextVideo(); } } function onPlayerStateChange(event) { 16
  17. 17. Sta = event.data; if (Sta == -1){Stat = 'wait' }; if (Sta == 0){Stat = 'end' }; if (Sta == 1){Stat = 'play' }; if (Sta == 2){Stat = 'stop' }; if (Sta == 3){Stat = 'load' }; if (Sta == 5){Stat = 'cued' }; document.getElementById('videoStatus').innerHTML = Stat; if (event.data == 0) { nextVideo(); } if(Sta == 1){ st = Math.round(player.getDuration()); document.getElementById("durationSpan").innerHTML = st; } } function backVideo(){ len = vid.length -1; if(jj>=2){jj=jj-1;showVid(jj);} if (jj==1){showVid(jj);alert("Begin Of List");} } function nextVideo(){ 17
  18. 18. if(jj <= last){jj=jj+1}; if (jj > last){jj=1}; showVid(jj); } function showVid(num){ // window.scrollTo(0,0); jj = num; document.getElementById('videoTitle').value = jj +' / '+ last + ' videos : ' + tit[jj]; /////////// imgSt = '<img src="http://img.youtube.com/vi/'+ vid[jj] + '/default.jpg"'+ 'width=94% height=94%>'; obj = document.getElementById("imgTD"); obj.innerHTML = imgSt; titSt = tit[jj].replace(/]/g,")"); titSt = titSt.replace(/[/g,"("); curCode = titSt + '<br>'+ vid[jj] + ' ]'; obj = document.getElementById("curCodeTD"); obj.innerHTML = curCode; ide = vid[num]; player.loadVideoById(ide, "large"); } 18
  19. 19. //Creating three arrays tit = []; vid = []; dur = []; function t(ti){ tit.push(ti); } function v(vi){ vid.push(vi); } function d(du){ dur.push(du); } k=0; tit[k]="" ;vid[k]="" ;dur[k]=0; // For this page the array dur[] can be deleted function init(){ last = vid.length -1; document.getElementById('videoTitle').value = jj +' / '+ last + ' videos : ' + tit[jj]; st = ""; mmm = ""; for(ii=1;ii<=last;ii++){ 19
  20. 20. ima = '<img src="http://img.youtube.com/vi/'+ vid[ii] + '/default.jpg"<br>'; xx = '<li><a href="#" onclick="showVid('+ ii +');return false;">'+ tit[ii]+ '</a></li><br>'; st = st + ima + xx; } st = '<ol>' + st + '</ol>'; document.getElementById('list1').innerHTML = st; mmm = vid.toString(); vt = mmm.indexOf(','); mmm = mmm.substring(vt+1,mmm.length); if(mmm != "") {document.getElementById('onlyVidID').innerHTML = mmm;} } function goURL(ur){ window.location = ur; } 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; } 20
  21. 21. function tim(){ // timer var d1=new Date(); var n1=d1.toTimeString(); n1 = n1.substring(0,8) document.getElementById('clock').innerHTML=n1; sss = secSinceMidnight(); // document.getElementById('sssSpan').innerHTML=sss; if(Sta == 1){ st2 = Math.round(player.getCurrentTime()); document.getElementById("curTimeSpan").innerHTML = st2 ; } timer2 = setTimeout('tim()',1000); } /////////// wiInt = document.body.clientWidth ; // global; added by pvhung20 hiInt = document.body.clientHeight; bigScreen = false; function screenSize(){ obj = document.getElementById('player'); if(bigScreen == true){ 21
  22. 22. var wi = 812; var hi = 516; obj.width = wi; obj.height = hi; document.getElementById('btnScreen').value = "to Big Screen"; document.getElementById('videoTitle').style.width = wi + 'px'; bigScreen = false; } else{ obj.width = wiInt; obj.height = hiInt; document.getElementById('btnScreen').value = "to Small Screen"; document.getElementById('videoTitle').style.width = wiInt + 'px'; bigScreen = true; } window.scrollTo(0,0); } function textToJS(place){ if(place !="inputArea"){ if(place=="inputArea1"){ document.getElementById("butArea1").disabled = true; } if(place=="inputArea2"){ document.getElementById("butArea2").disabled = true; 22
  23. 23. } } tempArr = []; tv = [] ; vvi = [] ; tti = []; st = document.getElementById(place).value; st = st.replace(/r|n|rn/g,''); tempArr = st.split("]"); vvi[0] = "" ; tti[0] = ""; for(i=0; i<tempArr.length; i++){ b1 = tempArr[i].replace(/^s+|s+$/g, ''); b11 = b1.substring(b1.length-11,b1.length) vvi.push(b11); b22 = b1.substring(0,b1.length-11); if(b22 == ""){b22 = "Video " + (i+1)} tti.push(b22); } vvi[0] = 'vv'; tti[0]= 'tt'; vid.splice(0,1); tit.splice(0,1); vid = vvi.concat(vid); tit = tti.concat(tit); init(); } ////////// YOU CAN ADD MORE CLIPS ANYWHERE WITHIN THIS LIST ///////////---- Top Border of VIDEO LIST ----////////////// 23
  24. 24. t("01. Never On Sunday (Cha Cha Cha) - Ballroom Dancing"); v("IvkiRUGCTBA"); d(273); t("02. Guantanamera (Cha Cha Cha) - Ballroom Dancing"); v("NLoBsvXAGws"); d(292); t("Ramrods - La Paloma Cha Cha (Re-posted) [HD]"); v("gozF6bFgvZc"); d(198); t("Ramrods - Tico-Tico (Clean Version) [HD]"); v("xu6BXpTVzU4"); d(157); t("CIELITO LINDO ,,, SUONA , FOLLI MICHELANGELO ,, TASTIERA KETRON AUDYA ,,,"); v("tGhdVktU574"); d(203); t("PIANO MUSIC COVER - HAPPY NEW YEAR"); v("HDUiN-tz4MM"); d(316); /////////////--- Bottom Border of VIDEO LIST ---/////////////// oldLength = vid.length; </script> </div> </body> </html> 24

×