<!doctype html>
<html>
<head>
<title>YouTube List - RJM Programming - December, 2018 ... thanks to https://developers.google.com/youtube/player_parameters</title>
<script type='text/javascript'>
var hurl='//www.youtube.com/embed';
var hurlv='https://www.youtube.com/v';
//var eurl='M7lc1UVf-VE?autoplay=1&origin=https://www.rjmprogramming.com.au&enablejsapi=1';
var eurl=location.search.split('eurl=')[1] ? location.search.split('eurl=')[1].split('&')[0] + '?autoplay=1&origin=https://www.rjmprogramming.com.au&enablejsapi=1' : 'M7lc1UVf-VE?autoplay=1&origin=https://www.rjmprogramming.com.au&enablejsapi=1';
var eurlv=location.search.split('eurlv=')[1] ? decodeURIComponent(location.search.split('eurlv=')[1].split('&')[0]) : '';

var atend=location.search.split('atend=')[1] ? decodeURIComponent(location.search.split('atend=')[1].split('&')[0]) : '';
var sval=location.search.split('sval=')[1] ? decodeURIComponent(location.search.split('sval=')[1].split('&')[0]) : '/';
var murl=sval;

var gij=location.search.split('ij=')[1] ? decodeURIComponent(location.search.split('ij=')[1].split('&')[0]) : '';

var clicktwo=0;

var pla=[];
var plas=[], plae=[];

var player = null;
var done = false;
var startTime = -1;
var evtar = null;

function onYouTubeIframeAPIReady() {
var nn=false;
if (evtar != null) {
nn=true;
//document.getElementById('player').innerHTML='';
//player = null;
//evtar=null;
}

if (document.URL.indexOf('playlist=') != -1) {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: eurl.split('?')[0],
playerVars: {
listType:'playlist',
list: eurlv,
autoplay: 0,
controls: 1
},
events: {
'onReady': onReady,
'onStateChange': onStateChange
}
});
} else {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: eurl.split('?')[0],
events: {
'onReady': onReady,
'onStateChange': onStateChange
}
});
}
//document.title='player not null';
//if (nn) {
// setTimeout(andthen, 3000); //loadVideo(eurl.split('?')[0]);
//}
}

function andthen() {
//loadVideo(eurl.split('?')[0]);
}

function submitLoadVideoById() {
var videoId = document.getElementById("loadVideoById").value;
player.loadVideoById({videoId: videoId});
}

function submitLoadVideoByURL() {
var url = document.getElementById("loadVideoByUrl").value;
player.loadVideoByUrl({mediaContentUrl: url});
}

function submitLoadPlaylist() {
var playlistString = document.getElementById("loadPlaylist").value;
var playlist = playlistString.split(',');
//if (player) { alert(playlist[0]); }
//document.getElementById('player').style.display='block';
player.loadPlaylist({playlist: playlist});
}

function submitCueVideoById() {
var videoId = document.getElementById("cueVideoById").value;
player.cueVideoById({videoId: videoId});
}

function submitCueVideoByURL() {
var url = document.getElementById("cueVideoByUrl").value;
player.cueVideoByUrl({mediaContentUrl: url});
}

function submitCuePlaylist() {
var playlistString = document.getElementById("cuePlaylist").value;
var playlist = playlistString.split(',');
//document.getElementById('player').style.display='block';
player.cuePlaylist({playlist: playlist});
}

function getTime() {
var d = new Date();
var currentTime = d.getTime();
if (startTime == -1)
startTime = currentTime;
var elapsed = currentTime - startTime;
var theTime = " (" + elapsed + " ms)";
return theTime;
}

// Log state changes
function onStateChange(event) {
var ki=0, ski='';
var time = getTime();
var state = "undefined";
switch (event.data) {
case YT.PlayerState.UNSTARTED:
state= "unstarted";
break;
case YT.PlayerState.ENDED:
state = "ended";
break;
case YT.PlayerState.PLAYING:
state = "playing";
if (gij != '') {
if (parent.document) {
if (parent.document.getElementById('sums' + gij)) {
if (parent.document.getElementById('prog' + gij)) {
if (parent.document.getElementById('sums' + gij).innerHTML.indexOf(' ' + event.target.getVideoData().title) == -1 || parent.document.getElementById('sums' + gij).innerHTML.indexOf(' -0 ') != -1) {
//parent.document.title+='' + gij + ': ' + event.target.getDuration();
parent.document.getElementById('prog' + gij).max=('' + event.target.getDuration()).split('.')[0];
if (parent.document.getElementById('star' + gij).innerHTML == '0') {
ski='<select id=sele' + gij + ' onchange=prespanize(this);></select>';
for (ki=0; ki<=eval(('' + event.target.getDuration()).split('.')[0]); ki++) {
ski=ski.replace('</select>','<option value=' + ki + '>' + ki + '</option></select>');
}
//alert(ski);
parent.document.getElementById('star' + gij).innerHTML=ski;
}
if (parent.document.getElementById('sums' + gij).innerHTML.indexOf(' -0 ') != -1) {
parent.document.getElementById('sums' + gij).innerHTML=parent.document.getElementById('sums' + gij).innerHTML.replace(' -0 ', (' ' + event.target.getDuration()).split('.')[0] + ' ');
gij='';
} else if (parent.document.getElementById('sums' + gij).innerHTML.indexOf(' ' + event.target.getVideoData().title) == -1) {
parent.document.getElementById('sums' + gij).innerHTML+=(' ' + event.target.getDuration()).split('.')[0] + ' ';
parent.document.getElementById('sums' + gij).innerHTML+=' ' + event.target.getVideoData().title;
parent.document.getElementById('sums' + gij).innerHTML=parent.document.getElementById('sums' + gij).innerHTML.replace(' -0 ', ' ');
gij='';
}
} else {
gij='';
}
}
}
}
}
break;
case YT.PlayerState.PAUSED:
state = "paused";
if (gij != '' && 1 == 1) {
if (parent.document) {
if (parent.document.getElementById('sums' + gij)) {
if (parent.document.getElementById('prog' + gij)) {
try {
//parent.document.title+='' + gij + ': ' + event.target.getDuration();
parent.document.getElementById('prog' + gij).max=('' + event.target.getDuration()).split('.')[0];
if (parent.document.getElementById('star' + gij).innerHTML == '0') {
ski='<select id=sele' + gij + ' onchange=prespanize(this);></select>';
for (ki=0; ki<=eval(('' + event.target.getDuration()).split('.')[0]); ki++) {
ski=ski.replace('</select>','<option value=' + ki + '>' + ki + '</option></select>');
}
//alert(ski);
parent.document.getElementById('star' + gij).innerHTML=ski;
}

parent.document.getElementById('sums' + gij).innerHTML+=(' ' + event.target.getDuration()).split('.')[0] + ' ';
} catch(ee) {
if (parent.document.getElementById('sums' + gij).innerHTML.indexOf(' -0 ') == -1) {
parent.document.getElementById('sums' + gij).innerHTML+=' -0 ';
}
}
}
try {
if (parent.document.getElementById('sums' + gij).innerHTML.indexOf(' ' + event.target.getVideoData().title) == -1) {
parent.document.getElementById('sums' + gij).innerHTML+=' ' + event.target.getVideoData().title;
}
} catch(eee) {
}
//gij='';
}
}
}
break;
case YT.PlayerState.BUFFERING:
state = "buffering";
if (gij != '' && 1 == 1) {
if (parent.document) {
if (parent.document.getElementById('sums' + gij)) {
if (parent.document.getElementById('prog' + gij)) {
try {
//parent.document.title+='' + gij + ': ' + event.target.getDuration();
parent.document.getElementById('prog' + gij).max=('' + event.target.getDuration()).split('.')[0];
if (parent.document.getElementById('star' + gij).innerHTML == '0') {
ski='<select id=sele' + gij + ' onchange=prespanize(this);></select>';
for (ki=0; ki<=eval(('' + event.target.getDuration()).split('.')[0]); ki++) {
ski=ski.replace('</select>','<option value=' + ki + '>' + ki + '</option></select>');
}
//alert(ski);
parent.document.getElementById('star' + gij).innerHTML=ski;
}

parent.document.getElementById('sums' + gij).innerHTML+=(' ' + event.target.getDuration()).split('.')[0] + ' ';
} catch(ee) {
if (parent.document.getElementById('sums' + gij).innerHTML.indexOf(' -0 ') == -1) {
parent.document.getElementById('sums' + gij).innerHTML+=' -0 ';
}
}
}
try {
if (parent.document.getElementById('sums' + gij).innerHTML.indexOf(' ' + event.target.getVideoData().title) == -1) {
parent.document.getElementById('sums' + gij).innerHTML+=' ' + event.target.getVideoData().title;
}
} catch(eee) {
}
//gij='';
}
}
}
break;
case YT.PlayerState.CUED:
state = "video cued";
document.getElementById('ytplayer').style.display='none';
document.getElementById('player').style.display='block';
var wo=null;
pla=event.target.getPlaylist(); // thanks to https://stackoverflow.com/questions/32973650/getplaylist-returns-an-array-with-only-one-video-when-using-the-youtube-iframe-a
var jsuff=' ... ';
for (var ij=0; ij<pla.length; ij++) {
plas.push(0);
plae.push(0);
if (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1)) {
document.getElementById('tdright').innerHTML+='<div id=dtls' + ij + '><div id=sums' + ij + '>Start at (seconds): <span id=star' + ij + '>0</span> <progress onclick=myownfraction(event); title="" id=prog' + ij + ' value=0 min=0 max=0></progress></div><br><iframe width="640" height="560" id=ifra' + ij + ' src="' + document.URL.split('#')[0].split('?')[0] + '?ij=' + ij + '&eurl=' + pla[ij] + '" title=""></iframe></div><hr>';
} else {
document.getElementById('tdright').innerHTML+='<details id=dtls' + ij + '><summary id=sums' + ij + '>Start at (seconds): <span id=star' + ij + '>0</span> <progress onclick=myownfraction(event); title="" id=prog' + ij + ' value=0 min=0 max=0></progress></summary><iframe width="640" height="560" id=ifra' + ij + ' src="' + document.URL.split('#')[0].split('?')[0] + '?ij=' + ij + '&eurl=' + pla[ij] + '" title=""></iframe></details><hr>';
}
//wo=window.open(document.URL.split('#')[0].split('?')[0] + '?eurl=' + pla[ij],'_blank','top=50,left=50,width=900,height=600');
jsuff+=pla[ij] + ' ... ';
}
//document.title+=jsuff;
break;
default:
state = "unknown (" + event.data + ")";
}
//document.title=state;
//if (gij != '') {
// if (parent.document) {
// parent.document.title+=' ' + gij + '; ' + state;
// }
//}
}

function spanize(pob) {
document.getElementById(pob.id.replace('prog','star')).innerHTML=('' + pob.value).split('.')[0];
}

function prespanize(pob) {
document.getElementById(pob.id.replace('sele','prog')).value=('' + pob.value).split('.')[0];
}

function onReady(event) {
var time = getTime();
//theHistory = "player ready " + time + "<br/>" + theHistory;
//document.getElementById("history_div").innerHTML = theHistory;
//console.log("player ready");

// make the interface visible since we're now ready to go
//document.getElementById('ux').style.visibility = 'visible';
if (evtar == null) {
evtar=event.target;
//loadVideo(eurl.split('?')[0], event);
if (document.URL.indexOf('playlist=') == -1) { loadVideo(eurl.split('?')[0], event); }
if (atend == '' || player == null || document.URL.indexOf('playlist=') != -1) {
//if (gij != '') {
// if (parent.document) {
// parent.document.title+=' ' + gij + '- ';
// }
//}
if (document.URL.indexOf('playlist=') != -1) {
var jsuff=' ';
//document.title='playlist not null' + jsuff;
loadVideo(eurl.split('?')[0],event);
event.target.cuePlaylist({
listType: 'playlist',
list: eurlv
});
//setTimeout(submitCuePlaylist, 8000);
} else {
//if (gij != '') {
// if (parent.document) {
// parent.document.title+=' ' + gij + '` ';
// }
//}
loadVideo(eurl.split('?')[0], event);
//if (gij != '') {
// if (parent.document) {
// parent.document.title+=' ' + gij + '~ ';
// }
//}
event.target.playVideo();
//if (gij != '') {
// if (parent.document) {
// parent.document.title+=' ' + gij + '% ';
// }
//}
}
} else if (atend != '' && document.URL.indexOf('playlist=') == -1) {
//if (gij != '') {
// if (parent.document) {
// parent.document.title+=' ' + gif + '! ';
// }
//}
//alert(hurlv.replace('/v?','/embed/?').replace('/v','/embed') + atend);
//document.getElementById("loadVideoByUrl").value = hurlv.replace('/v?','/embed/?').replace('/v','/embed') + atend;
loadVideo(eurl.split('?')[0],event);
//player.loadVideoByUrl({mediaContentUrl: hurlv.replace('/v?','/embed/?').replace('/v','/embed') + atend}); //submitLoadVideoByURL();
} else {
//if (gij != '') {
// if (parent.document) {
// parent.document.title+=' ' + gij + '= ';
// }
//}
if (document.URL.indexOf('playlist=') != -1) {
loadVideo(eurl.split('?')[0], event);
event.target.cuePlaylist({
listType: 'playlist',
list: eurlv
});
} else {
event.target.playVideo();
}
}
} else {
//evtar.stopVideo();
//alert(eurl);
loadVideo(eurl.split('?')[0], event);
evtar.playVideo();
}
}

function onPlayerReady(event) {
event.target.playVideo();
}

function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}

function stopVideo() {
player.stopVideo();
//document.title='done';
done = false;
}

function domurl(what) {
murl=what;
document.getElementById('isuffix').value='';
if (murl == '/') {
document.getElementById('isuffix').placeholder='Ei_VUl8qdRU';
} else if (murl == '?listType=playlist&list=') {
document.getElementById('isuffix').placeholder='PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE';
} else if (murl == '?listType=user_uploads&list=') {
document.getElementById('isuffix').placeholder='rmetcalfeify';
} else if (murl == '?listType=search&list=') {
document.getElementById('isuffix').placeholder='rjmprogramming';
}
}

function loadVideo(videoID, evt) {
if (player) { evt.target.loadVideoById({videoId: videoID}); }
}

function goplay(what) {
eurl=encodeURIComponent(what);
if (player != null) {
eurlv=hurlv + (murl + eurl).replace(("/" + eurl),("/" + eurl + "?autoplay=1")).replace('?listType=','?autoplay=1&listType=') + '&origin=https://www.rjmprogramming.com.au&enablejsapi=1';
if (murl == '/') {
//document.getElementById("loadVideoById").value = what;
//onReady(this);
//player.loadVideoById({videoId: what}); //submitLoadVideoById();
//evtar=null;
location.href=document.URL.split('#')[0].split('?')[0] + '?eurl=' + eurl; //onYouTubeIframeAPIReady();
} else if (murl == '?listType=playlist&list=') {
//document.getElementById('isuffix').placeholder='PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE';
//document.getElementById("loadVideoByUrl").value = what;
//submitLoadVideoByURL();
location.href=document.URL.split('#')[0].split('?')[0] + '?playlist=y&eurlv=' + eurl + '&sval=' + encodeURIComponent(document.getElementById('basis').value) + '&atend=' + encodeURIComponent(eurlv.split(hurlv)[1]); //onYouTubeIframeAPIReady();
} else if (murl == '?listType=user_uploads&list=') {
//document.getElementById('isuffix').placeholder='rmetcalfeify';
location.href=document.URL.split('#')[0].split('?')[0] + '?user=y&eurlv=' + eurl + '&sval=' + encodeURIComponent(document.getElementById('basis').value) + '&atend=' + encodeURIComponent(eurlv.split(hurlv)[1]); //onYouTubeIframeAPIReady();
} else if (murl == '?listType=search&list=') {
//document.getElementById('isuffix').placeholder='rjmprogramming';
location.href=document.URL.split('#')[0].split('?')[0] + '?search=y&eurlv=' + eurl + '&sval=' + encodeURIComponent(document.getElementById('basis').value) + '&atend=' + encodeURIComponent(eurlv.split(hurlv)[1]); //onYouTubeIframeAPIReady();
}



} else if (murl == '?listType=playlist&list=') {
document.getElementById('ytplayer').src=hurl + (murl + eurl.split(',')[0]).replace(("/" + eurl.split(',')[0]),("/" + eurl.split(',')[0] + "?autoplay=1")).replace('?listType=','?autoplay=1&listType=') + '&origin=https://www.rjmprogramming.com.au&enablejsapi=1';
} else {
document.getElementById('ytplayer').src=hurl + (murl + eurl).replace(("/" + eurl),("/" + eurl + "?autoplay=1")).replace('?listType=','?autoplay=1&listType=') + '&origin=https://www.rjmprogramming.com.au&enablejsapi=1';
}
}

function onl() {
if (eurl != 'M7lc1UVf-VE?autoplay=1&origin=https://www.rjmprogramming.com.au&enablejsapi=1') {
document.getElementById('isuffix').placeholder=location.search.split('eurl=')[1].split('&')[0];
document.getElementById('ytplayer').style.display='none';
} else if (atend != '') {
//alert(hurlv + atend);
document.getElementById('player').style.display='none';
if (document.URL.indexOf('playlist=') != -1) {
document.getElementById('ytplayer').src=hurl + atend.split(',')[0];
} else {
document.getElementById('ytplayer').src=hurl + atend;
}
//document.getElementById('ytplayer').style.display='none';
document.getElementById('basis').value=sval;
document.getElementById('isuffix').placeholder=decodeURIComponent(atend.split('&origin=')[0].split('=')[eval(-1 + atend.split('&origin=')[0].split('=').length)]);

if (document.URL.indexOf('playlist=') != -1) {
document.getElementById('loadPlaylist').value=eurlv;
document.getElementById('cuePlaylist').value=eurlv;
//setTimeout(submitLoadPlaylist, 8000);
}


} else {
document.getElementById('ytplayer').style.display='none';
}

// 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);

setTimeout(onYouTubeIframeAPIReady,3000);
}

function myownfraction(event) {
var x=0, y=0;
if (event.clientX || event.clientY) {
x = event.clientX;
y = event.clientY;
} else {
x = event.pageX;
y = event.pageY;
}
var rect = event.target.getBoundingClientRect(), varn=0, vard=0, iv=0;
if (eval('' + x) >= eval('' + rect.left) && eval('' + x) <= eval('' + eval('' + Math.round(rect.left)) + eval('' + Math.round(rect.width)))) {
varn = eval('' + eval('' + x) - eval('' + Math.round(rect.left)));
vard = eval('' + Math.round(rect.width));
if (eval('' + vard) > 0) {
for (iv=Math.min(Math.abs(varn),Math.abs(vard)); iv>=2; iv--) {
if (eval(Math.abs(varn) % iv) == 0 && eval(Math.abs(vard) % iv) == 0) {
varn /= iv;
vard /= iv;
}
}
document.getElementById(event.target.id.replace('prog','sele')).value='' + Math.round(eval('' + event.target.max) * (eval('' + varn) / eval('' + vard)));
event.target.value='' + Math.round(eval('' + event.target.max) * (eval('' + varn) / eval('' + vard)));
}
}
}

function poisout() {
clicktwo=0;
}

function onclicktwo(pois) {
clicktwo++;
if (clicktwo >= 2) {
clicktwo=0;
pois.value=pois.placeholder;
} else {
setTimeout(poisout, 2000);
}
}

</script>
</head>
<body onload=" onl(); ">
<h1>YouTube List of <select id=basis onchange='domurl(this.value);'><option value='/'>Video ID</option><option value='?listType=playlist&list='>Playlist ID</option><option value='?listType=user_uploads&list='>Uploaded Videos of a User ID</option><option value='?listType=search&list='>Search Word(s)</option></select> <input type=text title='Double click for suggestion' onclick='onclicktwo(this);' ondblclick='clicktwo=0; this.value=this.placeholder;' style=width:30%; onblur=goplay(this.value); id=isuffix placeholder='M7lc1UVf-VE'></input></h1>
<h3>RJM Programming - December, 2018</h3>
<h3>Thanks to <a target=_blank title='YouTube Embedded Iframe information' href='https://developers.google.com/youtube/player_parameters'>https://developers.google.com/youtube/player_parameters</a></h3>
<table><tbody><tr><td id=tdleft>
<div id="player"></div>
<div id='ux' style='display:none;'>
<p>
<label>loadVideoById</label>
<input id='loadVideoById' value='Xz0eS-npK0k' />
<button onclick='submitLoadVideoById()'>Submit</button>
</p>
<p>
<label>loadVideoByURL</label>
<input id='loadVideoByUrl' value='https://www.youtube.com/v/dL0QsC5vZXg' />
<button onclick='submitLoadVideoByURL()'>Submit</button>
</p>
<p>
<label>loadPlaylist</label>
<input id='loadPlaylist' value='kPmkHYppC9M, hm2nb3acl2o, pfaw3j2dwxk' />
<button onclick='submitLoadPlaylist()'>Submit</button>
</p>
<p>
<label>cueVideoById</label>
<input id='cueVideoById' value='Xz0eS-npK0k' />
<button onclick='submitCueVideoById()'>Submit</button>
</p>
<p>
<label>cueVideoByURL</label>
<input id='cueVideoByUrl' value='https://www.youtube.com/v/dL0QsC5vZXg' />
<button onclick='submitCueVideoByURL()'>Submit</button>
</p>
<p>
<label>cuePlaylist</label>
<input id='cuePlaylist' value='kPmkHYppC9M, hm2nb3acl2o, pfaw3j2dwxk' />
<button onclick='submitCuePlaylist()'>Submit</button>
</p>
</div>

<iframe id="ytplayer" type="text/html" width="640" height="360"
src="//www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=https://www.rjmprogramming.com.au&enablejsapi=1"
frameborder="0"></iframe>
</td><td id=tdright></td></tr></tbody></table>

</body>
</html>