Connecting different webservices together could leave open the door to attacks on your privacy by malicious individuals. This post goes into how Flash protects you from this, but still leaves open possibilities to tie together interesting mashups. I also explain how this fits in the large picture of our YouTube project and give an example.
A recap of the ActionScript 3.0 YouTube player series:
- Getting a list of videos (and some project setup)
- A bit about how the Flash stage works and fullscreen
- Install a php script to get the video parameters
- Getting the parameters for a video [this post]
- playing the video using Flash’s FLV player classes [later post]
Crossdomain.xml
Browsers do not allow websites to load resources from other domains. There is a very good reason for that. It’s called a cross-site scripting attack. However, web 2.0 mashups inherintly use data from different domains. They’re called mashup for a reason. So JavaScript developers have figured out clumsy workarounds for the cross domain restrictions. If you’re a ActionScript developer, you’re in luck. The Flash player supports a crossdomain.xml file, that makes it possible for web service owners to open up the “safe” parts of their service to cross-site scripting.
YouTube also implements this crossdomain.xml, but it only opens the api for outside Flash access. So if you use the feeds, for instance to get recent videos, this will work perfectly. You can check the crossdomain.xml on the gdata.youtube.com domain. However, the “normal” YouTube domain, where the videos and pages are does not allow outside access.
For videos, that’s not a problem, media files are not subject of this same origin policy. But this does mean that we cannot directly get the T-parameter because that is on the video page (see previous post for details). Exactly for that reason, we created a little php script to help us out. This will reside on the same server as our Flash file, so we can access it without restrictions and it will get the T-parameter for us.
The YouTube ActionScript class
Now lets get back to some ActionScript programming, shall we? Before you can use the method for getting the video id and T-parameter, you will need to change the url of the php script. Make sure the script is on the same domain as where you will be hosting the Flash file. As long as you are testing locally, you don’t need to worry about it, but it might be best to fix this straight away. This will save you some headaches in the future.
Open up src/com/flashdynamix/services/YouTube.as and change lines 19-21:
private static const servicesDomain : String = "http://YOURDOMAIN/YOURPATH/";
//private static const videoIdUrl : String = servicesDomain + "getVideoId.aspx";
private static const videoIdUrl : String = servicesDomain+"getVideoId.php";
Just fill in the domain and path of the php script. And depending on what you use (php or asp) comment the correct line (the original library also comes with an asp implementation if you prefer that one). That’s all there is to it. Save the file and close. You are ready to try it out.
Testing loading the video ID and T-parameter
Now that the setup is done, it’s really easy to get the video id and T-parameter. The YouTube class provides a “videoId” method just for this purpose. The following code is only a small change compared to the code shown in the first post of the series. It still gets 20 videos for the “lego” tag and afterwards it requests the parameters for the first video of that list.
package
{
import com.flashdynamix.events.CustomEvent;
import com.flashdynamix.services.YouTube;
import flash.display.Sprite;
import flash.events.ErrorEvent;
import flash.events.Event;
public class Main extends Sprite
{
private var yt : YouTube;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
trace("start YouTube search");
yt = new YouTube();
yt.addEventListener(Event.COMPLETE, onLoaded);
yt.addEventListener(ErrorEvent.ERROR, onError);
yt.videosForTag("lego");
}
private function onLoaded(e:CustomEvent):void {
switch (e.id) {
case YouTube.SEARCH :
trace("search finished");
try {
trace("first item : " + e.value.items[0].title + " - " + e.value.items[0].link);
} catch (evt:ArgumentError) {
trace("ERROR : No Videos For Tag");
}
trace("requesting the video id and t-parameter");
yt.videoId(e.value.items[0].link);
break;
case YouTube.VIDEOID :
trace("loaded: video id = " + e.value.id + " and T-parameter = "+e.value.t);
break;
}
}
private function onError(e:ErrorEvent):void {
trace("IOError : " + e );
}
}
}
The output will look like:
start YouTube search search finished first item : THE SIMPSONS intro lego style - http://www.youtube.com/watch?v=CgEIGx0JKL8 requesting the video id and t-parameter loaded: video id = CgEIGx0JKL8 and T-parameter = OEgsToPDskIt_LVCPsgv_hVr5d7DIs6U
As you can see, I added an event to listen for in the onLoaded method. When the video parameters are received, the YouTube class will generate a YouTube.VIDEOID event, which is where we output the results. That’s really all there is to it.
Conclusion
After this post, we are now ready to start playing the video. We have everything that is needed to load the FLV file. You could even download it to your harddrive if you wanted to. In the next post, I will explain the ActionScript 3 methods for playing a video.