How to set your custom FlashVars
This page contains a full list of the variables you can use to customize your player.
The easiest way to setup your player is to copy the javascript you’ll find below and paste it in the head tags of your document. Remember to include also the provided js and swf folders. If you’re to lazy just pickup the precompiled examples and edit them!
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {
vidWidth: "590",
vidHeight: "300",
vidPath: "http://www.flvplayerlite.com/lab/flv/playerlite.flv",
thumbPath: "http://www.flvplayerlite.com/lab/jpg/playerlite.jpg",
autoPlay: "false",
autoLoop: "false",
watermark: "show",
watermarkURL: "http://www.flvplayerlite.com",
seekbar: "show",
showControls: "true",
vidAspectRatio: "fit",
playlistPath: "playlist.xml",
plShowAtStart: "true",
plHideDelay: "2000"
};
var params = {
menu: "true",
allowfullscreen: "true",
allowscriptaccess: "always"
};
var attributes = {
id: "playerLite",
name: "playerLite"
};
swfobject.embedSWF("swf/standalone/playerLite.swf", "playerLite", flashvars.vidWidth, flashvars.vidHeight, "9.0.0","swf/expressInstall.swf", flashvars, params, attributes);
</script>
After this you should replace the vars with your settings. Most vars don’t need to be customized as they already use default values. The required vars are just vidWidth, vidHeight and vidPath, while the others can be left blank or even deleted from the FlashVars list. The player will work with only this three vars without problems.
vidWidth, vidHeight
Integer values in pixel for both width and height of the video container are needed to display properly everything. It’s up to you to use a good container for your videos. If the video doesn’t fill the whole area, black bars will be added automatically.
vidPath
This var is required for linking your video to the player, if you leave this blank nothing will be displayed. Relative paths might not work on some servers. This is because of the Flash Security Sandbox.
If you are experiencing issues with relative linking, try using absolute paths instead. Using complete urls will make your player also portable and embeddable on other sites. The example links to a test video on this site.
thumbPath
This var is required only if you want to display a preview before your video. It can handle JPG, PNG and even SWF movies. Type the complete path of your preview image or movie inside this var and it will show up right away inside your player.
If you don’t have anything to put in there leave this blank, like the following example.
thumbPath: "";
Doing this you will tell the player you don’t have any thumbnail. FLV player Lite will catch the first frame of your movie and show it as preview.
autoPlay
You can set this to “true” or “false”. If set to true it will play right away, else it will just wait the user to click on the video. If not set default is “false”.
autoLoop
Once the video has finished playing you can choose to play it again from the beginning or just hold on the preview again. Set it to “true” for looping, or “false” to just rewind the video.
watermark
This can be set to “show” or “hide”. Default is “show” and will display a watermark logo on the bottom right.
watermarkURL
Yeah, you can link your watermark to your site! Isn’t that great? Well you just basically need to type the link in here. Guess where it links by default? Oh, right here, of course!
seekbar
Some may like the tiny seek bar on the bottom, others may not. This var can be set to “show” or “hide”. By default the seek bar is set to “show”.
showControls
You can set this to “true” or “false”. By default is set to “false” and controls are hidden at start. User has to rollover to view the controls. If you set this to “true” the control show up right on start and hide after a while.
vidAspectRatio
This one has four options. You can set the aspect ratio of your video in “fit”, “cut”, “stretch” or “original”. By default it’s set to “fit”, which means that the video will not be cropped but just resized and centered to fit inside the player. These options are also available to the user on right mouse click.
Beware: The following vars are needed only with the playlist addon, don’t use them with the standalone player.
playlistPath
If you are going to use a play list you will need to tell the player where the xml file is! So type here the link where to pickup the play list. The example uses “playlist.xml” which refers to the same directory.
plShowAtStart
Set this to “true” or “false”. By default it’s set to false which means that the playlist thumbnails show up only if you rollover over them, while setting it to true shows them directly. You’ll also need to setup the plHideDelay if you set this to true.
plHideDelay
How much milliseconds should the playlist wait before hiding. The example uses 2000, which means 2 seconds before the playlist goes away!
Once you’ve done with all this stuff, you can finally add your player inside your body tags by adding a simple div.
<div id="playerLite"> No flash, no party! </div>
You can put inside this div whatever you want. It shows up only if the user has not the flash player installed. Customize the position of your div with your stylesheet referring to the id “playerLite” as shown in the provided examples.
That’s it! Save your html, upload everything and test your document online.
Loading...