4.18.24 Movement Legacies, Reflection, and Review.pptx
How to-save-video-list
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. …
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. 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. 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. 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. 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
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. <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
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. 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