Pass parameters from HTML to Flex/Flash: Dynamic video player example

A quick example of passing parameters from HTML/Javascript dynamically to Flex/Action Script or Flash in some cases using flashvars. You can use it with any Flash based platform. Check out the demo first and then I will explain:

Demo Link: http://jbk404.site50.net/flex/htmlparameter/

What we have here is that there are two buttons in an HTML page. Each button when clicked plays a different video in the same Flex Video Player (which runs in a .swf file and uses the Flash plugin to render). So what I am doing is that on click of the button I call a javascript function wherein I pass the corresponding video URL as parameter to the Flex Video Player (which is a .swf file) using flashvars. This is how I am doing it,

<param name="flashvars" value="videoURL=videos/video' + target_obj.id + '.flv" />

target_obj.id is the id of the button clicked. The parameter is passed as a key-value pair. videoURL holds the dynamic URL of the video. There is one flash file (.swf) which reads the parameter passed in flashvars and then plays the video. This way multiple videos play in the same player.  I have named the videos as video1.flv and video2.flv which are inside videos folder under my root directory. Note that Flex/Flash video player runs a .flv format. When you look at the demo you might notice that a popup shows the video URL inside the player. That’s where it is getting the URL as parameter from HTML side. Also the video is auto played.
Below is the full HTML/JavaScript code, the index.html file

<body>
<input type="button" value="Play Video 1" id="1" onclick="playVideo(this)"/>
<input type="button" value="Play Video 2" id="2" onclick="playVideo(this)"/>
<div style="background-color:#ccc; width:520px; height:500px; margin-top:20px;" id="playHere"></div>

<script type="text/javascript">
var htmlContent;
function playVideo(target_obj) {
htmlContent = '<div style="width:520px; height:500px; text-align:center;">' +
'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="510" height="490" id="videoPlayer"> <param name="movie" value="videoPlayer.swf" /><param name="flashvars" value="videoURL=videos/video' + target_obj.id + '.flv" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="videoPlayer.swf" width="510" height="490"><param name="flashvars" value="videoURL=videos/video' + target_obj.id + '.flv" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--<![endif]--> <!--[if gte IE 6]>--> <p> Either scripts and active content are not permitted to run or Adobe Flash Player version 10.0.0 or greater is not installed. </p> <!--<![endif]--> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object>' +
'</div>';
document.getElementById("playHere").innerHTML = htmlContent;
}
</script>
</body>

Flex code
Now, let’s see how to create the Flex video player.  For that you will need Adobe Flash Builder or open source Flex sdk (version 4.0 onwards) to complile the code and generate the Flex video player as a .swf file. Below is the full Flex code.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="getHTMLParameter(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.Application;
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
protected function getHTMLParameter(event:FlexEvent):void
{
try {
var valueStr:String;
valueStr = FlexGlobals.topLevelApplication.parameters.videoURL;
adPlayer.source = valueStr;
adPlayer.play();
} catch (error:Error) {
Alert.show('Error in reading video URL');
}
}

]]>
</fx:Script>
<s:VideoPlayer autoPlay="false" id="adPlayer" x="5" y="5" width="500" height="480"
/>
</s:Application>

Upon creation complete I call the method getHTMLParameter()and this is where the parameter that is coming from HTML side is fetched and read. All the parameters that are passed are stored in the parameters property of the FlexGlobals.topLevelApplication object. Then we can access them by the parameter name. This same action script code can be utilized with Flash also.

valueStr = FlexGlobals.topLevelApplication.parameters.videoURL;

If you are having Adobe Flash Builder then create a Flex project and copy this code to a mxml file (videoPlayer.mxml). After that you just need to export a release version/build of the file and you will get the final .swf flash file in the bin-release folder inside your project folder. The image below shows the step,

export_release_build

Export release build/final swf file.

Why we need to generate a release build of the code is that the release version does not contain debug information and in that way it is much lighter in size. Now, inside the bin-release folder you will find a few files. Copy the videoPlayer.swf (this is the compiled flash file and our video player), playerProductInstall.swf and all of the .swz files (these are needed by the framework at runtime) and paste them in your HTML directory, directly along with the index HTML file that we created earlier. This is how the demo app was build.

Passing multiple parameters
Till now I have talked of passing a single parameter. What if we need to pass multiple parameters? Let’s see how to do that.
In the HTML/JavaScript side you can add multiple parameters in flashvars by separating them with an ampersand (&).  See how I have added a secondParameter variable which is holding a string value of My second value.  Similarly you can add more parameters. Now in the action script code you can access the parameter value by the same method that I discussed earlier.

Java Script

<param name="flashvars" value="videoURL=videos/video' + target_obj.id + '.flv&secondParameter=My second value" />

Action Script

var secondValue:String;
secondValue = FlexGlobals.topLevelApplication.parameters.secondParameter;

Conclusion
In my recent past I have worked extensively with Flex and ActionScript but I will not go much deeper into Flex as this tutorial should only be kept to passing parameters and that’s what we already achieved.
For those who are not sure of Flex, Flash, Video Player, .swf files check out the help links below:

Adobe Flex
http://www.adobe.com/products/flex.html
http://www.adobe.com/devnet/flex.html
http://labs.adobe.com/technologies/flex/

Flex Video Player widget
http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WSc78f87379113c38b-669905c51221a3b97af-8000.html
http://blog.flexexamples.com/category/spark/videoplayer-spark/

Adobe Flash
http://www.adobe.com/devnet/flash.html

SWF File
http://en.wikipedia.org/wiki/SWF

About these ads

14 thoughts on “Pass parameters from HTML to Flex/Flash: Dynamic video player example

  1. Pingback: Play HTML5 Video or Flash video based on browser support « Joseph's RIA Lab

  2. Hello just wanted to give you a quick heads up. The text in your post seem to be running off the screen in Safari. I’m not sure if this is a format issue or something to do with internet browser compatibility but I figured I’d post to let you know. The style and design look great though! Hope you get the problem solved soon. Cheers

  3. I have done everything but it’s not just playing when the button is clicked, pls what are my missing? Your quick response will be greatly appreciated.

  4. When i click the Play Video 1 button it shows the player but doesn’t play the video, note i copy your code but if you can send me the full working sample code i will be very happy as it’s important and urgent that i get it to work… my email is: onyinye.vincento5@gmail.com
    Thanks once again.

    • The video url parameter passed might have some issues. I have sent you the working sample in your mail. Let me know if you need anything else.
      Thanks.
      Joseph

  5. Hi Joseph, thanks for the mail but when i run the index page and click the play video button 1 it only display a dialog box saying: Video URL: videos/video1.flv but doesn’t play the video itself. Please what will be the problem… I use a window 7 – 64bit system, Google Chrome, IExplorer 9. I’ll be expecting your expect assistance. Thanks.

    • Vincent,
      Put the entire code/folder in a local server or a web server and try to run it. If you have Apache running locally then try to access it by http://localhost/your_folder and it will run. This is happening because of security problems, if you try to run it directly from the folder it does not run.
      Thanks.
      Joseph

      • Thanks Joseph it works but am actually looking at not hosting it, any way out? Thanks once again for your swift response.

      • I guess running it from the local folder will give security troubles. You can put it in your local server and display it from there. That’s a possibility?

        Thanks.
        Joseph

  6. Thank for the detailed note, I am having a problem.
    I have total of 22 .flv videos in my root directory, when the page is loaded, the news.flv file is loaded. i want this same player to be used for another 21 filles. i have given these just below the player as links, how to dynamically link these videos ?
    frm
    crkpillai@rediffmail.com

    • Hi,

      Yes you can do that. If you see my example I pass the video URL as a parameter to the Flash/Flex code. Similarly you have to pass the url as a parameter. Moreover you need to handle that in some event, so pass the url as a parameter in a button click or may be a drop down select. Let me know if you have problems.
      Thanks.
      Joseph

  7. A good online video player can make a huge difference in the reception of your website. Visitors want to watch videos on a full-featured online video platform that blends seamlessly into the look and feel of the site. A full-featured video player that works every time offers opportunities to build and maintain relationships with customers and encourages them to purchase from your site. In addition, it attracts leads and better ads, ultimately generating higher profits.So how can you judge if the video platform and service provider you’re considering is the right one? One thing you should always look for is a custom video player with customizable features. ,

    Look at the best and newest blog post on our very own blog page
    <.http://www.caramoantourpackage.com

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