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

Pass parameters from HTML to Flex/Flash: Dynamic video
player example
Post from my blog: http://jbkflex.wordpress.com/2012/01/20/pass-parameters-from-html-to-flexflash-
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" />  <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" />   <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>  <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>  </object> 
</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
theFlexGlobals.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/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
thevideoPlayer.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

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

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

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