Flex YouTube API Example Feed + Search Display


Flex YouTube API feed + search display. download source code here

Uses library @ as3-youtube-data-api

Nice player example @ on_the_other_hand

author of as3-youtube-data-api has a blog @ blog.martinlegris.com

update: added in a simple player to view the movies.

.
Update 2: Added source code download for the feed display
We are making a Cairngorm version of this but here is a simple component version to test.
The source code for the feed display component (not the player) is here
It is a FlashDevelop3 Beta7 project file and uses the Flex3 SDK to compile. To build the project requires the as3-youtube-data-api library Just download youtube-google-0.95.zip and add it to the project path and compile, that is it.

All of the hard work is done by SimpleFeedGrabberExample.as which uses the excellent as3-youtube-data-api library to load feeds from YouTube and parses them into an ArrayCollection which is the Bindable datasource for the display. This is a simple version that will likely change a lot when it is in our Cairngorm project but works fine for now.
as3-youtube-data-api notes: in strict mode you get a few warnings of variables declared without datatypes in the as3-youtube-data-api library but these are easy to fix. Also YouTubeClient has been removed in the library version released yesterday but we substituted YouTubeFeedClient in its place and that seems to work ok.


Once the above is complete to integrate with into the otoh player grab the source code from here:
* copy the src directory into this project src folder
* make YouTubeTest.mxml the target file + make 3 edits to it:
* put xmlns:ytfeeds=”ytfeeds.*” in the Application tag at the top
* put <ytfeeds:YTFeedComponent top=”325″ /> just before </mx:Application>
* insert your YouTube Developer key into YouTubeTest.mxml and compile.

Now when you click on a movie in the display it can be played in the otoh player because video.text is set to the selected movie ID.

Update:
Added a Comments viewer, and a related movies tab using the as3-youtube-data-api

View the updated flex youtube movie here


15 thoughts on “Flex YouTube API Example Feed + Search Display

  • drmaxmad

    Hi there.
    This is good example there but I don’t know about Flex as I work only with Flash.
    How can I achieve this in Flash environment ?

  • dehash

    In this simple example the Flex components are just a GUI to display the data and most of the real work is done by the as3-youtube-data-api which is AS3 and works in Flex and Flash the same.

    The author of the as3-youtube-data-api wrote a tutorial to use it which you can find at:
    http://blog.martinlegris.com/?p=83

    If you get that tutorial code working in Flash 9 then you are most of the way there.

  • key_nyc

    Could someone please step through “Just download youtube-google-0.95.zip and add it to the project path” in Flex Builder not FlashDevelop.

    Much appreciated.

  • dehash

    key_nyc:

    There are different ways to do it but one way is to unzip youtube-google-0.95.zip and put the contents into the src folder of your Flex Builder project.

    That should make the classes available. It is the same method that you might use for adding Papervision classes for example to a project.

    I think this is probably covered in some of the articles at Flex Developer Center in more detail because it is a common need to use external third party libraries.

  • mike

    I’ve been using your code and it was working perfectly until today. The code doesn’t work any more. Did youtube change something so that it doesn’t work anymore ?

    Thanks

  • dehash

    @mike – Seems to be working fine here. Maybe youtube was just having some downtime and that is what you saw.

  • Lucas

    Hi,

    Very nice examples!

    I was just wondering how I can add possibility of getting loaded bytes and total bytes of the video ?
    I want to get something like this:
    player.videoBytesLoaded
    which displays current amount of loaded bytes
    Thank you.

  • Luke

    Hi,
    How can I embed two or more widgets that are using your Flex YouTube API feed library into one html page? I can see only the first one now.

  • Andrew

    This seems great but I just can’t get it to work:
    Access of undefined property “STD_TOP_RATED”

    I tried commenting out the loadtoprated, loadmostviewed, and loadrecentlyfeatured functions, and the project compiled. However, the search didn’t work or return any results.

    Any ideas?

  • Andrew

    I still haven’t figured out the issue with the above undefined property but the search worked when I uploaded it to a server. Not sure why it won’t work locally.

  • dehash Post author

    @Andrew
    Seems to be working above but this example is quite old now and there are a couple of new ones in the YouTube API category that might help.

Comments are closed.