SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
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
…
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
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
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
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
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
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
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
});
}
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
<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
</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
<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
<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
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
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
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
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
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
//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
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
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
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
}
}
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
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

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (13)

HTTP/2 -- the future of WWW
HTTP/2 -- the future of WWWHTTP/2 -- the future of WWW
HTTP/2 -- the future of WWW
 
Html5 Game Development with Canvas
Html5 Game Development with CanvasHtml5 Game Development with Canvas
Html5 Game Development with Canvas
 
Get Gulping with Javascript Task Runners
Get Gulping with Javascript Task RunnersGet Gulping with Javascript Task Runners
Get Gulping with Javascript Task Runners
 
Flash Is Dead, Long Live Flash!
Flash Is Dead, Long Live Flash!Flash Is Dead, Long Live Flash!
Flash Is Dead, Long Live Flash!
 
PHP Backdoor: The rise of the vuln
PHP Backdoor: The rise of the vulnPHP Backdoor: The rise of the vuln
PHP Backdoor: The rise of the vuln
 
How to manage Microsoft Azure with open source
How to manage Microsoft Azure with open sourceHow to manage Microsoft Azure with open source
How to manage Microsoft Azure with open source
 
How we used ruby to build locaweb's cloud (http://presentations.pothix.com/ru...
How we used ruby to build locaweb's cloud (http://presentations.pothix.com/ru...How we used ruby to build locaweb's cloud (http://presentations.pothix.com/ru...
How we used ruby to build locaweb's cloud (http://presentations.pothix.com/ru...
 
HTTP/2 -- the future of WWW
HTTP/2 -- the future of WWWHTTP/2 -- the future of WWW
HTTP/2 -- the future of WWW
 
How CPAN Testers helped me improve my module
How CPAN Testers helped me improve my moduleHow CPAN Testers helped me improve my module
How CPAN Testers helped me improve my module
 
Forget the Web
Forget the WebForget the Web
Forget the Web
 
Py conkr 20150829_docker-python
Py conkr 20150829_docker-pythonPy conkr 20150829_docker-python
Py conkr 20150829_docker-python
 
Docker remote-api
Docker remote-apiDocker remote-api
Docker remote-api
 
Php web backdoor obfuscation
Php web backdoor obfuscationPhp web backdoor obfuscation
Php web backdoor obfuscation
 

Andere mochten auch (6)

Eval q3
Eval q3Eval q3
Eval q3
 
Kinh nghiem thi cu vao ngan hang
Kinh nghiem thi cu vao ngan hangKinh nghiem thi cu vao ngan hang
Kinh nghiem thi cu vao ngan hang
 
Tình hình tử vong tại bệnh viện điều
Tình hình tử vong tại bệnh viện điềuTình hình tử vong tại bệnh viện điều
Tình hình tử vong tại bệnh viện điều
 
When will the rain stop
When will the rain stopWhen will the rain stop
When will the rain stop
 
The impact on learning of iTunes U Open Educational Resources
The impact on learning of iTunes U Open Educational ResourcesThe impact on learning of iTunes U Open Educational Resources
The impact on learning of iTunes U Open Educational Resources
 
Doc 2
Doc 2Doc 2
Doc 2
 

Ähnlich wie How to-save-video-list

HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
Patrick Lauke
 
Play search-videos-html
Play search-videos-htmlPlay search-videos-html
Play search-videos-html
pvhung20
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
Patrick Lauke
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
smueller_sandsmedia
 
Playing videos. See:slideshare.net/phanhung20/non-stop-random2b
Playing videos. See:slideshare.net/phanhung20/non-stop-random2bPlaying videos. See:slideshare.net/phanhung20/non-stop-random2b
Playing videos. See:slideshare.net/phanhung20/non-stop-random2b
phanhung20
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Robert Nyman
 

Ähnlich wie How to-save-video-list (20)

Videos on Android - Stuff What I Learned
Videos on Android - Stuff What I LearnedVideos on Android - Stuff What I Learned
Videos on Android - Stuff What I Learned
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Play search-videos-html
Play search-videos-htmlPlay search-videos-html
Play search-videos-html
 
Graphics & Animation with HTML5
Graphics & Animation with HTML5Graphics & Animation with HTML5
Graphics & Animation with HTML5
 
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
 
Designing web pages html videos
Designing web pages html videosDesigning web pages html videos
Designing web pages html videos
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
Hero Video Performance
Hero Video PerformanceHero Video Performance
Hero Video Performance
 
Mobile Web Video
Mobile Web VideoMobile Web Video
Mobile Web Video
 
Playing videos. See:slideshare.net/phanhung20/non-stop-random2b
Playing videos. See:slideshare.net/phanhung20/non-stop-random2bPlaying videos. See:slideshare.net/phanhung20/non-stop-random2b
Playing videos. See:slideshare.net/phanhung20/non-stop-random2b
 
Playing videos continously
Playing videos continously Playing videos continously
Playing videos continously
 
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, CroatiaLeave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
 
Non stop random2b
Non stop random2bNon stop random2b
Non stop random2b
 
Web Apps
Web AppsWeb Apps
Web Apps
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 

Mehr von phanhung20

Play audio-continuously
Play audio-continuouslyPlay audio-continuously
Play audio-continuously
phanhung20
 

Mehr von phanhung20 (17)

Graph for Coulomb damped oscillation
Graph for Coulomb damped oscillationGraph for Coulomb damped oscillation
Graph for Coulomb damped oscillation
 
Search videos with youtube api3
Search videos with youtube api3Search videos with youtube api3
Search videos with youtube api3
 
Search and play more than 50 clips
Search and play more than 50 clipsSearch and play more than 50 clips
Search and play more than 50 clips
 
Search 500-video-clips
Search 500-video-clipsSearch 500-video-clips
Search 500-video-clips
 
Color ss2-pvh-bta1
Color ss2-pvh-bta1Color ss2-pvh-bta1
Color ss2-pvh-bta1
 
Pvh bai-tap-a2-2014-th-11(1)
Pvh bai-tap-a2-2014-th-11(1)Pvh bai-tap-a2-2014-th-11(1)
Pvh bai-tap-a2-2014-th-11(1)
 
Cau hoi thi vatly 2014 4 tin chi
Cau hoi thi vatly 2014 4 tin chiCau hoi thi vatly 2014 4 tin chi
Cau hoi thi vatly 2014 4 tin chi
 
Cau hoi-thi-catly-2014-thang11
Cau hoi-thi-catly-2014-thang11Cau hoi-thi-catly-2014-thang11
Cau hoi-thi-catly-2014-thang11
 
Pvh 11-2014-btvl-a1
Pvh 11-2014-btvl-a1Pvh 11-2014-btvl-a1
Pvh 11-2014-btvl-a1
 
Debai table1
Debai table1Debai table1
Debai table1
 
Bai tap-a1
Bai tap-a1Bai tap-a1
Bai tap-a1
 
Thi nghiema2
Thi nghiema2Thi nghiema2
Thi nghiema2
 
Thi nghiema1
Thi nghiema1Thi nghiema1
Thi nghiema1
 
Ly thuyetdosai so1
Ly thuyetdosai so1Ly thuyetdosai so1
Ly thuyetdosai so1
 
Bai tap a1
Bai tap a1Bai tap a1
Bai tap a1
 
Play audio-continuously
Play audio-continuouslyPlay audio-continuously
Play audio-continuously
 
Xem video-lien-tuc
Xem video-lien-tucXem video-lien-tuc
Xem video-lien-tuc
 

Kürzlich hochgeladen

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 

Kürzlich hochgeladen (20)

Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural ResourcesEnergy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Role Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptxRole Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 

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
  • 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. 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. }); } 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. <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. </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. <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
  • 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. 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. 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. 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. 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. //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
  • 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. 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. } } 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. 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