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);

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');

3


}

</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;

}



}

}

tempArr = []; tv = [] ; vvi = [] ; tti = [];

st = document.getElementById(place).value;

st = st.replace(/\r|\n|\r\n/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);

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:

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"

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

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;

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);

}

9

});

}

function initTxt(){



}

</script>

</head>

<body onload='tim();initTxt();init()'>

<div align="center">



<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">

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">

<span id="videoStatus" style="color:#FF66CC;text-align:center;font-weight:bold;

width:50px;">

wait</span>

<b><span id="curTimeSpan" style="width:35px;text-align:'center';

color:white";>00</span>

</b>

<b><span style="color:white">/</span>

<span id="durationSpan" style="width:35px;text-align:'center';

color:white";>00</span></b>

11

</span>

<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"> CLOCK </span>

<input type="button" id="btnStart" value=" Start "

onclick ="showVid(1)" style="background-color:#DDD">

<input type="button" value="Back"

onclick ="backVideo();" style="background-color:#DDD">

<input type="button" value="Next"

onclick="nextVideo()" style="background-color:#DDD">

</div>

</td>

</tr>

</table>

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>



<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.

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;

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;

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', {

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) {

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(){

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");

}

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++){

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;

}

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){

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"){



}



23

}

}

tempArr = []; tv = [] ; vvi = [] ; tti = [];

st = document.getElementById(place).value;

st = st.replace(/\r|\n|\r\n/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 ----//////////////

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>

Education

How to-save-video-list