Non stop random2b

  • 1,410 views
Uploaded on

This writing is the next

This writing is the next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,410
On Slideshare
0
From Embeds
0
Number of Embeds
10

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 1NONSTOP RANDOMLY PLAYING VIDEOSThis is the next additional part of my writing, uploaded at the address:http://www.slideshare.net/phanhung20/playing-videosPic. 1 Web page https://files.myopera.com/phanhung20/files/nonStopRandom2.html1- Using the web:- Download two files: nonStopRandom2.html (14 KB) and myList2.js (7 KB) to your PC. Putthem 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 thatYouTube.com web does not allow us to embed all videos. So we need to test any video in ourweb, before saving it to the file “myList2.js”.
  • 2. 22- 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 likesome 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 anotherURL 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. Eachtime, you should click “OK”. Please, do not make “mouse clicking” quite quickly, becausethe web needs to wait one or two seconds to retrieve the information from theGoogle’s gdata feeds web. As the results, we will see the “list of new videos”. Click thisvideo 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 againin 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 cursoron the list, right click, choose “Select All”. Put the cursor in the “blue colored area”, rightclick, choose “Copy”.+Open the folder, where the file “myList2.js” is saved. Right click this file, choose “OpenWith …”, 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 threearrays 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, thename 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) fromthem and creates links to call the function yt(…) to form the final links with full, neededinformation. I have used here some code lines from the interesting web page:http://lasnv.net/foro/839/Javascript_parsear_URL_de_YouTubeTHE 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. 5dur[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. 6function sec(m,s){return m*60 + s;}function hs(h,m,s){ // hour to secondreturn (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 arraystit = []; 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. 7t("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>;}//////////////////// - randomvar retArr = new Array();function randomIntegers(n) {var tmpArr = new Array();// Create array with numbers 0,1,2,..,nfor (var i=0; i<n; i++)tmpArr[i] = i;// Randomize numbers in arrayst="";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. 8tmpArr[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();// testj=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. 9arr = 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. 10var 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 naytit.push(title);vid.push(id);dur.push(duration);
  • 11. 11newInit();///////// het hom naytitle1 = 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. 12mm = 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_sUhttp://www.youtube.com/watch?v=5UjihJluQtkhttp://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:1pxsolid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreenmozallowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <ahref="http://www.slideshare.net/phanhung20/playing-videos" title="Playing videos"target="_blank">Playing videos</a> </strong> from <strong><ahref="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>