FLV Player Lite
FLV player Lite is a software written in Actionscript 2.0 for online video streaming. It has the following features:
Streams FLV and H.264 encoded videos
Displays JPG, PNG or SWF as preview thumbnails
Fullscreen view with correct aspect ratio
Smooths the image preventing jagged edges
Uses Mousewheel and Keyboard for control
Intelligent, contextual and autohiding graphics user interface
Custom watermark support
Embedding inside other flash movies
XML Playlist support
Customizing of the graphics
This player is intended only for online use with broadband connections. Slow connections may suffer of stuttering and long loading times.
A CPU capable of video playback of the chosen definition.
Hosting with streaming support and a FTP client to upload files in there.
Adobe Flash CS3 or later is needed to edit the source files. You’ll find instructions inside. Just open the file, select the first frame and hit F9 to open the actionscript panel.1
How to use
Download and unpak the zip file into your directory.
Prepare your FLV video and thumbnail. Keep the same width and height for both files.
NOTE: thumbnail preview supports jpg and swf files.
Customize your player by editing the fla source. After you’ve done hit ctrl+enter and you will optain an swf inside the same directory. Copy it inside your /swf folder by overwriting the existing file.
Open the provided example “index.html” file with an html editor.
NOTE: Refer to the Player API Reference for further details about customization.
Now write down a div with the id “playerLite”, like this <div id=”playerLite”></div>
This div will display the video player and you can edit its parameters with you custom style sheet. Place the alternate content inside this div for those who don’t have the requested version of flash player installed.
NOTE: you can place this div anywhere you want, just put it inside the body tag.
Save, publish and test your document.
Version 1.1 – First release
Version 1.2 – Mouse autohiding fix & Playlist Addon
Version 1.3 – Minor improvements, smaller default watermark
Version 1.4 – Added seekbar, thumbnail reflections and autoLoop support
Version 1.5 – Hotfix for seekbar in fullscreen, added variables for playlist
Version 1.6 – Fixed embedding of playlist inside another flash movie
Version 1.7 – Minor bugfixes, added metadetection of video size and blur on reflections
Version 1.8 – Introduced custom Aspectratio support, thumbnail now shows on rewind
This video player has been tested under the following browsers: Internet Explorer, Mozilla Firefox, Safari, Opera, Google Chrome.
Setting up custom FlashVars
This page contains a full list of the variables you can use to customize your player.
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.
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.
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.
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.
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.
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”.
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.
This can be set to “show” or “hide”. Default is “show” and will display a watermark logo on the bottom right.
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!
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”.
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.
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.
NOTE: The following vars are needed only with the playlist addon, don’t use them with the standalone player.
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.
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.
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.