<!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';
var eurl=location.search.split('eurl=')[1] ? location.search.split('eurl=')[1].split('&')[0] + '?autoplay=1&origin=https://www.rjmprogramming.com.au' : 'M7lc1UVf-VE?autoplay=1&origin=https://www.rjmprogramming.com.au';
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 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
},
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 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";
break;
case YT.PlayerState.PAUSED:
state = "paused";
break;
case YT.PlayerState.BUFFERING:
state = "buffering";
break;
case YT.PlayerState.CUED:
state = "video cued";
break;
default:
state = "unknown (" + event.data + ")";
}
//document.title=state;
}

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]);
if (document.URL.indexOf('playlist=') == -1) { loadVideo(eurl.split('?')[0]); }
if (atend == '' || player == null || document.URL.indexOf('playlist=') != -1) {
if (document.URL.indexOf('playlist=') != -1) {
loadVideo(eurl.split('?')[0]);
setTimeout(submitCuePlaylist, 8000);
} else {
event.target.playVideo();
}
} else if (atend != '' && document.URL.indexOf('playlist=') == -1) {
//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]);
//player.loadVideoByUrl({mediaContentUrl: hurlv.replace('/v?','/embed/?').replace('/v','/embed') + atend}); //submitLoadVideoByURL();
} else {
if (document.URL.indexOf('playlist=') != -1) {
loadVideo(eurl.split('?')[0]);
setTimeout(submitCuePlaylist, 8000);
} else {
event.target.playVideo();
}
}
} else {
//evtar.stopVideo();
//alert(eurl);
loadVideo(eurl.split('?')[0]);
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) {
if (player) { player.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';
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';
} else {
document.getElementById('ytplayer').src=hurl + (murl + eurl).replace(("/" + eurl),("/" + eurl + "?autoplay=1")).replace('?listType=','?autoplay=1&listType=') + '&origin=https://www.rjmprogramming.com.au';
}
}

function onl() {
if (eurl != 'M7lc1UVf-VE?autoplay=1&origin=https://www.rjmprogramming.com.au') {
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);
}

</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' ondblclick='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>

<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"
frameborder="0"></iframe>

</body>
</html>