<!DOCTYPE html>
<html>
<head>x
<title>Dynamic Javascript and the YouTube API - Thanks to https://developers.google.com/youtube/iframe_api_reference ... RJM Programming - May, 2018</title>
</head>
<body><details style=display:inline-block; id=dprex><summary id=prex></summary></details><a onclick="location.href='#dshuffle';" id=ashuffle title=Shuffles style='display:block;font-size:8px;cursor:pointer;text-decoration:none;visibility:hidden;'>🔀</a>

<table border=1 style=width:100%;height:100vh;>
<tr><td id="vplayer1"></td><td id="vplayer2"></td><td id="vplayer3"></td></tr>
<tr><td id="vplayer4"></td><td id="vplayer5"></td><td id="vplayer6"></td></tr>
<tr><td id="vplayer7"></td><td id="vplayer8"></td><td id="vplayer9"></td></tr>
<tr style=display:none;><td id="vplayer10"></td><td id="vplayer11"></td><td id="vplayer12"></td></tr>
<tr style=display:none;><td id="vplayer13"></td><td id="vplayer14"></td><td id="vplayer15"></td></tr>
<tr style=display:none;><td id="vplayer16"></td><td id="vplayer17"></td><td id="vplayer18"></td></tr>
<tr style=display:none;><td id="vplayer19"></td><td id="vplayer20"></td><td id="vplayer21"></td></tr>
<tr style=display:none;><td id="vplayer22"></td><td id="vplayer23"></td><td id="vplayer24"></td></tr>
</table>
<div id=dshuffle style=visibility:hidden;display:inline-block;><a onclick="location.href='#ashuffle';" id=zshuffle title=Top style='display:block;font-size:8px;cursor:pointer;text-decoration:none;visibility:hidden;'>🎥</a><br><select id=sshuffle style=display:inline-block; multiple><option value=''>Single selections shuffle with your choice first played (for up to 9 slots available), below ...</option></select> <input onclick=process(this); type=button id=bshuffle style=display:inline-block;background-color:yellow; value=Shuffle></input></div>
<script>
var numsleeps=700000;
var ix=0;
var d=new Date();
var marks=[new Date(), new Date()];
var imark=0;
var bigwhich=-1;
var oktomarkit=false;
var whichone=0;
var allok=0;
var eventtargetid='';
var lastallok='';
var lastplay='';

function process(bsin) {
var jj=0, mbo='', mlist='', mdelim='';
var sin=document.getElementById(bsin.id.replace('b','s'));
for (var i=0; i<sin.options.length; i++) {
if (sin.options[i].selected) {
if (sin.options[i].value != '') {
jj++;
mbo=sin.options[i].value.split('|')[0];
mlist+=mdelim + sin.options[i].value.split('|')[0];
mdelim=',';
}
}
}
if (jj == 1) {
location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=') + '&mustbeone=' + encodeURIComponent(mbo)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('/&','/?');
} else if (jj > 1) {
location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=').replace('videolist=','videoxxxlist=') + '&videolist=' + encodeURIComponent(mlist)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('/&','/?');
}
}

function shuffle(array) { // thanks to https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
var currentIndex = array.length, temporaryValue, randomIndex;

// While there remain elements to shuffle...
while (0 !== currentIndex) {

// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}

return array;
}

var scont='<option value="">Single selections shuffle with your choice first played (for up to 9 slots available), below ...</option>';
var splaycnt=0;
var accountedFor=0;
var clickscore=[];
var isoks=[];
var vplayer=[];
var yid=['zPv0S1-ETdI','qYf35nBq8Oo','Se3kxManWUY','i7hk-TupE5g','LnK0tnaNUag','dbH4Amzn-Rk','BL-Jg7CyqLQ','0v7Ea7kg2gA','NRjWEE0hmjQ'];
yid=['ARt9HV9T0w8#GG','OAfxs0IDeMs#Heart','huavJMGUbiI#BB'];
yid=location.search.split('videolist=')[1] ? eval("['" + decodeURIComponent(location.search.split('videolist=')[1].split('&')[0]).replace(/\,/g,"','") + "']") : shuffle(['h2r59-Xmge4','yT1iDKkZNYU','S-u6qdeaPoE','Nm-ISatLDG0','Gs069dndIYk','dwxjpIJm9JM','8iwBM_YB1sE','CS9OO0S5w2k','I_izvAbhExY','xFrGuyw1V8s','piIJk0CFjUo','gQ8O9SidZbs','_QNEf9oGw8o','1ff29VSvP_s','4-Vz6tNfV1Y','Zi_XLOBDo_Y','xfmZRiePkEM','iPUmE-tne5U','m5y2GaW0MZA','yioNn7XS-bw','XKuJUxGntRI','vsBak0oCgdY','eBpYgpF1bqQ','DVDCNmdi7QI']); // T6fVDAjs9f0 Q8xuUdI1an0']); // https://www.youtube.com/watch?v=DVDCNmdi7QI
var mbo=location.search.split('mustbeone=')[1] ? decodeURIComponent(location.search.split('mustbeone=')[1].split('&')[0]) : '';

if (mbo != '') {
var oyid=[mbo];
for (var iu=0; iu<yid.length; iu++) {
if (yid[iu] != mbo) {
oyid.push(yid[iu]);
}
}
yid=oyid;
}

var dostop=true;
var done=[];
var stopthese=[];
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
//var vplayer1, vplayer2;
function onYouTubeIframeAPIReady() {
document.body.style.cursor='progress';
var firstonly=" playerVars: { 'autoplay': 1 }, ";
if (document.URL.indexOf('?') == -1) { firstonly=''; }
for (var ii=1; ii<=yid.length; ii++) {
done.push(false);
if (eval('' + clickscore.length) <= eval(-1 + ii)) {
clickscore.push(0);
isoks.push(false);
}
vplayer.push(eval("new YT.Player('vplayer" + ii + "', { height: '260', width: '33%', videoId: '" + yid[-1 + ii] + "'," + firstonly + " events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError }})"));
//vplayer[eval(-1 + eval('' + vplayer.length))].addEventListener('onError', onPlayerError);
firstonly='';
}
}

// pre-4. Are we being supervised.
function onClickReady(event, whichone) {
console.log('at onClickReady with ' + whichone);
if (oktomarkit) { clickscore[eval('' + whichone)]++; }
bigwhich=whichone;
if (oktomarkit) { markit(); }
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
var dis, cti, gvd, uri, jis, prv='', iyi=0, huht='';
uri=event.target.getVideoUrl();
jis=yid.indexOf(uri.split('=')[1].split('&')[0]);
dis=event.target.getDuration();
cti=event.target.getCurrentTime();
gvd=event.target.getVideoData().title;
yid[jis]+='|' + dis + '|' + cti + '|' + gvd;
//alert(yid[jis]);
splaycnt++;
if (splaycnt > 9) {
if (scont.indexOf(yid[jis]) == -1) {
prv=scont;
scont=prv.split('</option>')[0] + '</option><option value="' + yid[jis] + '">' + gvd + '</option>' + prv.replace(prv.split('</option>')[0] + '</option>','');
}
} else {
scont+='<option value="' + yid[jis] + '">' + gvd + '</option>';
if (splaycnt == 9 && yid.length > 9) {
for (iyi=0; iyi<yid.length; iyi++) {
if (scont.indexOf(yid[iyi]) == -1) {
try {
huht=yplayer[splaycnt].getVideoData().title;
prv=scont;
scont=prv.split('</option>')[0] + '</option><option value="' + yid[iyi] + '">' + gvd + '</option>' + prv.replace(prv.split('</option>')[0] + '</option>','');
} catch(rtde) {
}
}
}
}
}
// vplayer[eval(-1 + eval(0 + event.target.id))].addEventListener('onError', onPlayerError);
if (('' + dis) != '0') { isoks[eval(-1 + eval('' + event.target.id))]=true; } else if (1 == 3) { alert('video ' + eval(-1 + eval('' + event.target.id)) + ' isunavailable'); }
try {
event.target.playVideo();
} catch(gfdhg) { }
if (1 == 4) {
if (document.title.substring(0,1) > '9') {
document.title='' + eval(-1 + eval('' + event.target.id)) + ':' + dis;
} else {
document.title+=' ' + eval(-1 + eval('' + event.target.id)) + ':' + dis;
}
}
accountedFor++;
}

function onPlayerError(e) {
//alert('oops');
if (oktomarkit) {
//alert('allok=' + allok + ' and errorCode=' + ('' + e.data));
if (('' + e.data) == '100') {
//play next video
//alert('allok=' + allok);
if (allok <= 0) { vplayer[eval(-1 + eval(1 + eventtargetid) % eval('9'))].playVideo(); }
}
}
}

// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) { //, whichone) {
//alert('event.target.id=' + event.target.id);
eventtargetid='' + event.target.id;
whichone=eval(-1 + eval('' + event.target.id));
console.log('at onClickReady with ' + whichone + ' enjoy watching and listening to ' + event.target.getVideoData().title);
if (oktomarkit) {
if (event.data == YT.PlayerState.PLAYING) {
if (('' + lastallok) != ('' + event.target.id)) {
allok++;
lastallok=('' + event.target.id);
}
if (document.getElementById('prex').innerHTML.trim().replace(/\./g,'') == '') {
document.getElementById('dprex').style.position='fixed';
document.getElementById('dprex').style.backgroundColor='yellow';
document.getElementById('dprex').style.border='1px dotted red';
document.getElementById('dprex').style.opacity='0.8';
document.getElementById('dprex').style.fontColor='blue';
document.getElementById('dprex').style.fontSize='18px';
document.getElementById('dprex').style.top='41%';
document.getElementById('dprex').style.left='0px';
document.getElementById('dprex').style.zIndex='20';
//} else {
// alert(document.getElementById('prex').innerHTML.trim().replace(/\./g,''));
}
document.getElementById('prex').innerHTML='Enjoy watching and listening to ' + event.target.getVideoData().title + ' ... ' + d;
document.getElementById('dprex').innerHTML+='Enjoy watching and listening to ' + event.target.getVideoData().title + '<br>';
} else if (document.getElementById('prex').innerHTML.trim().replace(/\./g,'') != '' && event.data == YT.PlayerState.PAUSED) {
if (eval('' + allok) > 0) {
allok--;
}
document.getElementById('prex').innerHTML='So long ' + event.target.getVideoData().title + ' ... ' + d;
document.getElementById('dprex').innerHTML+='So long ' + event.target.getVideoData().title + '<br>';
} else if (document.getElementById('prex').innerHTML.trim().replace(/\./g,'') != '' && event.data == YT.PlayerState.ENDED) {
if (eval('' + allok) > 0) {
allok--;
}
document.getElementById('prex').innerHTML='So long sweet ' + '' + event.target.getVideoData().title + ' ... ' + d;
document.getElementById('dprex').innerHTML+='So long sweet ' + event.target.getVideoData().title + '<br>';
if (allok <= 0) {
var ione=1;
eventtargetid='' + eval(eval(-1 + eval(ione + eval('' + event.target.id))) % eval('9'));
if (('' + eventtargetid).indexOf('-') != -1) { eventtargetid='0'; }
while (!isoks[eval('' + eventtargetid)]) {
ione++;
eventtargetid='' + eval(eval(-1 + eval(ione + eval('' + event.target.id))) % eval('9'));
if (('' + eventtargetid).indexOf('-') != -1) { eventtargetid='0'; }
//alert('moving onto ' + eventtargetid);
}
lastplay="vplayer[" + eventtargetid + "].playVideo();";
vplayer[eval('' + eventtargetid)].playVideo();
ione++;
eventtargetid='' + eval(eval(-1 + eval(ione + eval('' + event.target.id))) % eval('9'));
if (('' + eventtargetid).indexOf('-') != -1) { eventtargetid='0'; }
lastplaytwo="vplayer[" + eval('' + eventtargetid) + "].playVideo();";
}
}
clickscore[eval('' + whichone)]++;
}
bigwhich=whichone;
if (oktomarkit) { markit(); }
if (event.data == YT.PlayerState.PLAYING) { // && !done) {
document.getElementById('vplayer' + event.target.id).title=event.target.getVideoData().title;
if (dostop) {
stopthese.push(event.target);
setTimeout(stopVideo, 6000);
}
//done = true;
}
}

function undostop() {
if (yid.length > 9) {
document.getElementById('ashuffle').style.visibility='visible';
document.getElementById('zshuffle').style.visibility='visible';
document.getElementById('sshuffle').size=eval(-1 + eval('' + scont.split('</option>').length));
document.getElementById('sshuffle').innerHTML=scont;
document.getElementById('dshuffle').style.visibility='visible';
document.body.style.cursor='pointer';
setTimeout(oktomarkittrue, 1000);
}
dostop=false;
if (eval('' + accountedFor) >= eval('' + yid.length)) { setTimeout(oktomarkittrue, 1000); }
}

function stopVideo() {
stopthese[0].stopVideo();
stopthese.shift();
}

function oktomarkittrue() {
oktomarkit=true;
//document.body.style.cursor='pointer';
}

function sleep(ms) { // thanks to https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
//console.log(numsleeps + ' Taking a break...' + d);
await sleep(2000);
d=new Date();
if (allok <= 1 && document.getElementById('prex')) {
if (document.getElementById('prex').innerHTML.trim().replace(/\./g,'') != '') {
if (lastplay != '' && document.getElementById('prex').innerHTML.indexOf('....') != -1 && document.getElementById('prex').innerHTML.indexOf('So long ') == 0) {
document.getElementById('prex').innerHTML+='.';
eval(lastplay);
lastplay="";
} else {
document.getElementById('prex').innerHTML+='.';
}
}
}
//console.log(numsleeps + ' Two seconds later, showing sleep in a loop...' + d);

// Sleep in loop
for (let i = 0; i < 5; i++) {
if (i === 3) {
await sleep(2000);
d=new Date();
//console.log(numsleeps + ' ' + d);

}
}
numsleeps--;
if (('' + numsleeps) != '0' && ('' + numsleeps).indexOf('-') == -1) { setTimeout(demo, 1); }
}

function betw() {
var seconds = (marks[1].getTime() - marks[0].getTime()) / 1000;
//document.title+=' ' + 'It took ' + seconds + ' seconds (from ' + marks[0] + ' to ' + marks[1] + ') between clicks.';
//numsleeps=0;
}

function markit() {
d=new Date();
marks[imark]=d;
imark++;
console.log('mark ' + imark + ': ' + d);
if (imark == 2) { setTimeout(betw, 800); imark=0; }
}

demo();

setTimeout(undostop, 9000);

</script>
</body>
</html>