Step 1: Download the Installation Zip

Installing the JW Player onto your page is a simple two-step process. If you haven't already, download the installation ZIP, which contains everything you need to get started.

Step 2: Upload Player Files to Website

Transfer the player.swf, yt.swf and swfobject.js file from the ZIP to your website. Make sure that you've also uploaded all the necessary videos, songs and/or images to your site.

Step 3: Embed Player Code into HTML

Embed the player in your HTML page with the lines of code below. Note: If you place the files in different directories, make sure to set the references in this code accordingly.

<p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
	var s1 = new SWFObject('player.swf','player','400','300','9');
	s1.addParam('allowfullscreen','true');
	s1.addParam('allowscriptaccess','always');
	s1.addParam('flashvars','file=video.flv');
	s1.write('preview');
</script>

Notice the flashvars parameter above can contain a list of variables for configuring the player to use different Plugins or Skins. To quickly set up FlashVars, use the setup wizard. Simply choose an example, select the variables you want to use and paste the code onto your page. It's that easy.

JW Player: Flashvars

Here’s a list of all configuration options (flashvars) the player accepts. Options are entered in the embed code to set how the player looks and functions.

Encoding

First, a note on encoding. You must URL encode the three glyphs ? = & inside flashvars, because of the way these flashvars are loaded into the player (as a querystring). The urlencoded values for these symbols are listed here:

• ? --> %3F
• = --> %3D
• & --> %26

If, for example, your file flashvar is at the location getplaylist.php?id=123&type=flv, you must encode the option to getplaylist.php%3Fid%3D123%26type%3Dflv.

The player will automatically URLdecode every option it receives.

Playlist properties

To load a playlist, only a single option is required:

• playlistfile (undefined): Location of an XML playlist to load into the player.

The following flashvars can be set instead of playlistfile. They are used to create a playlist with a single item. They set various properties of the media item to load (e.g. the source file or preview image or title). Those properties are:

• duration (0): duration of the file in seconds.
• file (undefined): location of the mediafile or playlist to play.
• image (undefined): location of a preview image; shown in display and playlist.
• mediaid (undefined): unique string (e.g. 9Ks83JsK) used to identify this media file. Is used by certain plugins, e.g. for the targeting of advertisements. The player itself doesn’t use this ID anywhere.
• provider (undefined): this is determines what type of mediafile this item is, and thus which provider the player should use for playback. By default, the provider is detected by the player based upon the file extension. If there's no suitable extension or the player detects the wrong provider, it can be manually set. The following default providers are supported:
  • video: progressively downloaded FLV / MP4 video, but also AAC audio.
  • sound: progressively downloaded MP3 files.
  • image: JPG/GIF/PNG images.
  • youtube: videos from YouTube.
  • http: FLV/MP4 videos played as http pseudo-streaming.
  • rtmp: FLV/MP4/MP3 files played from an RTMP server.
• start (0): position in seconds where playback has to start. Won't work for regular (progressive) videos, but only for streaming (HTTP / RTMP).
• streamer (undefined): location of an rtmp/http server instance to use for streaming. Can be an RTMP application or external PHP/ASP file. More info here.

In addition to the built-in providers listed above, it is possible to load custom providers into the JW Player, e.g. for specific CDN support. Custom providers are packed in a separate SWF file, much like a plugin. A number of custom providers are available from our AddOns repository. Third party developers interested in building a custom provider should check out our MediaProvider SDK.

Note: Technically, any playlist item property is also available as an option. In practice though, the properties author, date, description, link, tags and title are not used anywhere if a single media file is loaded.

Layout

These flashvars control the look and layout of the player.

• controlbar (bottom): position of the controlbar. Can be set to bottom, top, over and none.
• dock (true): set this to true to show plugin buttons in controlbar. By default (false), plugin buttons are shown in the display.
• icons (true): set this to false to hide the play button and buffering icon in the display.
• playlist (none): position of the playlist. Can be set to bottom, top, over, right or none.
• playlistsize (180): when below this refers to the height, when right this refers to the width of the playlist.
• skin (undefined): location of a skin file containing graphics which change the look of the player. There are two types of skins available:
  • XML/PNG skins: these skins consist of an XML file with settings and a bunch of PNG images. The files are packed up in a ZIP, which improves the time it takes for them to load over the network. Building your own skin is extremely easy and can be done with any basic image and text editor. See XML/PNG Skinning for more info.
  • SWF skins: these skins consist of a single SWF file, built using Adobe Flash. This type of skin has been supported since the 4.0 player. Since SWF skins can only be built using Flash (a $500+ package) and since this skinning model can easily break, SWF skins are considered deprecated in favor of PNG skins.

Our AddOns Library contains a list of available skins.

Behavior

These flashvars control the playback behavior of the player.

• autostart (false): Set this to true to automatically start the player on load.
• bufferlength (1): Number of seconds of the file that has to be loaded before starting. Set this to a low value to enable instant-start and to a high value to get less mid-stream buffering.
• fullscreen (false): Fullscreen state of the player. This is a read-only flashvar, useful for plugins. Available since 4.4.
• id: (undefined): Unique identifier of the player in the HTML DOM. You only need to set this option if you want to use the JavaScript API and want to target Linux users.
  • The ID is needed by JavaScript to get a reference to the player. On Windows and Mac OS X, the player automatically reads the ID from the id and name attributes of the player's HTML embed code. On Linux however, this functionality does not work. Setting the id option in addition to the HTML attributes will fix this problem.
• item (0): PlaylistItem that should start to play. Use this to start the player with a specific item selected.
• mute (false): Mute all sounds on startup. This can be overridden by a user's cookie, which stores the user's last muting state.
• playerready (undefined): By default, the player calls a playerReady() JavaScript function when it is initialized. This option is used to let the player call a different function after it’s initialized (e.g. registerPlayer()).
• plugins (undefined): A powerful feature, this is a comma-separated list of plugins to load (e.g. "hd,viral"). Plugins are separate SWF files that extend the functionality of the player, e.g. with advertising, analytics or viral sharing features. Visit our AddOns repository to browse the long list of available plugins.
• repeat (none): What to do when the mediafile has ended. Has several options:
  • none: do nothing (stop playback) whever a file is completed.
  • list: play each file in the playlist once, stop at the end.
  • always: continously play the file (or all files in the playlist).
  • single: continously repeat the current file in the playlist.
• shuffle (false): Shuffle playback of playlist items. The player will randomly pick the items.
• smoothing (true): This sets the smoothing of videos, so you won’t see blocks when a video is upscaled. Set this to false to disable the feature and get performance improvements with old computers / big files.
• stretching (uniform): Defines how to resize the poster image and video to fit the display. Can be:
  • none: keep the original dimensions
  • exactfit: disproportionally stretch the video/image to exactly fit the display.
  • uniform: stretch the image/video while maintaining its aspect ratio. Borders will appear around the image/video.
  • fill: stretch the image/video while maintaining its aspect ratio, completely filling the display. This results in cropping the media.
• volume (90): Startup volume of the player. Can be 0 to 100.

Logo

Unlicensed copies of the JW Player contain a small watermark that pops up when the player is buffering. In licensed copies of the player, this watermark is empty by default. It is possible to place your own watermark in the player using the following options:

• logo.file (undefined): location of an external jpg, png or gif image which replaces the watermark image.
• logo.link (undefined): link to direct to when the watermark image is clicked on.
• logo.linktarget (_blank): link target for logo click. Can be _self, _blank, _parent, _top or a named frame.
• logo.hide (true): by default, the logo will automatically show when the player buffers and hide 5 seconds later. When this option is set false, the logo will stay visible all the time.
• logo.position (bottom-left): The corner in which to display the logo. In can be one of the following:
  • bottom-left
  • bottom-right
  • top-left
  • top-right

Note: Once again, the logo options can only be used for licensed players!

Colors

These options are available when either using no skin or when using skins built with the older SWF skinning model (these skins have the extension .swf). These color options will be deprecated once SWF skinning support is dropped in a future release.

• backcolor (ffffff): background color of the controlbar and playlist. This is white by default.
• frontcolor (000000): color of all icons and texts in the controlbar and playlist. Black by default.
• lightcolor (000000): color of an icon or text when you rollover it with the mouse. Black by default.
• screencolor (000000): background color of the display. Black by default.

The four color flashvars must be entered using hexadecimal values, as is common for web colors (e.g. FFCC00 for bright yellow).

Config XML

All of the above flashvars can also be listed in an XML file and then fed to the player with a single flashvars:

• config (undefined): location of a XML file with flashvars. Useful if you want to keep the actual embed codes short. Here’s an example:

<config>
   <image>files/bunny.jpg</image>

   <repeat>true</repeat>
   <volume>40</volume>
   <playlist>right</playlist>
   <playlist.size>150</playlist.size>

   <controlbar>over</controlbar>
</config>

Options set in the embed code will overwrite those in the config XML.

Note: Due to the crossdomain restrictions of Flash, you cannot load a config XML from one domain in a player on another domain. This issue can be circumvented by placing a crossdomain.xml file on the server that hosts your XML.