Search code examples
actionscript-3apiyoutubeyoutube-apivideo-thumbnails

Youtube API Actionscript 3 and Thumbnails


I've got the Youtube API setup in AS3 - it's all loading nicely but I'd like to load multiple thumbnails and then display them so that user may click one to watch the video but I'm having a little trouble doing this.

The code that I have for doing this is this: (where "vid_player" is the instance name of my container object.

   function createFeaturedButtons(vid_player:Object, featuredVideos:Array) {
   var results:Array = [];
   for each (var id:String in featuredVideos) {
    results.push(vid_player.getClickToPlayButton("BYjoERBzfNw"));
results.push(vid_player.getClickToPlayButton("oEB50roGOOg"));
    }
    return results;
   }

Now how do I get it to display my results of my Array?


Solution

  • This should get you the thumbnails and add them to the stage display list in a row with 5 pixels between each. The number of items in idArray defines how many buttons will load:

    var spacing:Number = 5;
    var nextX:Number = 0;
    var idArray:Array = [ 'BYjoERBzfNw', 'oEB50roGOOg', 'oEB50roGOOg', 'oEB50roGOOg', 'oEB50roGOOg' ];
    
    // this call needs to be made in the onPlayerReady() method (not listed in this example but part of the youtube player initialization process)
    createThumbnails( vid_player, idArray );
    
    function createThumbnails( vid_player:Object, videoIdArray:Array )
    {
        var i:int;
        var results:Array = [];
    
        for( i = 0; i < videoIdArray.length; i++ )
        {
            results.push( vid_player.getClickToPlayButton( videoIdArray[ i ] ) );
        }
    
        for( i = 0; i < results.length; i ++ )
        {
            // set whatever width and height you want the thumb to be
            results[ i ].width = 50;
            results[ i ].height = 50;
    
            // set its position
            results[ i ].x = nextX;
            // set the next position
            nextX += results[ i ].width + spacing;
    
            addChild( results[ i ] );
        }
    }
    

    the output from this routine, when added to code that successfully loads a player, (using my own video IDs) looks like below, (I used the same ID for all 5 thumbs):

    enter image description here