HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创


Home » Tools » JW FlvPlayer – 最好的免费FLV播放器

JW FlvPlayer – 最好的免费FLV播放器


JW FlvPlayer个人觉得是我用过的最好的免费FLV播放器了,当年youtobe在名不见经传的时候就是使用的这个播放器。播放器现在最新的版本是5.2了,不过我这里介绍还是以前的3.12版本的。如果你喜欢最新的,到JW FlvPlayer官方网站下载


    width: 480,
    height: 400,
    // 设置videoHeight=height-20,则播放器的控制工具栏默认在播放器底部显示
    // 如果不设置则控制工具栏则默认隐藏,鼠标放到播放器上才显示出来
    videoHeight: 380,
    // isAutoPlay为flase再设置image,则以开始会显示视频封面
    // 如果设置为true,则自动播放完视频后显示封面
    isAutoPlay: false,
    image: 'http://www.yaohaixiao.com/scripts/yalbum/samples/mm/3.jpg',
    file: 'http://www.yaohaixiao.com/swf/video.flv'


    width: 580,
    height: 400,
    // 设置了videoWidth小于width,则播放列表的宽度就是width-videoWidth
    // 程序默认设置了thumbsinplaylist,则会在播放列表中显示playlist.xml
    // 中的image图片封面,很库的哦!
    videoWidth: 360,
    videoHeight: 400,
    // logo就是显示视频播放区域的右上角(50x50)
    logo: 'http://www.yaohaixiao.com/img/y.png',
    isAutoPlay: false,
    file: 'http://www.yaohaixiao.com/swf/playlist.xml'


    width: 480,
    height: 400,
    image: 'http://www.yaohaixiao.com/scripts/yalbum/samples/mm/3.jpg',
    // 在播放MP3音频文件时,设置这个参数,会显示虚拟的音波震动效果
    isShowEq: true,
    file: 'http://www.yaohaixiao.com/swf/gxdy.mp3',
	isAutoPlay: false


    width: 580,
    height: 400,
    videoWidth: 360,
    videoHeight: 400,
    // 在播放MP3音频文件时,设置这个参数,会显示虚拟的音波震动效果
    isShowEq: true,
    file: 'http://www.yaohaixiao.com/swf/playlist-mp3.xml',
	isAutoPlay: false

Downloads:flvplayer.zip Source.zip

FlvPlayer API 文档: 

This readme contains information regarding the installation and
configuration of the JW MP3 Player, JW FLV Player, JW Media Player
and JW Image
. It’s also available in Chinese.
Contents of this readme:

For a quick setup of flashvars, check out the setup wizard.


The example HTML file in the download works right out of the box. If you look
at it’s source code (in a text or HTML editor), you can see that the SWF files
are inserted in the page with a small javascript. These javascripts use the
external swfobject.js script by Geoff Stearns in order to
prevent the annoying “click here to activate” message. If you copy the SWF to
your website, make sure you don’t forget to copy the swfobject.js file as well.
It is inserted in the HTML page right at the top:

<script type="text/javascript" src="swfobject.js"></script>

An insertion javascript allows you to set the location of the SWF, it’s width
and height, a name, the version of Flash that is needed and the backgroundcolor
of the movie. You can also send a list of flashvars (with the addVariable()
command) to the SWF to configure it (for that see the next paragraph). When the
HTML page loads, the javascript replaces the element of your HTML with the “id”
you provided in the javascript (make sure you have an element with that

<p id="player">
<a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player.
<script type="text/javascript">
	var so = new SWFObject('mediaplayer.swf','player','400','400','7');

If you cannot use javascript on your website (for example if you run the SWF
on a profile site like MySpace), you can use an “embed” code instead of the
javascript. Your SWF will probably be on another server then. That is OK, but
note that your XML playlist (if used) should always reside on the same server
than your SWF, or else the security restrictions won’t allow the player to load
it. Having MP3 or JPG or FLV files on a different server is no problem.

<embed src="http://www.myfileserver.com/folder/mediaplayer.swf" width="400" height="400" 
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" 
flashvars="file=http://www.myfileserver.com/folder/test.flv&displayheight=300" />


Flashvars are variables you can insert into your HTML code to control both
behavior and appearance of the player/rotator. With the swfobject embed method,
you add them with the addVariable() function and in the embed method they are
inside the “flashvars” attribute, stacked with an “&” symbol. At this page you’ll
find a wizard in which you can easily set all flashvars. In the lists below, all
flashvars are explained.

All variables with an * are also available to the rotator.


  • displayheight (number): This flashvar is used by the players and
    sets the height of the display. It defaults to the height of the SWF object
    minus the controlbar (20px), but if you set it to a smaller height, the
    playlist will show up. If you set it to the height of the player itself (or
    larger), the controlbar will auto-hide over the video.
  • file* (url): The location of the file to play. It can be a single
    file (MP3/FLV/RTMP/JPG/SWF/PNG/GIF) or a playlist
    for the players. The rotator only accepts playlists.
  • height* (number): As with the width of the player/rotator, this
    variable is already set with a default embed code. However, sometimes (notably
    on IE), this won’t get through (so you get a messed-up display). Then use this
    flashvar to tell the player/rotator how many pixels high it should be.
  • image (url): If you play MP3 of FLV files, you can use this
    flashvar to show a preview image or album cover. It can be a JPG/SWF/PNG/GIF
    file. You can also assign an image for every item in a playlist.

  • shownavigation* (true,false): Another flashvar only for the
    rotator. It enables/disables the navigation bar.
  • transition*
    (bgfade,blocks,bubbles,circles,fade,flash,fluids,lines,random,slowfade): This
    flashvar is only used by the rotator. It sets the transition to use between
    images. “random” will show all transitions randomly. The default is “fade”.
  • width* (number): As with the height of the player/rotator, this
    variable is already set with a default embed code. However, sometimes (notably
    on IE), this won’t get through (so you get a messed-up display). Then use this
    flashvar to tell the player/rotator how many pixels wide it should be.


  • backcolor* (color): Backgroundcolor of the player/rotator. In the
    “extras” folder of this download there’s a colorpicker script with which you
    can pick a color value. The default for the players is 0xFFFFFF (white) and
    for the rotator 0x000000 (black).
  • frontcolor* (color): Texts / buttons color of the player/rotator.
    The default for the players is 0x000000 (black) and for the rotator 0xFFFFFF
  • lightcolor* (color): Rollover/ active color of the player/rotator.
    The default for the players is 0x000000 (black) and for the rotator 0xCC0000
  • screencolor (color): Color of the display background screen. The
    default is 0x000000 (black). Instead of choosing another color, you can of
    course also set a background


  • autoscroll (true,false): By default, the playlist area of the
    players will have a scrollbar if the number of items is too long. If you set
    this flashvar to “true”, the scrollbar wil disappear and the playlist will
    scroll automatically, depending upon the mouse position.
  • displaywidth (number of pixels): Instead of the “displayheight”,
    you can set “displaywidth” to a size smaller that the SWF width to make the
    playlist appear at the right side of the display.
  • kenburns* (true,false): Set this to true to apply the Ken Burns effect to
    images in the rotator. Note that this works best when using large images from
    the same server on a fast computer. Small images from different servers and
    slow computers produce blurry results and choppy motion. Works also best in
    combination with the “slowfade” transition.
  • largecontrols (true,false): Set this to true to make the controlbar
    twice as large. This is useful to visually impaired users.
  • logo* (url): Set this flashvar to put a watermark logo in the top
    right corner of the display. All image formats are supported, but transparent
    PNG files give the best results.
  • overstretch* (true,false,fit,none): Defines how to stretch
    images/movies to make them fit the display. “true” will stretch them
    proportionally to fill the display, “false” will stretch them to fit. “fit”
    will stretch them disproportionally to fit both height and width. “none” will
    show all items in their original dimensions. Defaults to “fit” for the players
    and “false” for the rotator.
  • showdigits (true,false,total): Set this to false if you don’t want
    the elapsed/remaining time to display in the controlbar of the players. Quite
    handy to save some space. Set it to “total” to show the total time instead of
    the remaining time.
  • showdownload (true,false): Set this to true to show a
    downloadbutton in the controlbar. The downloadbutton links to the link
  • showeq (true,false): Set to true to show a fake equalizer in the
    display. It adds a nice graphical touch when you are playing MP3 files.
  • showicons* (true,false): Show or hide the play and activity icons
    in the middle of the display. Defaults to true for the players and false for
    the rotator. If set to false, the overlaid controlbar will also hide with the
  • showvolume (true,false): Set this to false to hide the volume
    button and save space.
  • thumbsinplaylist (true,false): If you have a playlist that also
    includes preview images with the <image> element, you can set this
    flashvar to “true” to show them in the playlist.


  • autostart (true,false,muted): Set this to “true” to make the player
    automatically start playing when the page loads. If set to “muted”, the player
    will autostart with the volume set to 0 and an unmute icon in the display.
  • bufferlength (number): This sets the number of seconds an FLV
    should be buffered ahead before the player starts it. Set this smaller for
    fast connections or short videos. Set this bigger for slow connections. The
    default is 3 seconds.
  • repeat* (true,false,list): By default, the players will stop
    playback after every item to preserve bandwidth (repeat=false). You can set
    this to “list” to playback all items in a playlist once, or to “true” to
    continously playback your song/movie/playlist.
  • rotatetime* (number): Use this flashvar to set the number of
    seconds you want an image to display. The default is “10” for the mediaplayer
    and “5” for the rotator.
  • shuffle* (true,false): If you use a playlist, the players and
    rotator will automatically shuffle the entries to prevent boredom. Set this
    flashvar to “false” to play all items sequentially.
  • smoothing (true,false): If set to “false”, video will not smooth,
    resulting in a more pixelated, but better performing display. Use this for
    large screen / slow computer combinations.
  • start* (second): If you use RTMP or HTTP streaming (not for regular
    FLV or MP3 files); use this flashvar to specify an offset start position. You
    can also use this flashvar in XSPF
    , so you can make a chapter index of a single file.
  • volume* (number): The default volume for playback of sounds/movies
    is 80, but you can set another startup value with this flashvar.


  • audio* (url): You can set this flashvar to the location of an
    external mp3 file that should serve as an additional audiotrack. Use this for
    accessibility commentary, director’s comments or, with the imagerotator,
    background music.
  • bwfile (url): Image to use for bandwidth checking; used in
    conjunction with bwstreams. Assign a simple image to this flashvar (this one will do
    nice), or the rtmp location of the serverside bwcheck script that can
    be downloaded here
    . Here’s an example
    bandwidth checking player
  • bwstreams (comma-separated list of bitrates): The different streams
    to use for bandwidth checking; used in conjunction with bwfile. If, for
    example, you want to play the video video.flv and set this to
    100,250,500,1000 and the player detects a bandwidth of 349kbps, the
    file video_250.flv will be played. Here’s an example
    bandwidth checking player
    . Note that bandwidth checking is ignored for
    audio and images!
  • callback (url): Set this flashvar to the location of a serverside
    script (PHP/ASP) that can process callbacks. The players will send a callback
    every time an item starts/stops, so you can save statistics with the
    serverside script. More info can be found in this demonstration
    . An example callback script is placed in the “extras” folder of the
    downloads. Set this to “analytics” to send the callbacks automatically to
    Google Analytics.
  • captions (url): You can set this flashvar to the location of an
    external textfile with captions. The players support SMIL’s TimedText format
    and the SRT format (example)
    used with ripped DVD’s. Set this flashvar to “captionate” if your FLV file has
    Captionate captions embedded.
    If you use multitrack Captionate captions, you can set this flashvar to
    “captionate0″, “captionate3″ etc. to display a certain track. A live example
    of different captions can be found
    . You can also assign captions for every item in a playlist.

  • enablejs* (true,false): Set this to true to enable javascript
    interaction. This’ll only work online! Javascript interaction includes
    playback control, asynchroneous loading of media files and return of track
    information to javascript.An example of all supported javascript functions can
    be found on
    this page
  • fsbuttonlink (url): The players automatically shows a fullscreen
    button if a user has installed a capable flashplayer (from 9.0.28). With this
    flashvar, you can link to an alternative page to display a sort-of fullscreen
    version of the player. Use serverside variables or the getQueryParamValue()
    function of SWF Object to
    send the “file” and any other flashvars to that fullscreen-substitute page.
  • id (string): The unique identifier of the file to play. It will be
    sent to serverside callbacks(see below here, and is also used when using RTMP
    streams. In the latter case, the “file” flashvar points to the rtmp:// stream,
    and this “id” flashvar to the precise file to play. You can also assign an id
    for every item in a playlist.

  • javascriptid* (string): If you control multiple players/rotators
    with javascript, you can use this flashvar to give each of them a unique ID.
    It will be returned with every call to the getUpdate() event. Demo on this page.
  • link (url): Set here the url to an external URL, downloadeable
    version of the file, or force-download script you can
    use for downloading the file. You can assign link-clicks to the display (see
    below), the downloadbutton
    and every item in a playlist.

  • linkfromdisplay* (true,false): You can set this flashvar to “true”
    to make a click on the image/video display to result in a jump to the “link”
    webpage. By default, a click on the display will play/pause the movie.
  • linktarget* (frame): The targetframe a link (from the display or
    playlist buttons) will open into. The default is “_self”. Set it to “_blank”
    to open links in a new window.
  • streamscript (url): This flashvar is the URL of an optional script
    to use for ‘fake streaming’ FLV files, eg. through PHP, ASP or LigHTTPD. The
    parameters ‘file’ and ‘pos’ are sent to the script. An example file,
    “stream.php”, can be found in the “extras” folder of the downloads. If you use
    the LigHTTPD FLV module, set this to the value “lighttpd”. Note that all FLV
    files you want to fake-stream should have an array with keyframe-positions in
    their metadata! More info and a running example can be found at this page.
  • type (mp3,flv,rtmp,jpg,png,gif,swf,rbs,3gp,mp4,m4v): The players
    determine the type of file to play based upon the last three characters of the
    “file” flashvar. This method doesn’t work if you use database id’s or
    mod_rewrite to retrieve the files. Therefore you can set this flashvar to tell
    the players of which filetype the file you want to play is. The type is also
    assigned to every item in a playlist.
    If no match is found, the player assumes it loads a playlist.
  • useaudio (true,false): Set this to false to force the additional
    audiotrack to mute by default.
  • usecaptions (true,false): Set this to false to force the captions
    to hide by default.
  • usefullscreen (true,false): Set this flashvar to false if you don’t
    want to use the flash9 fullscreen functionality. If you added a “fsbuttonlink”
    flashvar as well, this link will become the default action for the fullscreen
  • usekeys (true,false): Set this to false to disable keyboard input
    (SPACE,UP,DOWN,LEFT,RIGHT) for the players.

Note that you must urlencode any ? = & symbols inside flashvars. The
urlencoded values for these symbols are: ?%3F, =
%3D, &%26. So if your “file” flashvar has the value
of getplaylist.php?id=123, you can set it like this:


You can load a single file as well as an entire playlist of files into the
players. The players look at the filename to determine whether a single file or
a playlist is loaded. For example, if your file is test.mp3, it will presume you
load a single MP3 file, because the extension is “mp3″. If your filename is
getlist.php, the SWF will see a playlist. If you use dynamic scripts to load a
single file (e.g. getmovie.php%3Fid%3D123), you can tell the player which file
it loads by using the additional “type” flashvar: “type=flv”.

The players support three commonly used playlist formats to ensure maximum
compatibility: XSPF (much used
for CC music), RSS (much-used for
Podcasts) and ATOM (much-used by
Blogs). The example playlist.xml that comes with the downloads is in XSPF
format. On my website, I’ve placed additional examples of both an xspf
and an rss playlist,
with nearly all supported tags included. If you assign a regular feed without
any media enclosures to the player, the player will use the API from Talkr.com to perform a text-to-speech operation
on the feed’s items, instantly turning your feed into a podcast!

Here is a complete list of all flashvars with corresponding XSPF/RSS/ATOM
tags that are supported by the player/rotator:

Flashvar XSPF Tag RSS Tag ATOM Tag
file <location> <enclosure> or <media:content> <link rel=”enclosure”>
title <title> <title> <title>
link <info> <link> <link>
id <identifier> <guid> <id>
image <image> <media:thumbnail> or <itunes:image> <link rel=”image”>
author <creator> <author> <name>
captions <link rel=”captions”> <enclosure type=”captions”> <link rel=”captions”>
audio* <link rel=”audio”> <enclosure type=”audio”> <link rel=”audio”>
category** <album> <category> <category>
start*** <meta rel=”start”>
type**** last three characters of <location>or <meta rel=”type”> mimetype of <enclosure> mimetype of <link rel=”enclosure”>

* The Image Rotator will only playback the ‘audio’ of the first item in the
playlist, to provide background music. The players support a per-element extra
audio track.

** The “category” element can be used to specify advertisements. You can set
it to “preroll”, “postroll” or “overlay”. Use the “link” element of the
playlistentry to set the commercial’s URL. In the extras of my website, there’s
an advertisements
example page

*** The “start” element is only supported by XSPF playlists, and only works
with streaming files (HTTP or RTMP). Use it to specify the starting position in
seconds. Here’s an
example page

**** If the XSPF “location” url doesn’t contain a useful extension (e.g.
“mp3″ or “flv”), use the “meta” element to tell the player which filetype it is
(e.g. <meta rel='”type”>mp3</meta> ). For RSS and ATOM, the filetype
is automatically extracted from the mimetype.

Note that, if you play a single file, you can send each item in this table as
a flashvar to the SWF. This way, you can add an image, title, id, link, etc. to
a single file as well. So if you have, for example, the flvplayer and a single
file “video.flv” and want to display a preview image too, you can set the
flashvars “file=video.flv” and “image=preview.jpg”. For refering to RTMP
streams, the additional “id” flashvar has to be sent as well. Example:
“file=rtmp://my.streaming.server/mypath” and “id=video_one”.

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, tunneling the external feed through a serverside script. Here’s an example
in PHP
.). 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 SWF’s or “file not found” errors!

I’ve included some additional PHP scripts in the “extras” folder of my website,
two for auto-creating playlists and one for force-downloading files.


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 these first! I’ve made an online
wizard you can use to easily set all flashvars
. 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.

If you are familiar with actionscripting yourself, you should find that
changing or adding to the players is quite simple. To get started, check out
this schematic overview of the player’s code. Note that the flvplayer, mp3player
and mediaplayer are identical in terms of code:

schematic overview of the players

A player starts by instantiating either the ImageRotator or Mediaplayer
class, which loads all config and playlist variables and sets up the MCV cycle.
The config and feeder objects are available to each member of the MCV cycle. The
two objects in red have javascript handlers, so
all their functions are available through javascript. Here is an online page with
examples of all javascript functions

Communication between the MCV’s members is strictly defined (with the
updates, changes and events). Creating a complete new look for any of the
players (or adding something like a rating field or recommendations) can be done
by creating a new class that extends the AbstractView and instantiating it in
the MediaPlayer.as class. The ControlbarView class is a good AbstractView
extension to copy and modify for this purpose (it contains all controlbar

Because of the many requests to hide part of the url for media files to
prevent stealing, I have added a single line of code to the script in the FLA’s
timeline. If you un-comment this line (//var prefix = “…”), you can set here a
prefix url the players will use for the FLV/MP3/etc. Set this e.g. to the
directory where your mediafiles are located
(http://www.jeroenwijering.com/uploads/), and then you only have to add the
filename of your mediafiles to the flashvars/playlists.

Placing the player/rotator into another Flash file is also possible. Just
copy-paste the player or rotator symbol from the FLA file in the download to
your FLA file. Also make sure you copy the “com” directory to the directory of
your FLA file as well; it contains all scripting. If that’s done, you can set
all flashvars as variables in the root timeline and start the player from there
as well. Make sure you set the “width” and “height” flashvar too, or the
player/rotator will stretch to your entire stage! Here’s an example:

// Set the flashvars (booleans and numbers should also be quoted)
var width = "320";
var height = "240";
var file = "my_video.flv";
var autostart = "true";
// Start the player
var mpl = new com.jeroenwijering.players.MediaPlayer(this.player);

Additionally, I have made the controller a public object, so you can control
the mediaplayer with the getEvent() function from anywhere in your flash site
(the schematic above has a list of all getEvent() options). Let’s continue the
small script above:

// Control the mediaplayer


Here’s a small list with frequently-encountered problems:

  • If you get strange display errors on IE (most notably after refreshing),
    the Stage dimensions are probably not properly set. You can use flashvars
    “width” and “height” to force specific dimensions to the player/rotator and
    fix this problem.
  • Note that, due to security restrictions in the Flash Player, javascript
    interaction will not work when testing locally. Accessing remote media files
    or jumping to remote URL’s also won’t work because of this. Both will work
    fine if you test from your webserver.
  • True fullscreen only works if you have the Flash
    Player 9,0,28,0
    or higher installed. If you use the SWFObject javascript to embed
    your player, you can use it’s auto-update functionality. Also make sure you
    have the parameter “allowfullscreen” set to “true” in your embed code!
  • If the progressbar isn’t running with your FLV file, 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/.
  • If the player plays FLV files on your computer but not on your website and
    your website is running of an IIS server, then the FLV mimetype isn’t added to
    the server yet. You can check this by typing in the direct address to your FLV
    file in your browser. If you get a 404, you’re on IIS without mimetype. Please
    contact your webserver administrator on this (if you’re an admin, here’s
    how to fix it
  • If you encounter too fast or too slow playback of MP3 files or if your
    progressbar is messed up, your MP3 files contains variable bitrate encoding.
    Flash isn’t very good at handling these, it’s best to stick to constant
    bitrate encoding. Also make sure to stick to a sampling frequency that is a
    multitude of 11.025kHz (48kHz, for example, also poses problems). The free iTunes software has a basic, decent MP3
  • The player/rotator 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.

An up-to-date list of third-party plugins for each list can be found on my website, at the respective player’s
page. If you have written or seen an unlisted plugin, please report so in my forum!

For tips, tricks, additional info and bug reports, you can always have a look
at my Support Forum.

For more info about the embedding of Flash in HTML, have a look at my Embedding Flash

For more info about Flash Video and some compression tips, check out my Flash Video
Compression article

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:JW FlvPlayer – 最好的免费FLV播放器

« »

2 条评论

  • 免费的FLV播放器中,这个是最好的了!


电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)