SlideShare une entreprise Scribd logo
1  sur  14
1
NONSTOP RANDOMLY PLAYING VIDEOS
This is the next additional part of my writing, uploaded at the address:
http://www.slideshare.net/phanhung20/playing-videos
Pic. 1 Web page https://files.myopera.com/phanhung20/files/nonStopRandom2.html
1- Using the web:
- Download two files: nonStopRandom2.html (14 KB) and myList2.js (7 KB) to your PC. Put
them in the same folder.
- The web should be viewed in Fire Fox, Chrome, Opera, Safari browsers. It works also in Ms. I.
Explorer, but its layout is not good.
- You can use the web for creating playlist of your favorite youtube videos. Remember that
YouTube.com web does not allow us to embed all videos. So we need to test any video in our
web, before saving it to the file “myList2.js”.
2
2- The functions of the web:
- Playing videos continuously from the beginning of the list: Click button “Play All”.
- Playing continuously, from any video in the list: Click the title of the chosen video.
- Testing new videos:
+ Open two webs, our web and the page “youtube.com”. In youtube.com, if you like
some video, copy its URL (left click in the address bar, then right click, choose “Copy”).
Return to our page and paste the content to the box “URL of videos”. Then find another
URL of the video you like in Youtube web and put it again in the box …
+Click button “Show All New”. After that the “Alert box” will be shown some times. Each
time, you should click “OK”. Please, do not make “mouse clicking” quite quickly, because
the web needs to wait one or two seconds to retrieve the information from the
Google’s gdata feeds web. As the results, we will see the “list of new videos”. Click this
video to test if it could play or not as an embedded element.
+All new videos are bounded with a button “Remove”. If you do not like some video,
click this button to “throw it”. If you rethink and want to get the video back, click again
in the button, that now is renamed as “Restore” .
3
- Making final new list and save it to the file “myList2.js”:
+ Click button “Make New List” and you will get the list ready. Just put the mouse cursor
on the list, right click, choose “Select All”. Put the cursor in the “blue colored area”, right
click, choose “Copy”.
+Open the folder, where the file “myList2.js” is saved. Right click this file, choose “Open
With …”, then choose “NotePad”.
+Past the copied content to “myList2.js. Click “File”, “Save”.
3- Programming and the source code:
There are in the html some specific functions:
a- randomPlay(): First, it creates a randomly arranged integer numbers. Then all indexs of three
arrays tit[i], vid[i] and dur[i] will be changed to fit the created order.
b- yt(idenfier): To use this function, we need the ready to use javascript link:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
The function yt(indenfier) help us to retrieve information for the video (id, title, duration, the
name of the upploader, how many times the video was viewed, description of the video …).
function yt(fil) {
urlst = "http://gdata.youtube.com/feeds/api/videos/"+ fil + "?v=2&alt=json"
$.ajax({
url: urlst ,
dataType: "jsonp",
success: function (data) {parseresults(data)}
});
}
c-getId1(): It take all URL’s that are in a “text area”. Extract Id (11 characters/numbers) from
them and creates links to call the function yt(…) to form the final links with full, needed
information. I have used here some code lines from the interesting web page:
http://lasnv.net/foro/839/Javascript_parsear_URL_de_YouTube
THE FULL SOURCE CODE
<!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 Videos 2</title>
<head>
4
<style>
body{
background-color:#999;
font-family:Arial;
font-size:12px;
}
a {
text-decoration:none;
color:blue;
}
a:hover {
text-decoration:underline;
color: #0099ff;
}
#list1, #description, #list3, #list4{
width: 640px; /*850px*/
height: 130px;
margin:0px;
padding:0px;
border:1px solid #666;
text-align:left;
overflow:auto;
background-color:#ddd;
line-height:150%;
}
</style>
<script>
function play(i){
c = 0;
j = i;
window.scrollTo(0,0);
yt(vid[i]);
last = vid.length - 1;
obj = document.getElementById("player1");
stID = "http://www.youtube.com/embed/" + vid[i] + "?autoplay=1";
obj.setAttribute("src",stID);
}
function playId(idd, duu){
c = 0;
5
dur[j] = duu;
window.scrollTo(0,0);
yt(idd);
last = vid.length - 1;
obj = document.getElementById("player1");
stID = "http://www.youtube.com/embed/" + idd + "?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;}
if (j>last){j=1;}
play(j);
}
mytimer = setTimeout("count()",1000);
}
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;}
if (j>last){j=1;}
play(j);
}
function endVid(){
clearTimeout(mytimer);
st = "http://www.youtube.com/embed/ntGJ2vkLbIo?autoplay=0";
obj = document.getElementById("player1");
obj.setAttribute("src",st);
obj = document.getElementById("vidTitle");
obj.innerHTML = '';
c = 0; j = 0;
}
6
function sec(m,s){
return m*60 + s;
}
function hs(h,m,s){ // hour to second
return (h*60 + m)*60 + s;
}
function t(ti){
tit.push(ti);
}
function v(vi){
vid.push(vi);
}
function d(du){
dur.push(du);
}
function quit(){
if(mytimer){
clearTimeout(mytimer);
}
}
//Creating three arrays
tit = []; vid = []; dur = [];
k=0;
tit[k]="" ;
vid[k]="" ;dur[k]=0;
t("Richard Abel - Spanish Eyes") ;
v("ntGJ2vkLbIo");d(183);
t("CUANDO SALI DE CUBA- SUSANA PEÑA");
v("9CLAAJYRo-I");d(95);
t("FRANCK POURCELL - BESAME MUCHO");
v("RK208ZT82Is");d(sec(3,12));
// In the youtube.com page "franck pourcel besame mucho"
// you see: duration of the video is 3:12.
//Function sec(3,12) will return 192 seconds.
t("FRANCIS GOYA - UNCHAINED MELODY");
v("6OiY_UYSB_c");d(298);
7
t("NO MATTER WHAT _ Francis Goya & RICHARD CLAYDERMAN") ;
v("NPer39-JSr0");d(214);
t("The old rowan tree") ;
v("wmt16uvPDqg");d(161);
var oldLength = 0;
function init(){
oldLength = vid.length;
newInit();
}
function newInit(){
ss = '';
len = vid.length;
for (i=1;i<len;i++){
xx = '<li><a href="#" onclick="j =' + i +'; play('
+ i+');">'+ tit[i]+ '</a><br>'; // them j = i;
ss = ss + xx;
}
obj = document.getElementById('list1');
obj.innerHTML = '<ol><br>' + ss + '</ol>';
}
//////////////////// - random
var retArr = new Array();
function randomIntegers(n) {
var tmpArr = new Array();
// Create array with numbers 0,1,2,..,n
for (var i=0; i<n; i++)
tmpArr[i] = i;
// Randomize numbers in array
st="";
for (var i=0; i<n-1; i++) {
var ranIndex = Math.floor(Math.random()*tmpArr.length);
retArr[i] = tmpArr[ranIndex];
st = st + retArr[i]+"; ";
8
tmpArr[ranIndex] = tmpArr[tmpArr.length-1];
tmpArr.pop();
}
retArr[n-1] = tmpArr[0];
// alert('retArr[n-1] = '+ retArr[n-1]+'n'+ st);
return retArr;
}
var tempv = new Array();
var tempd = new Array();
var tempt = new Array();
function randomPlay()
{
len = vid.length-1;
//alert('len = '+len);
randomIntegers(len);
for (var k = 1; k <=len; k++){
tempv[k] = vid[k] ;
tempd[k] = dur[k] ;
tempt[k] = tit[k] ;
}
for (var j = 0; j <len; j++){
vid[j+1] = tempv[retArr[j]+1];
dur[j+1] = tempd[retArr[j]+1];
tit[j+1] = tempt[retArr[j]+1];
}
init();
// test
j=1;
play(j);
}
function getId1(){
obj = document.getElementById("area1");
st = obj.value;
n = st.indexOf("#");
if(n>0){st = st.replace(/#/g,'');} // xoa het #
arr = []; idd = [];
st = st.replace(/http/g,"#http");
// alert(st); test
9
arr = st.split("#");
len = arr.length - 1;
var regExp = /^.*((youtu.be/)|(v/)|(/u/w/)|(embed/)|(watch?))??v?=?([^#&?]*).*/;
ss = "";
for(i=1;i<=len;i++){
arr[i] = $.trim(arr[i]);
var match = arr[i].match(regExp);
if (match&&match[7].length==11){
var mm = match[7];
idd[i] = mm;
ss = ss + "<li><a href='#' onclick='playId("" + mm +
"");'>" + mm + "</a></li>";
}
else{
alert("Url incorrect");
}
}
for(i=1;i<=len;i++){
alert("Video Id: " + idd[i]);
yt1(idd[i]);
}
}
function yt(fil) {
urlst = "http://gdata.youtube.com/feeds/api/videos/"+ fil +
"?v=2&alt=json"
$.ajax({
url: urlst ,
dataType: "jsonp",
success: function (data) {parseresults(data)}
});
}
function parseresults(data) {
var id = data.entry.id.$t;
len = id.length;
id = id.substring(len-11,len);
var title = data.entry.title.$t;
var duration = data.entry.media$group.yt$duration.seconds;
10
var description = data.entry.media$group.media$description.$t;
var viewcount = data.entry.yt$statistics.viewCount;
var author = data.entry.author[0].name.$t;
$('#vidTitle').html("<b>" + title+"</b>");
$('#description').html('<b>ID</b>: '+ id +
'&nbsp;&nbsp;<b>Duration</b>: '+duration+
'&nbsp;&nbsp;<b>Author</b>: ' + author +
'&nbsp;&nbsp;<b>Views</b>: ' + viewcount +
'<br><b>Description</b>: ' + description
);
title1 = title.replace(/"/g, '"');
mm = 't("'+ title1 + '");n'+
'v("'+ id + '"); d(' + duration + ');n' ;
document.getElementById("coding").value = mm;
}
function yt1(fil) {
urlst = "http://gdata.youtube.com/feeds/api/videos/"+ fil +
"?v=2&alt=json"
$.ajax({
url: urlst ,
dataType: "jsonp",
success: function (data) {parseresults1(data)}
});
}
function parseresults1(data) {
var id = data.entry.id.$t;
len = id.length;
id = id.substring(len-11,len);
var title = data.entry.title.$t;
var duration = data.entry.media$group.yt$duration.seconds;
var description = data.entry.media$group.media$description.$t;
var viewcount = data.entry.yt$statistics.viewCount;
var author = data.entry.author[0].name.$t;
////////// hom nay
tit.push(title);
vid.push(id);
dur.push(duration);
11
newInit();
///////// het hom nay
title1 = title.replace(/"/g, '"');
mm = 't("'+ title1 + '");n'+
'v("'+ id + '"); d(' + duration + ');n' ;
document.getElementById("coding").value = mm;
curIm = "http://img.youtube.com/vi/" + id + "/default.jpg" ;
str = '<a href="#" onclick="playId(''+id+'','+ duration +
');" style="float:left"><img src="'+ curIm + '" width = THUMBNAIL_WIDTH height=
THUMBNAIL_HEIGHT >'+
'<div style="float:left"></a>' +
'&nbsp;&nbsp;&nbsp;<input type="button" value="Remove" onclick="removeCur(''+ id +'',this)" >'+
'<div id="'+ id +'" style="display:block;">&nbsp;<br>&nbsp;t("' + title1 +'");<br>' +
'&nbsp;v("' + id +')";&nbsp;&nbsp;d(' + duration + ');'+
'</div></div>' +
'<br style="clear:both"><hr style="margin-top:2px;margin-bottom:2px;">' ;
obj = document.getElementById("list4");
obj.innerHTML = obj.innerHTML + str;
}
function removeCur(idd, me){
if(me.value=="Remove"){
document.getElementById(idd).style.display = "none";
me.setAttribute("value", "Restore");
}
else{
document.getElementById(idd).style.display = "block";
me.setAttribute("value", "Remove");
}
}
function MakeNewList(){
ar1 = [];
mm = "" ;
obj = document.getElementById("list4"); // "newVideos"
ar1 = obj.getElementsByTagName("div");
for(i=0;i<ar1.length;i++){
if(ar1[i].style.display == 'block'){
12
mm = mm + ar1[i].innerText;
}
}
document.getElementById("area6").value = mm;
}
function clearAllNewxx(){
obj = document.getElementById("list4");
obj.innerHTML = "";
}
function clearAllNew(){
len1 = vid.length;
if(len1 > oldLength){
delta = len1 - oldLength;
vid.splice(oldLength,delta);
tit.splice(oldLength,delta);
dur.splice(oldLength,delta);
obj = document.getElementById("list4");
obj.innerHTML = "";
newInit();
}
}
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="myList2.js"></script>
</head>
<!--/////////////////////////////////////////////////////////-->
<body onload="init()" onload="quit()">
<div align="center">
<iframe id="player1" width="835" height="480"
src="http://www.youtube.com/embed/ntGJ2vkLbIo?autoplay=0" frameborder="0" allowfullscreen
></iframe>
<br>
You are watching:
<br><span id="vidTitle"></span>
<br>
<input type="button" value="Play All" onclick="count()">&nbsp;
13
<input type="button" value="End" onclick="endVid()">&nbsp;
<input type="text" id="showSeconds" value="0/dur" size=28 style="text-align:center">&nbsp;
<input type="button" value="Random" onclick="randomPlay()">&nbsp;
<input type="button" value="Back" onclick = "backVideo();">&nbsp;
<input type="button" value="Next" onclick="nextVideo()">
<br>
<br>
<div style="left:30px;">
<!------------------>
<div id="description" style="height:120px;padding:20px;width:340px;float: left;margin-left:75px;">
</div>
<div id="list1" style="float:left;width:460px;height:160px;">
</div>
<!----------------->
</div>
<br style="clear:both;">
<br>
<b>TEST AND ADD NEW VIDEO</b>
<br>
<br>
<textarea id="area1" style="width:700px;height:140px;">
http://www.youtube.com/watch?v=Kasq1bDH_sU
http://www.youtube.com/watch?v=5UjihJluQtk
http://www.youtube.com/watch?v=oW2SDwSJrLg
</textarea>
<br>
<br>
<input type="button" value="Show All New" onclick="getId1()">&nbsp;
<input type="button" value="Clear All New" onclick="clearAllNew()">
<br>
<div id="list3" style="display:none;"></div>
<br>
<div id="list4" style="width:700px;height:240px;"></div>
<textarea id="coding" style="width:700px;height:140px;display:none;">
</textarea>
<br>
<input type="button" value="Make New List" onclick="MakeNewList()" style="margin-bottom:4px;">
<br>
14
<br>
<textarea id="area6" cols=86 rows=9 style="padding:0px;">
</textarea>
<br>
<br>
<a href="https://files.myopera.com/phanhung20/files/myList1.js">
Download js file:</a>https://files.myopera.com/phanhung20/files/myList1.js
<br>
Right click this link. Choose "Copy Linked Content As ..."
<br>
<br>
<iframe src="http://www.slideshare.net/slideshow/embed_code/21892741" width="835"
height="560" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px
solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen
mozallowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a
href="http://www.slideshare.net/phanhung20/playing-videos" title="Playing videos"
target="_blank">Playing videos</a> </strong> from <strong><a
href="http://www.slideshare.net/phanhung20" target="_blank">phanhung20</a></strong> </div>
<br>
Uploaded May 25, 2013:
<a href="https://files.myopera.com/phanhung20/files/nonStopRandom2.html">
https://files.myopera.com/phanhung20/files/nonStopRandom2.html</a>
<br>
</div> <!-- center -->
</body>
</html>

Contenu connexe

Tendances

Paris js extensions
Paris js extensionsParis js extensions
Paris js extensionserwanl
 
Android Architecture Component in Real Life
Android Architecture Component in Real LifeAndroid Architecture Component in Real Life
Android Architecture Component in Real LifeSomkiat Khitwongwattana
 
The report of JavaOne2011 about groovy
The report of JavaOne2011 about groovyThe report of JavaOne2011 about groovy
The report of JavaOne2011 about groovyYasuharu Nakano
 
Architecture Components In Real Life Season 2
Architecture Components In Real Life Season 2Architecture Components In Real Life Season 2
Architecture Components In Real Life Season 2Somkiat Khitwongwattana
 
Eddystone Beacons - Physical Web - Giving a URL to All Objects
Eddystone Beacons - Physical Web - Giving a URL to All ObjectsEddystone Beacons - Physical Web - Giving a URL to All Objects
Eddystone Beacons - Physical Web - Giving a URL to All ObjectsJeff Prestes
 
The Ring programming language version 1.10 book - Part 92 of 212
The Ring programming language version 1.10 book - Part 92 of 212The Ring programming language version 1.10 book - Part 92 of 212
The Ring programming language version 1.10 book - Part 92 of 212Mahmoud Samir Fayed
 
Beacons, Raspberry Pi & Node.js
Beacons, Raspberry Pi & Node.jsBeacons, Raspberry Pi & Node.js
Beacons, Raspberry Pi & Node.jsJeff Prestes
 
Введение в REST API
Введение в REST APIВведение в REST API
Введение в REST APIOleg Zinchenko
 
LISA QooxdooTutorial Slides
LISA QooxdooTutorial SlidesLISA QooxdooTutorial Slides
LISA QooxdooTutorial SlidesTobias Oetiker
 
The State of PHPUnit
The State of PHPUnitThe State of PHPUnit
The State of PHPUnitEdorian
 
FRP: What does "declarative" mean
FRP: What does "declarative" meanFRP: What does "declarative" mean
FRP: What does "declarative" meanPeter Ovchinnikov
 
The State of PHPUnit
The State of PHPUnitThe State of PHPUnit
The State of PHPUnitEdorian
 
Javascript ES6 generators
Javascript ES6 generatorsJavascript ES6 generators
Javascript ES6 generatorsRamesh Nair
 
Java设置环境变量
Java设置环境变量Java设置环境变量
Java设置环境变量Zianed Hou
 
st_launcher: Tonel-based Smalltalk shell Scripts
 st_launcher: Tonel-based Smalltalk shell Scripts st_launcher: Tonel-based Smalltalk shell Scripts
st_launcher: Tonel-based Smalltalk shell ScriptsESUG
 
Jggug 2010 330 Grails 1.3 観察
Jggug 2010 330 Grails 1.3 観察Jggug 2010 330 Grails 1.3 観察
Jggug 2010 330 Grails 1.3 観察Tsuyoshi Yamamoto
 
Zabbix LLD from a C Module by Jan-Piet Mens
Zabbix LLD from a C Module by Jan-Piet MensZabbix LLD from a C Module by Jan-Piet Mens
Zabbix LLD from a C Module by Jan-Piet MensNETWAYS
 
Tests unitaires mock_kesako_20130516
Tests unitaires mock_kesako_20130516Tests unitaires mock_kesako_20130516
Tests unitaires mock_kesako_20130516SOAT
 

Tendances (20)

Paris js extensions
Paris js extensionsParis js extensions
Paris js extensions
 
Android Architecture Component in Real Life
Android Architecture Component in Real LifeAndroid Architecture Component in Real Life
Android Architecture Component in Real Life
 
JavaFX, because you're worth it
JavaFX, because you're worth itJavaFX, because you're worth it
JavaFX, because you're worth it
 
The report of JavaOne2011 about groovy
The report of JavaOne2011 about groovyThe report of JavaOne2011 about groovy
The report of JavaOne2011 about groovy
 
Architecture Components In Real Life Season 2
Architecture Components In Real Life Season 2Architecture Components In Real Life Season 2
Architecture Components In Real Life Season 2
 
Eddystone Beacons - Physical Web - Giving a URL to All Objects
Eddystone Beacons - Physical Web - Giving a URL to All ObjectsEddystone Beacons - Physical Web - Giving a URL to All Objects
Eddystone Beacons - Physical Web - Giving a URL to All Objects
 
The Ring programming language version 1.10 book - Part 92 of 212
The Ring programming language version 1.10 book - Part 92 of 212The Ring programming language version 1.10 book - Part 92 of 212
The Ring programming language version 1.10 book - Part 92 of 212
 
Beacons, Raspberry Pi & Node.js
Beacons, Raspberry Pi & Node.jsBeacons, Raspberry Pi & Node.js
Beacons, Raspberry Pi & Node.js
 
Введение в REST API
Введение в REST APIВведение в REST API
Введение в REST API
 
LISA QooxdooTutorial Slides
LISA QooxdooTutorial SlidesLISA QooxdooTutorial Slides
LISA QooxdooTutorial Slides
 
The State of PHPUnit
The State of PHPUnitThe State of PHPUnit
The State of PHPUnit
 
FRP: What does "declarative" mean
FRP: What does "declarative" meanFRP: What does "declarative" mean
FRP: What does "declarative" mean
 
Nantes Jug - Java 7
Nantes Jug - Java 7Nantes Jug - Java 7
Nantes Jug - Java 7
 
The State of PHPUnit
The State of PHPUnitThe State of PHPUnit
The State of PHPUnit
 
Javascript ES6 generators
Javascript ES6 generatorsJavascript ES6 generators
Javascript ES6 generators
 
Java设置环境变量
Java设置环境变量Java设置环境变量
Java设置环境变量
 
st_launcher: Tonel-based Smalltalk shell Scripts
 st_launcher: Tonel-based Smalltalk shell Scripts st_launcher: Tonel-based Smalltalk shell Scripts
st_launcher: Tonel-based Smalltalk shell Scripts
 
Jggug 2010 330 Grails 1.3 観察
Jggug 2010 330 Grails 1.3 観察Jggug 2010 330 Grails 1.3 観察
Jggug 2010 330 Grails 1.3 観察
 
Zabbix LLD from a C Module by Jan-Piet Mens
Zabbix LLD from a C Module by Jan-Piet MensZabbix LLD from a C Module by Jan-Piet Mens
Zabbix LLD from a C Module by Jan-Piet Mens
 
Tests unitaires mock_kesako_20130516
Tests unitaires mock_kesako_20130516Tests unitaires mock_kesako_20130516
Tests unitaires mock_kesako_20130516
 

Similaire à Non stop random2b

Play search-videos-html
Play search-videos-htmlPlay search-videos-html
Play search-videos-htmlpvhung20
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Librariesjeresig
 
C++ game development with oxygine
C++ game development with oxygineC++ game development with oxygine
C++ game development with oxyginecorehard_by
 
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...Sencha
 
Matching Game In Java
Matching Game In JavaMatching Game In Java
Matching Game In Javacmkandemir
 
Asynchronous Programming at Netflix
Asynchronous Programming at NetflixAsynchronous Programming at Netflix
Asynchronous Programming at NetflixC4Media
 
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 LearnedMark Hemmings
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?Ankara JUG
 
The Ring programming language version 1.9 book - Part 56 of 210
The Ring programming language version 1.9 book - Part 56 of 210The Ring programming language version 1.9 book - Part 56 of 210
The Ring programming language version 1.9 book - Part 56 of 210Mahmoud Samir Fayed
 
A re introduction to webpack - reactfoo - mumbai
A re introduction to webpack - reactfoo - mumbaiA re introduction to webpack - reactfoo - mumbai
A re introduction to webpack - reactfoo - mumbaiPraveen Puglia
 
Charla EHU Noviembre 2014 - Desarrollo Web
Charla EHU Noviembre 2014 - Desarrollo WebCharla EHU Noviembre 2014 - Desarrollo Web
Charla EHU Noviembre 2014 - Desarrollo WebMikel Torres Ugarte
 
the next web now
the next web nowthe next web now
the next web nowzulin Gu
 
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Webbeyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
beyond tellerrand: Mobile Apps with JavaScript – There's More Than WebHeiko Behrens
 
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...Applitools
 
Get Grulping with JavaScript Task Runners (Matt Gifford)
Get Grulping with JavaScript Task Runners (Matt Gifford)Get Grulping with JavaScript Task Runners (Matt Gifford)
Get Grulping with JavaScript Task Runners (Matt Gifford)Future Insights
 
Testing a 2D Platformer with Spock
Testing a 2D Platformer with SpockTesting a 2D Platformer with Spock
Testing a 2D Platformer with SpockAlexander Tarlinder
 
An Introduction to the World of Testing for Front-End Developers
An Introduction to the World of Testing for Front-End DevelopersAn Introduction to the World of Testing for Front-End Developers
An Introduction to the World of Testing for Front-End DevelopersFITC
 
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...Haris Mahmood
 

Similaire à Non stop random2b (20)

Play search-videos-html
Play search-videos-htmlPlay search-videos-html
Play search-videos-html
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries
 
C++ game development with oxygine
C++ game development with oxygineC++ game development with oxygine
C++ game development with oxygine
 
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...
 
Matching Game In Java
Matching Game In JavaMatching Game In Java
Matching Game In Java
 
Asynchronous Programming at Netflix
Asynchronous Programming at NetflixAsynchronous Programming at Netflix
Asynchronous Programming at Netflix
 
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 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?
 
A More Flash Like Web?
A More Flash Like Web?A More Flash Like Web?
A More Flash Like Web?
 
The Ring programming language version 1.9 book - Part 56 of 210
The Ring programming language version 1.9 book - Part 56 of 210The Ring programming language version 1.9 book - Part 56 of 210
The Ring programming language version 1.9 book - Part 56 of 210
 
A re introduction to webpack - reactfoo - mumbai
A re introduction to webpack - reactfoo - mumbaiA re introduction to webpack - reactfoo - mumbai
A re introduction to webpack - reactfoo - mumbai
 
Charla EHU Noviembre 2014 - Desarrollo Web
Charla EHU Noviembre 2014 - Desarrollo WebCharla EHU Noviembre 2014 - Desarrollo Web
Charla EHU Noviembre 2014 - Desarrollo Web
 
the next web now
the next web nowthe next web now
the next web now
 
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Webbeyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
beyond tellerrand: Mobile Apps with JavaScript – There's More Than Web
 
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
 
Play vs Rails
Play vs RailsPlay vs Rails
Play vs Rails
 
Get Grulping with JavaScript Task Runners (Matt Gifford)
Get Grulping with JavaScript Task Runners (Matt Gifford)Get Grulping with JavaScript Task Runners (Matt Gifford)
Get Grulping with JavaScript Task Runners (Matt Gifford)
 
Testing a 2D Platformer with Spock
Testing a 2D Platformer with SpockTesting a 2D Platformer with Spock
Testing a 2D Platformer with Spock
 
An Introduction to the World of Testing for Front-End Developers
An Introduction to the World of Testing for Front-End DevelopersAn Introduction to the World of Testing for Front-End Developers
An Introduction to the World of Testing for Front-End Developers
 
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...
 

Plus de phanhung20

Graph for Coulomb damped oscillation
Graph for Coulomb damped oscillationGraph for Coulomb damped oscillation
Graph for Coulomb damped oscillationphanhung20
 
Search videos with youtube api3
Search videos with youtube api3Search videos with youtube api3
Search videos with youtube api3phanhung20
 
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 clipsphanhung20
 
Search 500-video-clips
Search 500-video-clipsSearch 500-video-clips
Search 500-video-clipsphanhung20
 
Color ss2-pvh-bta1
Color ss2-pvh-bta1Color ss2-pvh-bta1
Color ss2-pvh-bta1phanhung20
 
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)phanhung20
 
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 chiphanhung20
 
Cau hoi-thi-catly-2014-thang11
Cau hoi-thi-catly-2014-thang11Cau hoi-thi-catly-2014-thang11
Cau hoi-thi-catly-2014-thang11phanhung20
 
Pvh 11-2014-btvl-a1
Pvh 11-2014-btvl-a1Pvh 11-2014-btvl-a1
Pvh 11-2014-btvl-a1phanhung20
 
Ly thuyetdosai so1
Ly thuyetdosai so1Ly thuyetdosai so1
Ly thuyetdosai so1phanhung20
 
Play audio-continuously
Play audio-continuouslyPlay audio-continuously
Play audio-continuouslyphanhung20
 
How to-save-video-list
How to-save-video-listHow to-save-video-list
How to-save-video-listphanhung20
 
Xem video-lien-tuc
Xem video-lien-tucXem video-lien-tuc
Xem video-lien-tucphanhung20
 
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-random2bphanhung20
 
Playing videos continously
Playing videos continously Playing videos continously
Playing videos continously phanhung20
 

Plus de phanhung20 (20)

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
 
How to-save-video-list
How to-save-video-listHow to-save-video-list
How to-save-video-list
 
Xem video-lien-tuc
Xem video-lien-tucXem video-lien-tuc
Xem video-lien-tuc
 
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
 

Non stop random2b

  • 1. 1 NONSTOP RANDOMLY PLAYING VIDEOS This is the next additional part of my writing, uploaded at the address: http://www.slideshare.net/phanhung20/playing-videos Pic. 1 Web page https://files.myopera.com/phanhung20/files/nonStopRandom2.html 1- Using the web: - Download two files: nonStopRandom2.html (14 KB) and myList2.js (7 KB) to your PC. Put them in the same folder. - The web should be viewed in Fire Fox, Chrome, Opera, Safari browsers. It works also in Ms. I. Explorer, but its layout is not good. - You can use the web for creating playlist of your favorite youtube videos. Remember that YouTube.com web does not allow us to embed all videos. So we need to test any video in our web, before saving it to the file “myList2.js”.
  • 2. 2 2- The functions of the web: - Playing videos continuously from the beginning of the list: Click button “Play All”. - Playing continuously, from any video in the list: Click the title of the chosen video. - Testing new videos: + Open two webs, our web and the page “youtube.com”. In youtube.com, if you like some video, copy its URL (left click in the address bar, then right click, choose “Copy”). Return to our page and paste the content to the box “URL of videos”. Then find another URL of the video you like in Youtube web and put it again in the box … +Click button “Show All New”. After that the “Alert box” will be shown some times. Each time, you should click “OK”. Please, do not make “mouse clicking” quite quickly, because the web needs to wait one or two seconds to retrieve the information from the Google’s gdata feeds web. As the results, we will see the “list of new videos”. Click this video to test if it could play or not as an embedded element. +All new videos are bounded with a button “Remove”. If you do not like some video, click this button to “throw it”. If you rethink and want to get the video back, click again in the button, that now is renamed as “Restore” .
  • 3. 3 - Making final new list and save it to the file “myList2.js”: + Click button “Make New List” and you will get the list ready. Just put the mouse cursor on the list, right click, choose “Select All”. Put the cursor in the “blue colored area”, right click, choose “Copy”. +Open the folder, where the file “myList2.js” is saved. Right click this file, choose “Open With …”, then choose “NotePad”. +Past the copied content to “myList2.js. Click “File”, “Save”. 3- Programming and the source code: There are in the html some specific functions: a- randomPlay(): First, it creates a randomly arranged integer numbers. Then all indexs of three arrays tit[i], vid[i] and dur[i] will be changed to fit the created order. b- yt(idenfier): To use this function, we need the ready to use javascript link: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> The function yt(indenfier) help us to retrieve information for the video (id, title, duration, the name of the upploader, how many times the video was viewed, description of the video …). function yt(fil) { urlst = "http://gdata.youtube.com/feeds/api/videos/"+ fil + "?v=2&alt=json" $.ajax({ url: urlst , dataType: "jsonp", success: function (data) {parseresults(data)} }); } c-getId1(): It take all URL’s that are in a “text area”. Extract Id (11 characters/numbers) from them and creates links to call the function yt(…) to form the final links with full, needed information. I have used here some code lines from the interesting web page: http://lasnv.net/foro/839/Javascript_parsear_URL_de_YouTube THE FULL SOURCE CODE <!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 Videos 2</title> <head>
  • 4. 4 <style> body{ background-color:#999; font-family:Arial; font-size:12px; } a { text-decoration:none; color:blue; } a:hover { text-decoration:underline; color: #0099ff; } #list1, #description, #list3, #list4{ width: 640px; /*850px*/ height: 130px; margin:0px; padding:0px; border:1px solid #666; text-align:left; overflow:auto; background-color:#ddd; line-height:150%; } </style> <script> function play(i){ c = 0; j = i; window.scrollTo(0,0); yt(vid[i]); last = vid.length - 1; obj = document.getElementById("player1"); stID = "http://www.youtube.com/embed/" + vid[i] + "?autoplay=1"; obj.setAttribute("src",stID); } function playId(idd, duu){ c = 0;
  • 5. 5 dur[j] = duu; window.scrollTo(0,0); yt(idd); last = vid.length - 1; obj = document.getElementById("player1"); stID = "http://www.youtube.com/embed/" + idd + "?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;} if (j>last){j=1;} play(j); } mytimer = setTimeout("count()",1000); } 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;} if (j>last){j=1;} play(j); } function endVid(){ clearTimeout(mytimer); st = "http://www.youtube.com/embed/ntGJ2vkLbIo?autoplay=0"; obj = document.getElementById("player1"); obj.setAttribute("src",st); obj = document.getElementById("vidTitle"); obj.innerHTML = ''; c = 0; j = 0; }
  • 6. 6 function sec(m,s){ return m*60 + s; } function hs(h,m,s){ // hour to second return (h*60 + m)*60 + s; } function t(ti){ tit.push(ti); } function v(vi){ vid.push(vi); } function d(du){ dur.push(du); } function quit(){ if(mytimer){ clearTimeout(mytimer); } } //Creating three arrays tit = []; vid = []; dur = []; k=0; tit[k]="" ; vid[k]="" ;dur[k]=0; t("Richard Abel - Spanish Eyes") ; v("ntGJ2vkLbIo");d(183); t("CUANDO SALI DE CUBA- SUSANA PEÑA"); v("9CLAAJYRo-I");d(95); t("FRANCK POURCELL - BESAME MUCHO"); v("RK208ZT82Is");d(sec(3,12)); // In the youtube.com page "franck pourcel besame mucho" // you see: duration of the video is 3:12. //Function sec(3,12) will return 192 seconds. t("FRANCIS GOYA - UNCHAINED MELODY"); v("6OiY_UYSB_c");d(298);
  • 7. 7 t("NO MATTER WHAT _ Francis Goya & RICHARD CLAYDERMAN") ; v("NPer39-JSr0");d(214); t("The old rowan tree") ; v("wmt16uvPDqg");d(161); var oldLength = 0; function init(){ oldLength = vid.length; newInit(); } function newInit(){ ss = ''; len = vid.length; for (i=1;i<len;i++){ xx = '<li><a href="#" onclick="j =' + i +'; play(' + i+');">'+ tit[i]+ '</a><br>'; // them j = i; ss = ss + xx; } obj = document.getElementById('list1'); obj.innerHTML = '<ol><br>' + ss + '</ol>'; } //////////////////// - random var retArr = new Array(); function randomIntegers(n) { var tmpArr = new Array(); // Create array with numbers 0,1,2,..,n for (var i=0; i<n; i++) tmpArr[i] = i; // Randomize numbers in array st=""; for (var i=0; i<n-1; i++) { var ranIndex = Math.floor(Math.random()*tmpArr.length); retArr[i] = tmpArr[ranIndex]; st = st + retArr[i]+"; ";
  • 8. 8 tmpArr[ranIndex] = tmpArr[tmpArr.length-1]; tmpArr.pop(); } retArr[n-1] = tmpArr[0]; // alert('retArr[n-1] = '+ retArr[n-1]+'n'+ st); return retArr; } var tempv = new Array(); var tempd = new Array(); var tempt = new Array(); function randomPlay() { len = vid.length-1; //alert('len = '+len); randomIntegers(len); for (var k = 1; k <=len; k++){ tempv[k] = vid[k] ; tempd[k] = dur[k] ; tempt[k] = tit[k] ; } for (var j = 0; j <len; j++){ vid[j+1] = tempv[retArr[j]+1]; dur[j+1] = tempd[retArr[j]+1]; tit[j+1] = tempt[retArr[j]+1]; } init(); // test j=1; play(j); } function getId1(){ obj = document.getElementById("area1"); st = obj.value; n = st.indexOf("#"); if(n>0){st = st.replace(/#/g,'');} // xoa het # arr = []; idd = []; st = st.replace(/http/g,"#http"); // alert(st); test
  • 9. 9 arr = st.split("#"); len = arr.length - 1; var regExp = /^.*((youtu.be/)|(v/)|(/u/w/)|(embed/)|(watch?))??v?=?([^#&?]*).*/; ss = ""; for(i=1;i<=len;i++){ arr[i] = $.trim(arr[i]); var match = arr[i].match(regExp); if (match&&match[7].length==11){ var mm = match[7]; idd[i] = mm; ss = ss + "<li><a href='#' onclick='playId("" + mm + "");'>" + mm + "</a></li>"; } else{ alert("Url incorrect"); } } for(i=1;i<=len;i++){ alert("Video Id: " + idd[i]); yt1(idd[i]); } } function yt(fil) { urlst = "http://gdata.youtube.com/feeds/api/videos/"+ fil + "?v=2&alt=json" $.ajax({ url: urlst , dataType: "jsonp", success: function (data) {parseresults(data)} }); } function parseresults(data) { var id = data.entry.id.$t; len = id.length; id = id.substring(len-11,len); var title = data.entry.title.$t; var duration = data.entry.media$group.yt$duration.seconds;
  • 10. 10 var description = data.entry.media$group.media$description.$t; var viewcount = data.entry.yt$statistics.viewCount; var author = data.entry.author[0].name.$t; $('#vidTitle').html("<b>" + title+"</b>"); $('#description').html('<b>ID</b>: '+ id + '&nbsp;&nbsp;<b>Duration</b>: '+duration+ '&nbsp;&nbsp;<b>Author</b>: ' + author + '&nbsp;&nbsp;<b>Views</b>: ' + viewcount + '<br><b>Description</b>: ' + description ); title1 = title.replace(/"/g, '"'); mm = 't("'+ title1 + '");n'+ 'v("'+ id + '"); d(' + duration + ');n' ; document.getElementById("coding").value = mm; } function yt1(fil) { urlst = "http://gdata.youtube.com/feeds/api/videos/"+ fil + "?v=2&alt=json" $.ajax({ url: urlst , dataType: "jsonp", success: function (data) {parseresults1(data)} }); } function parseresults1(data) { var id = data.entry.id.$t; len = id.length; id = id.substring(len-11,len); var title = data.entry.title.$t; var duration = data.entry.media$group.yt$duration.seconds; var description = data.entry.media$group.media$description.$t; var viewcount = data.entry.yt$statistics.viewCount; var author = data.entry.author[0].name.$t; ////////// hom nay tit.push(title); vid.push(id); dur.push(duration);
  • 11. 11 newInit(); ///////// het hom nay title1 = title.replace(/"/g, '"'); mm = 't("'+ title1 + '");n'+ 'v("'+ id + '"); d(' + duration + ');n' ; document.getElementById("coding").value = mm; curIm = "http://img.youtube.com/vi/" + id + "/default.jpg" ; str = '<a href="#" onclick="playId(''+id+'','+ duration + ');" style="float:left"><img src="'+ curIm + '" width = THUMBNAIL_WIDTH height= THUMBNAIL_HEIGHT >'+ '<div style="float:left"></a>' + '&nbsp;&nbsp;&nbsp;<input type="button" value="Remove" onclick="removeCur(''+ id +'',this)" >'+ '<div id="'+ id +'" style="display:block;">&nbsp;<br>&nbsp;t("' + title1 +'");<br>' + '&nbsp;v("' + id +')";&nbsp;&nbsp;d(' + duration + ');'+ '</div></div>' + '<br style="clear:both"><hr style="margin-top:2px;margin-bottom:2px;">' ; obj = document.getElementById("list4"); obj.innerHTML = obj.innerHTML + str; } function removeCur(idd, me){ if(me.value=="Remove"){ document.getElementById(idd).style.display = "none"; me.setAttribute("value", "Restore"); } else{ document.getElementById(idd).style.display = "block"; me.setAttribute("value", "Remove"); } } function MakeNewList(){ ar1 = []; mm = "" ; obj = document.getElementById("list4"); // "newVideos" ar1 = obj.getElementsByTagName("div"); for(i=0;i<ar1.length;i++){ if(ar1[i].style.display == 'block'){
  • 12. 12 mm = mm + ar1[i].innerText; } } document.getElementById("area6").value = mm; } function clearAllNewxx(){ obj = document.getElementById("list4"); obj.innerHTML = ""; } function clearAllNew(){ len1 = vid.length; if(len1 > oldLength){ delta = len1 - oldLength; vid.splice(oldLength,delta); tit.splice(oldLength,delta); dur.splice(oldLength,delta); obj = document.getElementById("list4"); obj.innerHTML = ""; newInit(); } } </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="myList2.js"></script> </head> <!--/////////////////////////////////////////////////////////--> <body onload="init()" onload="quit()"> <div align="center"> <iframe id="player1" width="835" height="480" src="http://www.youtube.com/embed/ntGJ2vkLbIo?autoplay=0" frameborder="0" allowfullscreen ></iframe> <br> You are watching: <br><span id="vidTitle"></span> <br> <input type="button" value="Play All" onclick="count()">&nbsp;
  • 13. 13 <input type="button" value="End" onclick="endVid()">&nbsp; <input type="text" id="showSeconds" value="0/dur" size=28 style="text-align:center">&nbsp; <input type="button" value="Random" onclick="randomPlay()">&nbsp; <input type="button" value="Back" onclick = "backVideo();">&nbsp; <input type="button" value="Next" onclick="nextVideo()"> <br> <br> <div style="left:30px;"> <!------------------> <div id="description" style="height:120px;padding:20px;width:340px;float: left;margin-left:75px;"> </div> <div id="list1" style="float:left;width:460px;height:160px;"> </div> <!-----------------> </div> <br style="clear:both;"> <br> <b>TEST AND ADD NEW VIDEO</b> <br> <br> <textarea id="area1" style="width:700px;height:140px;"> http://www.youtube.com/watch?v=Kasq1bDH_sU http://www.youtube.com/watch?v=5UjihJluQtk http://www.youtube.com/watch?v=oW2SDwSJrLg </textarea> <br> <br> <input type="button" value="Show All New" onclick="getId1()">&nbsp; <input type="button" value="Clear All New" onclick="clearAllNew()"> <br> <div id="list3" style="display:none;"></div> <br> <div id="list4" style="width:700px;height:240px;"></div> <textarea id="coding" style="width:700px;height:140px;display:none;"> </textarea> <br> <input type="button" value="Make New List" onclick="MakeNewList()" style="margin-bottom:4px;"> <br>
  • 14. 14 <br> <textarea id="area6" cols=86 rows=9 style="padding:0px;"> </textarea> <br> <br> <a href="https://files.myopera.com/phanhung20/files/myList1.js"> Download js file:</a>https://files.myopera.com/phanhung20/files/myList1.js <br> Right click this link. Choose "Copy Linked Content As ..." <br> <br> <iframe src="http://www.slideshare.net/slideshow/embed_code/21892741" width="835" height="560" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/phanhung20/playing-videos" title="Playing videos" target="_blank">Playing videos</a> </strong> from <strong><a href="http://www.slideshare.net/phanhung20" target="_blank">phanhung20</a></strong> </div> <br> Uploaded May 25, 2013: <a href="https://files.myopera.com/phanhung20/files/nonStopRandom2.html"> https://files.myopera.com/phanhung20/files/nonStopRandom2.html</a> <br> </div> <!-- center --> </body> </html>