This document provides instructions for using a web page to play YouTube videos in a random, continuous playlist. It includes:
1) Directions to download and view the web page files in a browser.
2) An explanation of the web page's functions like playing all videos, adding new videos, and saving an updated playlist.
3) An overview of the programming and JavaScript functions used to retrieve video data and play videos randomly.
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>
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 +
' <b>Duration</b>: '+duration+
' <b>Author</b>: ' + author +
' <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);