Advanced Flash Components
Search!
Search!
Home >  Tutorials >  FLV Player (AS 3.0) Basic Skins >  Using HTML FlashVars
Using HTML FlashVars
Updated: Dec 11, 2007   Views: 2358  
Description: This tutorial will describe how to use HTML FlashVars to set the FLV Player's source.
Part I - The Completed Project

To get started, here is all of the code and an example of what we are going to build. More advanced users may only need to look at this example, while others might want to read below where I will go through the code and what each part of it does.

ActionScript

try {
    var keyStr:String;
    var valueStr:String;
    var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
   
    for (keyStr in paramObj) {
        valueStr = String(paramObj[keyStr]);
        if(keyStr == "video_path") myPlayer.source = valueStr;
    }
} catch (error:Error) {
   
}


HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>player</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
    if (AC_FL_RunContent == 0) {
        alert("This page requires AC_RunActiveContent.js.");
    } else {
        AC_FL_RunContent(
            'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
            'width', '550',
            'height', '400',
            'src', 'player',
            'quality', 'high',
            'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
            'align', 'middle',
            'play', 'true',
            'loop', 'true',
            'scale', 'showall',
            'wmode', 'window',
            'devicefont', 'false',
            'id', 'player',
            'bgcolor', '#ffffff',
            'name', 'player',
            'menu', 'true',
            'allowFullScreen', 'false',
            'allowScriptAccess','sameDomain',
            'movie', 'player',
            'salign', '',
            'flashVars', 'video_path=http://www.afcomponents.com/flv/vid/sample.flv'
            ); //end AC code
    }
</script>
<noscript>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="player" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="player.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="flashVars" value="video_path=http://www.afcomponents.com/flv/vid/sample.flv" />
    <embed src="player.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="player" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="video_path=http://www.afcomponents.com/flv/vid/sample.flv" />
    </object>
</noscript>
</body>
</html>


Part II - Setting Up the File

The file setup here is pretty straight-forward. Create a new Flash ActionScript 3.0 file and drag an instance of the FLV Player to the stage. Give it an instance name "myPlayer."

Note: Make sure you leave the source parameter blank. We will set it with ActionScript.

Next, create a new layer and name it "ActionScript." This is where you will place the code that grabs your FlashVars and sets the player source.


Part III - The Code

Finally, lets step through the code.
try {
    var keyStr:String;
    var valueStr:String;
    var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
   
    for (keyStr in paramObj) {
        valueStr = String(paramObj[keyStr]);
        if(keyStr == "video_path") myPlayer.source = valueStr;
    }
} catch (error:Error) {
   
}


We use a try catch block here to check for the FlashVar. If it exists and there are no problems, we set the player source to the video_path FlashVar (if(keyStr == "video_path") myPlayer.source = valueStr;). If it doesn't exist or there is an error, we simply do nothing.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>player</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
    if (AC_FL_RunContent == 0) {
        alert("This page requires AC_RunActiveContent.js.");
    } else {
        AC_FL_RunContent(
            'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
            'width', '550',
            'height', '400',
            'src', 'player',
            'quality', 'high',
            'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
            'align', 'middle',
            'play', 'true',
            'loop', 'true',
            'scale', 'showall',
            'wmode', 'window',
            'devicefont', 'false',
            'id', 'player',
            'bgcolor', '#ffffff',
            'name', 'player',
            'menu', 'true',
            'allowFullScreen', 'false',
            'allowScriptAccess','sameDomain',
            'movie', 'player',
            'salign', '',
            'flashVars', 'video_path=http://www.afcomponents.com/flv/vid/sample.flv'
            ); //end AC code
    }
</script>
<noscript>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="player" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="player.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="flashVars" value="video_path=http://www.afcomponents.com/flv/vid/sample.flv" />
    <embed src="player.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="player" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="video_path=http://www.afcomponents.com/flv/vid/sample.flv" />
    </object>
</noscript>
</body>
</html>


In HTML, I have highlighted the three places that you need to add your FlashVars code. This ensures that it will work across all browsers, and whether JavaScript is enabled or not.

That's all there is to it. If you have any further questions, let us know on the forum. Enjoy!