The first thing to do is add an SWFLoader to your mxml file. The source property of the SWFLoader gets set to the url of the video that you want to show inside Flex.
But you can't just use any YouTube url like this one:
http://www.youtube.com/watch?v=owGykVbfgUE
Instead you use a url in this form: http://www.youtube.com/v/VIDEO_ID?version=3
The id of the video you want to play (e.g. owGykVbfgUE) must replace the VIDEO_ID portion of the url. This url actually redirects to an SWF file somewhere.
The version=3 parameter is very important. This tells YouTube to load the ActionScript 3.0 version of the SWF file. Without this parameter it defaults to the AS2 version which doesn't not play nicely with AS3. I found that I could watch one video, but after that no other videos could be played (I found this blog post that explains why if you're interested). I also found this YouTube reference which is where I learned about using the version=3 parameter.
There are a few other parameters that you can use like:
- autoplay=1 - starts the video immediately without the user having to press play
- fs=1 - allows full screen
- rel=1 - shows related content after the video has finished playing
And finally, when you want to play another video, make sure you call the swfLoader.unloadAndStop() function otherwise you can get multiple videos playing at the same time, very confusing.
Keep in mind that when you run this locally you will see a lot of SecurityExceptions in your console, this is expected and normal.
And one last thing, some videos you will not be able to play inside Flex due to copyright restrictions. The owners of youtube videos must be able to specify whether the video can be played from a different website using an embedded player.
Here is the example in action (right click to view-source):
5 comments:
This works well except I keep seeing these errors in my debug console
#### Console output START ####
SecurityDomain 'http://s.ytimg.com/yt/swfbin/watch_as3-vflqEsLb3.swf' tried to access incompatible context 'http://localhost:3000/bin/index.htm?debug=true'
*** Security Sandbox Violation ***
#### Console output END ####
Any ideas how to deal with these ?
I don't think you can do anything about these errors. Once you've put your SWF up on your server then it shouldn't matter as long as it works.
I always see these errors when I'm running on my localhost too.
You have to add youtube to your domain policy i.e. crossdomain.xml, etc...
thx a lot! that version=3 parameter did the trick. before the video would always work in a debug build, but not in the release build... at not quite. after reloading the state containing the video it would appear and play, but not when entering the state for the first time.
Remember to add this..
Security.allowDomain("www.youtube.com");
to fix those issues
Post a Comment