Passing Variables Into Flash using the Querystring

I decided the write this post because I have been getting numerous requests for using a simple media player (Flash) with a dynamic html page. In other words people would like to have a list of videos in html as links and when you click the link the video reference is passed into the media player (Flash) and plays the video. There are a number of ways to accomplish this task but for this example I am going to show how you can have one page pass variables to a second page via the querystring, the second page picks up the variables using swfobject and passes them into the media player.

The example files are setup so that the home.html page has the link with the name value pairs (querystring). When you run the home.html page in a browser and click the link the player.html page with load. If you look at the location field of your browser you should see something like the following:

http://localhost/passingVars/player.html?videourl=rtmp://localhost/vod/sample.flv&videocaption=just%20a%20bit%20of%20text

First notice that this is running on an http server (e.g. http://localhost). Second notice that there is a ? after player.html, the next section contains two name /  value pairs. The first starts with videourl (is the variable) then rtmp://localhost/vod/sample.flv (is the value). Next you will notice a & symbol this is the beginning of the second name / value pair. Finally videocaption is the second variable and just%20a%20bit%20of%20text is the value of that variable. The value is url encoded.

In player.html there is some javascript that picks up the variables and values from the query string and passes them into the Flash file (final.swf). The following captures both the variable name and the value:

if (swfobject.getQueryParamValue(“videourl”)) { flashvars.videourl = swfobject.getQueryParamValue(“videourl”); }


if (swfobject.getQueryParamValue(“videocaption”)) { flashvars.videocaption = swfobject.getQueryParamValue(“videocaption”)

The preceding also adds the variable names and values to to the flashvars object which makes them available to the Flash file. In the Flash file I am able to retrieve the values using the following actionscript:

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;

if(paramObj.videourl){
msg_txt.appendText(“\t” + “videourl : “+ paramObj.videourl + “\n”);
msg_txt.appendText(“\t” + “videocaption : “+ paramObj.videocaption + “\n”);

Then it is a simple matter to pass the value for the video uri to the FlvPlayback component. You can find and download the example here. The Flash source file is in the assets folder (final.fla). This file will require Flash CS5.

About these ads

4 Responses to Passing Variables Into Flash using the Querystring

  1. [...] Summary: Lets review what we have done. First we created a folder (www.first.com) that represents a virtual host in the conf_defaultRoot_ directory of the Flash Media Server installation directory. This name is mapped to the machine IP adddress with a DNS entry for production or a hosts file for a development environment. We copied the vhost.xml and application.xml file into that folder (www.first.com) from the conf_defaultRoot__defaultVHost_ folder of the FMS installation folder. We added an entry to the <AppsDir> setting in the vhost.xml file as well as the <MaxConnections>- setting. The <AppsDir> sets up an application directory for the virtual host and the MaxConnections setting limits the number of connections coming into that specific virtual host. Then you encoded your content to fit within the bandwidth limits required for that virtual host and finally we added an entry to the <Streams> so that groups of virtual hosts could have access to the same content without having to copy the same content into every virtual host application directory. Finally you will have to create different Flash / Flex applications or pass in variables so that each location uses the correct connection string (rtmp://{virtualhost}/{application}.{video}). Check out an article that I wrote regarding how to pass variables into Flash using the query string. [...]

  2. Addis Abebayehu says:

    This is awesome. Thank you!

  3. Kevin says:

    Looking for the sample .fla and .html files related to this post, but I get a page not found error when I click on the link.
    Are they available still?
    Thank you for your help.

  4. Kevin says:

    Sorry, the second time I clicked on the link it worked.
    Thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: