Youtube API - how to play a dynamically created list of videos?

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>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.