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

  • 2,491 views
Uploaded on

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 …

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/
For the full post download this file or visit the blog link: http://jbkflex.wordpress.com/2012/01/20/pass-parameters-from-html-to-flexflash-dynamic-video-player-example/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,491
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Pass parameters from HTML to Flex/Flash: Dynamic videoplayer examplePost 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 somecases 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 videoin the same Flex Video Player (which runs in a .swf file and uses the Flash plugin to render). So what I am doing isthat on click of the button I call a javascript function wherein I pass the corresponding video URL as parameter to theFlex 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 thedynamic URL of the video. There is one flash file (.swf) which reads the parameter passed in flashvars and then playsthe video. This way multiple videos play in the same player. I have named the videos as video1.flv and video2.flvwhich are inside videos folder under my root directory. Note that Flex/Flash video player runs a .flv format. When youlook at the demo you might notice that a popup shows the video URL inside the player. That’s where it is getting theURL 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" /><paramname="flashvars" value="videoURL=videos/video + target_obj.id + .flv" /> <param
  • 2. name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <paramname="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" /> <paramname="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen"value="true" /> <!--<![endif]--> <!--[if gte IE 6]>--> <p> Either scripts and activecontent are not permitted to run or Adobe Flash Player version 10.0.0 or greater isnot 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 codeNow, let’s see how to create the Flex video player. For that you will need Adobe Flash Builder or open source Flexsdk (version 4.0 onwards) to complile the code and generate the Flex video player as a .swf file. Below is the full Flexcode.<?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;
  • 3. 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 fromHTML side is fetched and read. All the parameters that are passed are stored in the parameters property oftheFlexGlobals.topLevelApplication object. Then we can access them by the parameter name. This same actionscript code can be utilized with Flash also.valueStr = FlexGlobals.topLevelApplication.parameters.videoURL;
  • 4. 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 .swfflash 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 informationand in that way it is much lighter in size. Now, inside the bin-release folder you will find a few files. CopythevideoPlayer.swf (this is the compiled flash file and our video player), playerProductInstall.swf and all ofthe .swz files (these are needed by the framework at runtime) and paste them in your HTML directory, directly alongwith the index HTML file that we created earlier. This is how the demo app was build.Passing multiple parametersTill now I have talked of passing a single parameter. What if we need to pass multiple parameters? Let’s see how todo that.In the HTML/JavaScript side you can add multiple parameters in flashvars by separating them with anampersand(&). See how I have added a secondParameter variable which is holding a string value of My secondvalue. Similarly you can add more parameters. Now in the action script code you can access the parameter value bythe same method that I discussed earlier.Java Script<param name="flashvars" value="videoURL=videos/video + target_obj.id +.flv&secondParameter=My second value" />Action Scriptvar secondValue:String;secondValue = FlexGlobals.topLevelApplication.parameters.secondParameter;
  • 5. ConclusionIn my recent past I have worked extensively with Flex and ActionScript but I will not go much deeper into Flex as thistutorial 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 Flexhttp://www.adobe.com/products/flex.htmlhttp://www.adobe.com/devnet/flex.htmlhttp://labs.adobe.com/technologies/flex/Flex Video Player widgethttp://help.adobe.com/en_US/Flex/4.0/UsingSDK/WSc78f87379113c38b-669905c51221a3b97af-8000.htmlhttp://blog.flexexamples.com/category/spark/videoplayer-spark/Adobe Flashhttp://www.adobe.com/devnet/flash.htmlSWF Filehttp://en.wikipedia.org/wiki/SWF