So I’ve managed to get all the videos in a plylist and shuffled them into a random order into a javascript array.
Now I want to play the videos in that array in the order they appear … and I’m stuck.
Can’t seem to figure out how to ‘plug’ the new array into the player.
Here’s what I’ve got so far:
<!doctype html>
<html>
<head>
<title>YouTube</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
var allVideos = new Array();
function onGoogleLoad()
{
gapi.client.setApiKey('MyKey');
gapi.client.load('youtube', 'v3', function() {
GatherVideos("", function() {
allVideos=shuffle(allVideos);
for (var i = 0; i < allVideos.length; i++) {
console.log('Count: ' + i + ' ' + allVideos[i].snippet.resourceId.videoId + ' ' + allVideos[i].snippet.title + " published at " + allVideos[i].snippet.publishedAt)
}
});
});
}
function GatherVideos(pageToken, finished)
{
var request = gapi.client.youtube.playlistItems.list({
part: 'snippet',
playlistId: 'MyPlaylist',
maxResults: 50,
pageToken: pageToken
});
request.execute(function(response) {
allVideos = allVideos.concat(response.items);
if (!response.nextPageToken)
finished();
else
GatherVideos(response.nextPageToken, finished);
});
}
function shuffle(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;
}
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '360',
width: '640',
events: {
'onReady': onPlayerReady
}
});
function onPlayerReady(event) {
console.log(event);
console.log('Got here: ' + allVideos);
}
}
</script>
<div id="ytplayer"></div>
<script src="https://apis.google.com/js/client.js?onload=onGoogleLoad"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>