Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Configuring the JW Player

NOTE: This document is outdated.  For the most updated versions, please refer to the player-specific configuration guides:  Configuration Options for v5 or Configuration Options for v4.

Purpose

This guide will show you how to optimally configure the JW Player for your website.

Introduction

The JW Player is designed to allow for quick and easy embedding of your video on the web. The player is classically simple yet highly configurable and can be customized through scores of configuration options, plugins and skins.

Contents

FlashVars

The JW Player for Flash and Image Rotator support a large number of FlashVars, making them easy to customize. Here's an example with three FlashVars, one for the playlist, one for the background color and one for automatically starting a song:

Object / Embed

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' id='player1' name='player1'>
   <param name='movie' value='player.swf'>
   <param name='allowfullscreen' value='true'>
   <param name='allowscriptaccess' value='always'>
   <param name='flashvars' value='file=playlist.xml&backcolor=white&autostart=true'>
   <embed id='player1'
          name='player1'
          src='player.swf'
          width='300'
          height='300'
          allowscriptaccess='always'
          allowfullscreen='true'
          flashvars='file=playlist.xml&backcolor=white&autostart=true'
   />
</object>

SWFObject 1.5 (recommended)

<script type="text/javascript">
    var so = new SWFObject('player.swf','flashContent','300','250','9');
    so.addParam('allowfullscreen','true');
    so.addParam('allowscriptaccess','always');
    so.addParam('bgcolor','#FFFFFF');
    so.addParam('flashvars','file=playlist.xml&backcolor=white&autostart=true');
    so.write('flashbanner');
</script>

SWFObject 2.X

<script type="text/javascript">
   var flashvars = {
      'file': 'playlist.xml',
      'backcolor': 'white',
      'autostart': 'true'
   };

   var params = {
      'allowfullscreen':    'true',
      'allowscriptaccess':  'always',
      'bgcolor':            '#ffffff'
   };

   var attributes = {
      'id':                 'player1',
      'name':               'player1'
   };

   swfobject.embedSWF('player.swf', 'flashContent', '300', '250', '9', 'false', flashvars, params, attributes);
</script>

As you can see, FlashVars are entered as a single string, with an "=" symbol separating the name and value and an "&" symbol separating subsequent FlashVars. There's no limit to the number of FlashVars you can add to the embed code. Many are supported by the JW Player and Image Rotator.

Note: There are no spaces between FlashVars and they are always named in all lower-case letters.

Configuration XML

The player also supports configuration via a configuration XML file. This is especially useful for large sites that want to maintain a consistent look and feel. You'll need to tell the player where to look for the configuration file, as demonstrated below.

Object / Embed

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' id='player1' name='player1'>
   <param name='movie' value='player.swf'>
   <param name='allowfullscreen' value='true'>
   <param name='allowscriptaccess' value='always'>
   <param name='flashvars' value='config=config.xml'>
   <embed id='player1'
          name='player1'
          src='player.swf'
          width='300'
          height='300'
          allowscriptaccess='always'
          allowfullscreen='true'
          flashvars='config=config.xml'
   />
</object>

SWFObject 1.5 (recommended)

<script type="text/javascript">
    var so = new SWFObject('player.swf','flashContent','300','250','9');
    so.addParam('allowfullscreen','true');
    so.addParam('allowscriptaccess','always');
    so.addParam('bgcolor','#FFFFFF');
    so.addParam('flashvars','config=config.xml');
    so.write('flashbanner');
</script>

SWFObject 2.X

<script type="text/javascript">
   var flashvars = {
      'config': 'config.xml'
   };

   var params = {
      'allowfullscreen':    'true',
      'allowscriptaccess':  'always',
      'bgcolor':            '#ffffff'
   };

   var attributes = {
      'id':                 'player1',
      'name':               'player1'
   };

   swfobject.embedSWF('player.swf', 'flashContent', '300', '250', '9', 'false', flashvars, params, attributes);
</script>

Your configuration then resides in a file with the following structure:

<config>
   <repeat>true</repeat>
   <backcolor>>333333</backcolor>
   <volume>40</volume>
   <playlist>right</playlist>
   <playlist.size>150</playlist.size>
   <controlbar>over</controlbar>
</config>

Note - If there are configuration options set in both the configuration XML and the embed flashvars, the later configuration will always be used.

Playlist Properties

Certain configuration options are better described as properties of playlist items. This includes:

For a complete listing of configuration parameters for an individual plugin, refer to that particular plugin’s setup instructions in the playlist properties section of the flashvars page.

Plugin Configuration

Like the player, plugins may also require configuration. Plugin configuration is specified using the following convention:

FlashVars

pluginname.pluginvariable=variablevalue

Configuration XML

<pluginname.pluginvariable>variablevalue</pluginname.pluginvariable>

These configuration parameters may also be included in a playlist, though plugins are not required to honor changes to their configuration.

For a complete listing of configuration parameters for an individual plugin, look for it's setup instructions in the LongTail Video Addons Library.

Media Provider Configuration

In many respects, MediaProviders are like plugins in that they may need to be supplied with configuration information. You can specify MediaProvider configuration using the following convention:

FlashVars

mediaprovidername.mediaprovidervariable=variablevalue

Configuration XML

<mediaprovidername.mediaprovidervariable>variablevalue</mediaprovidername.mediaprovidervariable>

Currently, the following configuration parameters are available:

HTTP

RTMP