Flex YouTube API Example Feed + Search Display
Wednesday, June 18th, 2008 | Author: dehash
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
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 ?
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.
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.
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.
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
@mike – Seems to be working fine here. Maybe youtube was just having some downtime and that is what you saw.
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.
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.
Hi there, very nice post…
thanks
Cool, Can i reuse the code ?
@Zamenhof –
Code reuse is set by the license which is included in the zip file.