The Flash Video (FLV) Player can be used standalone, without the need for the Flash authoring tool. The player allows you to show your videos more controlled and to a broader audience than with Quicktime, Windows Media or Real Media. It supports playback of a single FLV file, RTMP streams or RSS/XSPF playlists, a wide range of flashvars (settings) for tweaking both behavior and appearance and an extensive, documented javascript/actionscript API. Contents of this readme:
This script is licensed under a Creative Commons License. It allows you to use and modify the script for noncommercial purposes. For commercial use, I distribute licenses of the script for 15 euros. For more info and instant ordering, please advance to my online order page!
You can download the Flash Video Player here. It includes the source files (Flash8) and a readme with tips regarding the installation and use of this script. Please read it carefully!
An up-to-date list of third-party plugins for the Flash Video Player can be found on the Flash Video Player page. If you have written or seen an unlisted plugin, please report so in my forum!
The example flvplayer.html works right out of the box. If you look at it's source code (in a text or HTML editor), you can see that both instances of the flvplayer are inserted in the page with a small javascript. These javascripts use the external ufo.js script by Bobby van der Sluis in order to prevent the annoying "click here to activate" message. If you copy the flvplayer to your website, make sure you don't forget to copy the ufo.js file as well. The ufo.js is inserted in the HTML page right at the top:
<script type="text/javascript" src="ufo.js"></script>
An insertion javascript allows you to set the location of the movie, it's width and height, the version and build of Flash that is needed (just leave this to 7 and 0) and the backgroundcolor of the movie. You can also send a list of so-called Flashvars to the script (for that see the next paragraph):
<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
var FO = { movie:"flvplayer.swf",width:"300",height:"20",majorversion:"7",build:"0",bgcolor:"#FFFFFF",
flashvars:"file=video.flv&showdigits=true&autostart=true" };
UFO.create(FO,"player1");
</script>
When the HTML page loads, the javascript replaces the part of your HTML with the "id" you provided in the javascript (in this case the paragraph with the id "player1"), and you have a Flash player running on your website.
If you cannot use javascript on your website (for example if you run the flvplayer on a profile site like MySpace), you can use an "embed" code instead of the javascript. Your flvplayer.swf will probably be on another server then. That is OK, but note that your playlist.xml should always reside on the same server than your SWF, or else the security restrictions won't allow the flvplayer to load it:
<embed src="http://www.myfileserver.com/folder/flvplayer.swf" width="300" height="200" bgcolor="#FFFFFF" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=http://www.myfileserver.com/folder/playlist.xml&showdigits=true&autostart=true" />
The flashvars are settings you can insert into your HTML code to control both behavior and appearance of the flvplayer. In the installation example above, you can see how to insert these flashvars: just insert them into the "flashvars" attribute of your embed code, and stack them with the "&" symbol. Here is a list of all flashvars, their default values are bold:
| Name | Values | Explanation |
| file | URL (video.flv) | The location of the file to play. It can be a single FLV file, an RTMP stream * or an RSS or XSPF playlist. For more info about playlists, see below. |
| autostart | true,false | Set this to "true" if you want the m3player to automatically start playing. |
| shuffle | true,false | If you have a playlist, the flvplayer will shuffle through the songs. Set this to "false" if ou don't want that. |
| repeat | true,false | Set this to true to make the flvplayer automatically repeat playing when a song is completed. |
| backcolor | COLOR (0xFFFFFF) | Backgroundcolor of the flvplayer. In the "extras" folder of this download there's a colorpicker script with which you can pick a hexadecimal color. |
| frontcolor | COLOR (0x000000) | Texts / buttons color of the flvplayer. In the "extras" folder of this download there's a colorpicker script with which you pick a right hexadecimal color. |
| lightcolor | COLOR (0x000000) | Rollover/ active color of the flvplayer. In the "extras" folder of this download there's a colorpicker script with which you can pick a hexadecimal color. |
| displayheight | NUMBER (height-20px) | Height of the display. Set it to the same height as the flvplayer to remove the controlbar. Set it to less than the flvplayer's height-20 to show the playlist. |
| linkfromdisplay | true, false | If you defined links in your playlist and set this to true, a click on the display will jump to the link. Else a click on the display will play/pause the MP3. |
| linktarget | FRAME (_SELF) | This is the target frame in which the link and fullscreen pages will show up. Set it to "_blank" to open them in a new window. |
| showicons | true, false | If set to false, the play and activity icons in the display won't show. |
| overstretch | true,false,fit,none | This flashvars controls the stretching of images/videos. The default "fit" will scale them disproportionally to exactly fit the display, "true" will scale proportionally to fill the display, "false" will scale proportionally to fit the display and "none" won't scale the images/videos at all. |
| showdigits | true,false | Set this to true to show the digits for % loaded, elapsed and remaining time in the flvplayer. |
| showfsbutton | true,false | Set this to true to show the fullscreen button. |
| fullscreenpage | URL (fullscreen.html) | HTML page to jump to for fullscreen. This HTML page has the flvplayer included at 100% screensize. |
| fsreturnpage | URL (flvplayer.html) | HTML page to return to from fullscreen. This usually is the page you currently include the player into. Both the "fsreturnpage" and "file" are saved as a flashcookie before jumping to fullscreen. |
| fullscreenmode | true,false | Set this to true to tell the player it is in fullscreen mode (it's done in the fullscreen.html). If so, it shows the controls 50% transparent and links the fullscreen button to the fsreturnpage. |
| volume | NUMBER (80) | Startup volume of the flvplayer. |
| bufferlength | NUMBER (5) | Number of seconds a video should be buffered ahead before the player starts it. Set this smaller for fast connections or short videos. Set this bigger for slow connections. |
| autoscroll | true,false | Set this to true to let the playlist automatically scroll, based upon the mouse cursor. It defaults to false, at which you'll see a scrollbar. |
| thumbsinplaylist | true,false | Set this to true if you want to show small thumbnails of the cover images in the playlist. |
| callback | URL (undefined) | You can set the location of a server-side script here to track callback statistics. The flvplayer will send the url, title and id of any song that is either started or completed by the user. A small example of a statistics script can be found in the "extras" folder of this download. |
| streamscript | URL (undefined) | URL of an optional script to use for 'fake streaming' FLV files. The parameters 'file' and 'pos' are sent to the script. An example is 'stream.php' in the 'extras' folder, more info can be found here |
| enablejs | true, false | Set this to "true" to enable javascript interaction. An example of how to control the rotator with javascript can be found here at my website. The example uses the mediaplayer, but all controls are similar to the ones for the flvplayer. |
| width | NUMBER | Force the width of your movie if you have a messed-up display in IE. Normally, just setting the width in your HTML will be sufficient. |
| height | NUMBER | Force the height of your movie if you have a messed-up display in IE. Normally, just setting the height in your HTML will be sufficient. |
* For refering to RTMP streams, the additional "id" flashvar has to be sent as well. Example: "&file=rtmp://my.streaming.server/mypath&id=video_one". You can also insert streams into playlists with this file/id pairing (see below).
Note that you can urlencode your flashvars in order to prevent the use of the ? = & symbols. The urlencoded values for these symbols are: ? → %3F, = → %3D, & → %26. So if your "file" flashvar has the value of getflv.php?id=23421, you can set it like this: getflv.php%3Fid%3D23421.
Besides a single file, you can also load an entire playlist of videos into the flvplayer. The flvplayer supports two commonly used playlist formats to ensure maximum compatibility: RSS (much-used for Podcasts) and XSPF (much used for CC music). The example playlist.xml of this download is in XSPF format.
Note that you can also send each tag like a flashvar to the flvplayer, in case you use a single FLV file. So if you have a single file "video.flv" and want to display a preview image, you can set the flashvars "file=video.flv&image=preview.jpg". Here is a list of all flashvars and their corresponding XSPF/RSS tags that are supported by the flvplayer. Their names should be self-explanatory:
| Flashvar | XSPF Tag | RSS Tag |
| file | location | enclosure or media:content |
| title | title | title |
| author | creator | author |
| link | info | link |
| image | image | media:thumbnail or itunes:image |
| id | identifier | guid |
| start | meta * | - |
* The start flashvar allows you to provide a starting percentage for each playlist item. This way, you can turn a playlist into a chapter-index if your refer each item to the same file, but with different starting points. However, if you set a starting point 50% inside a file, the player will still have to download the first 50% as well. This is how the tag looks like in XSPF:
<meta rel="http://www.jeroenwijering.com/start">50</meta>
I'd like to point out two common pitfalls users encounter when using playlists. First, a playlist should always reside on the same server as the SWF file, due to security restrictions of the Flash Player (there is a small workaround, the "external_feed.php" in the "extras" folder of this download). Second, always try to use full URL's (including the http:// part) when referring to files, links or images in your playlists. It will save you a lot of troubles with unresponsive flvplayers or "file not found" errors!
I've included some additional playlist-related files in the "extras" folder of this download. First, the "force_download.php" script will enable you to force a download of your mediafiles instead of opening them in your Windows MediaPlayer or any other program. If you copy this script to your website and fill out the "link" tags of your playlist like this: "force_download.php?file=path_to_my_file.mp3", the small link buttons of the playlist will act like download buttons for your files.
Second, the "extras" folder contains a PHP example of how to create a playlist on-the-fly, either by pulling data off a database or scanning a certain directory for mediafiles. In both cases you can feed the php file to the flvplayer with the "file" flashvar.
If your progressbar isn't running or if your video dimensions are messed-up, your FLV file doesn't have correct metadata inserted. You can fix this by using the small tool available at www.buraks.com/flvmdi/.
This player will run quite OK inside the Flash Player 7. However, the following features are not supported: display of GIF/PNG images, smoothing of scaled images/video, VP6 encoded video, javascript control and the digits in the controlbar.
I receive a lot of requests for creating customized versions of my players. In most cases however, a clever setting of the flashvars already fulfilled the requests, so please make sure you check the list of flashvars first! Additionally, I do not design or program any particular (paid-for) customizations (I just don't have time for it), but interesting features will be plugged into the next update of the players. I created a Third Party forum category on my website to bring together site owners and freelance developers.
If you are familiar with actionscripting yourself, you should find that changing or adding to the players is quite simple. To get started, I've provided a clear documentation of the code, including a schematic overview of the players.
For tips, tricks, additional info and bug reports, you can always have a look at my forum's Flash FLV Player threads.
For more info about the embedding of Flash in HTML, have a look at my Embedding Flash article.
For more info about Flash Video and some compression tips, check out my Flash Video Compression article.