JW PLAYER 5 Config

JW PLAYER 5 Config

image for JW PLAYER 5 Config

I use JW Player 5 as the media player for websites I build.



Spanish - https://gitlab.educ.ar/core/lib-public/tree/987bbed3c5e9cfe96e2e3bf965c69fac45ab8e37/jwplayer-5.10





Here is an example playlist (with one video) in the most widely used format: RSS withmedia: extensions:
 version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
      Big Buck Bunny is a short animated film by the Blender Institute,
        part of the Blender Foundation.

      Sat, 07 Sep 2002 09:42:31 GMT
       url="/videos/bbb.mp4" duration="33" />
       url="/thumbs/bbb.jpg" />


In order to load this playlist into the player, save it as an XML file, upload it to your webserver and point the player to it using the


Crossdomain in Flash

The Adobe Flash Player contains a crossdomain security mechanism, similar to JavaScript's Cross-Site Scripting restrictions. Flash's security model denies certain operations on files that are loaded from a different domain than the player.swf. Roughly speaking, three basic operations are denied:
Generally, file loads (XML or SWF) will fail if there's no crossdomain access. Attempts to access or manipulate data (ID3, waveforms, bitmaps) will abort.

Crossdomain XML

Crossdomain security restrictions can be lifted by hosting a crossdomain.xml file on the server that contains the files. This crossdomain file must be placed in the root of your (sub)domain, for example:
Before the Flash Player attempts to load XML files, SWF files or raw data from any domain other than the one hosting the player.swf, it checks the remote site for the existence of such a crossdomain.xml file. If Flash finds it, and if the configuration permits external access of its data, then the data is loaded. If not, the secure operation will not be allowed.

Allow All Example

Here's an example of a crossdomain.xml that allows access to the domain's data from SWF files on any site:


Configuration Options


This guide is a list of all configuration options (flashvars) the JW Player for Flash v5 supports.


Configuration options are entered into the embed code and define how the player looks and functions.



First, a note on encoding. If you are embedding the Flash player using SWFObject or /< code, you must URL encode the three characters ? = & inside flashvars, because of the way these options are loaded into Flash (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&provider=flv, you must encode the option to:
Note, if you are using the JW Embedder, URL encoding these options is not necessary.

Playlist Properties

To load a playlist, only a single flashvar is required:
playlistfile ( undefined )
Location of an XML playlist to load into the player.
Note - If you're using the JW Embedder, you can also pass in several types of structured data that represents the playlist. See the JW Embedder Reference Guide for more information. 
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. Set this to present the duration in the controlbar before the video starts. It can also be set to a shorter value than the actual file duration. The player will restrict playback to only that section.
file ( undefined )
Location of the file or playlist to play, e.g. http://www.mywebsite.com/myvideo.mp4.
image ( undefined )
Location of a preview (poster) image; shown in display before the video starts.
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 )
Set this flashvar to tell the player in which format (regular/streaming) the player is. By default, theprovider is detected by the player based upon the file extension. If there is no suiteable extension, it can be manually set. The following provider strings are supported:
  • video: progressively downloaded FLV / MP4 video, but also AAC audio. See Media Support.
  • sound: progressively downloaded MP3 files. See Media Support.
  • image: JPG/GIF/PNG images. See Media Support.
  • youtube: videos from YouTube. See Media Support.
  • http (Flash only): FLV/MP4 videos using HTTP pseudo-streaming. See HTTP Pseudostreaming.
  • rtmp (Flash only): FLV/MP4/MP3 files or live streams using RTMP streaming. SeeRTMP Streaming.
Note - In addition to these built-in providers, 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 is available from our AddOns repository. Third party developers interested in building a custom provider should check our our developer site, which includes documentation and a MediaProvider SDK.
start ( 0 )
Position in seconds where playback should start. This option works for HTTP Pseudostreaming,RTMP Streaming and the MP3 and YouTube files. It does not work for regular videos.
streamer ( undefined )
Location of an RTMP or HTTP server instance to use for streaming. Can be an RTMP application or external PHP/ASP file. See RTMP Streaming and HTTP Pseudostreaming.
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.


These flashvars control the look and layout of the player.
controlbar.position ( over* )
Position of the controlbar. Can be set to bottomtopover and none.
Note - The default value for this setting varies depending on whether or not the JW Embedder is used to embed the player. If the Embedder is used, the controlbar's position will be set to overIf the player is embedded as a Flash-only component (i.e., using SWFObject to embed player.swf), the default position will be bottom.
controlbar.idlehide ( false )
If controlbar.position is set to over, this option determines whether the controlbar stays hidden when the player is paused or stopped.
display.showmute ( false )
Shows a mute icon in the player's display window while the player is playing. Disabled by default.
dock ( true )
set this to false to show plugin buttons in controlbar. By default (true), plugin buttons are shown in the display.
icons ( true )
set this to false to hide the play button and buffering icons in the display.
playlist.position ( none )
Position of the playlist. Can be set to bottomtoprightleftover or none.
Note - In HTML5 mode on iOS devices, to scroll the playlist, users must use a two-finger swipe gesture. To enable one-finger scrolling, simply include the iScroll 4 JavaScript library in the of your HTML document.
playlist.size ( 180 )
When the playlist is positioned below the display, this option can be used to change its height. When the playlist lives left or right of the display, this option represents its width. In the other cases, this option isn't needed.
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 skins 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 repository contains a list of available skins.


These flashvars control the playback behavior of the player.
autostart ( false )
Set this to true to automatically start the player on load.
bufferlength ( 1 )  Flash only
Number of seconds of the file that has to be loaded before the player starts playback. Set this to a low value to enable instant-start (good for fast connections) and to a high value to get less mid-stream buffering (good for slow connections).
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 )
Playlist item that should start to play. Use this to start the player with a specific item instead of with the first item.
mute ( false )
Mute the sounds on startup. Is saved in a cookie.
netstreambasepath ( undefined )
The netstreambasepath should be set to a URL from which relative paths will be calculated for video files. Introduced in JW Player 5.4, this configuration parameter directs the video and httpmedia providers to request video files relative to the specified netstreambasepath rather than relative to the player SWF (see below). This will likely cause issues for publishers using the JW Embedder with relative file paths.
Note - This does not affect any other URLs (such as skins, playlists, or plugins), but relative URLs contained within a playlist will be calculated relative to this path.
Note - The netstreambasepath configuration option exists as a workaround for a technical limitation in Flash. All video in Flash must be loaded using Adobe's NetStream class. For historical reason, relative file paths passed into the NetStream are always resolved relative to the SWF making the request.
The JW Player uses the NetStream class to load media for the video and http media providers. With the introduction of the HTML5 player, it became impossible to consistently reference a video file via a relative path, as in Flash mode would load it relative to the player SWF, while in HTML5 mode it would load relative to the current page. The netstreambasepath is a workaround that allow for a consistent referencing by specifing the original path from which relative URLs should be resolved.
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 JavaScript or 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 )  Flash only
This sets the smoothing of videos, so you won't see blocks when a video is upscaled. Set this tofalse 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. There'll be black borders.
  • fill: stretch the image/video while maintaining its aspect ratio, completely filling the display.
volume ( 90 )
Startup audio volume of the player. Can be 0 to 100.


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 )  Flash only
background color of the controlbar and playlist. This is white by default.
frontcolor ( 000000 )  Flash only
color of all icons and texts in the controlbar and playlist. Is black by default.
lightcolor ( 000000 )  Flash only
Color of an icon or text when you rollover it with the mouse. Is black by default.
screencolor ( 000000 )  Flash only
Background color of the display. Is black by default.
The four color flashvars must be entered using hexadecimal values, as is common forweb colors (e.g. FFCC00 for bright yellow).

Config XML

All options can be listed in an XML file and then fed to the player with a single option:
config ( undefined )  Flash only
location of a XML file with flashvars. Useful if you want to keep the actual embed codes short. Here's an example:
Here is an example of such an XML file:


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


JavaScript API Reference


The purpose of this guide is to discuss the new JS API that the JW Player 5.3 introduces. It is a new, shorthand API for interacting with your website. This is a new implementation and is only application to JW Player Version 5.3 and higher.


The 5.3 player introduced a new, shorthand JavaScript API for interacting with your website. This API abstracts any differences between Flash and HTML5; any code you write will work with both technologies.
In JW Player 5.5, we introduced JavaScript plugins. JS Plugins provide a convenient way to package and distribute code written for this API. Simply add a bit of configuration to your player, and your JavaScript will automatically be loaded into the page. See our guide on Building JavaScript Plugins for more information.
For JW Player Versions 5.2 and below, the player used the 4.x JavaScript API. SeeJavascript API Reference.


Getting Started

First, you'll need to upload the API library (jwplayer.js) to your web server. We recommend putting it, along with player.swf, in a folder called jwplayer in the root of your site. Once it's on your web server, add this bit of code to your HTML pages, in theof your page:
To get a sense of the possibilities of what you can do with the API, here's a quick example that showcases how to control the player from the page:
Loading the player ...
  • Start the player
  • Get current position
Of course it's also possible to have the player manipulate the page. Here's a second example, using the event block of the JW Player embedder:
Waiting for video to complete…
Loading the player ...
Waiting for video to complete…
The following sections give a detailed description of the JW Player API, describing how to:
  • Select a player.
  • Get variables from a player.
  • Call functions on a player.
  • Listen to events from a player.

Embedding with SWFObject

If you embed the player using SWFObject, rather than the built-in setup() function, you can still use the JavaScript API, although you'll need to wait for Flash to be loaded on the page before interacting with the API. SWFObject 2.2 includes a callback function (in this example, named flashLoaded) which is executed when SWFObject has finished embedding Flash into the page. Make sure you wait until this function is called before making any calls to the API.
Here's a simple example of using the SWFObject callback:
var flashvars = { file:'/videos/video.mp4' };
var params = { allowfullscreen:'true', allowscriptaccess:'always' };
var attributes = { id:'player', name:'player' };

swfobject.embedSWF('/jwplayer/player.swf', 'container', 320, 240, '9.0.115', 'false',
 flashvars, params, attributes, flashLoaded);

function flashLoaded(e) {
 // e.ref is a reference to the Flash object. We'll pass it to jwplayer() so the API knows where the player is.

 // Add event listeners
 jwplayer(e.ref).onReady(function() { alert('Player is ready'); });
 jwplayer(e.ref).onPlay(function() { alert('Player is playing'); });

 // Interact with the player

Embedding with an or tag

If you embed the player directly using an  or tag, simply pass your tag's id to the API when referencing the player:


The first thing you need to do when attempting to interact with a JW Player, is to get a reference to it. The easiest way, probably sufficient for most use cases is this:
// Start the player on this page
Only when you have multiple players on a page, you need to be more specific on which player you want to interact with. In that case, there are three ways to select a player:
  • With the id of the element you instantiated the player over:
  • With the actual DOM element itself:
    var element = document.getElementById('container');
  • With the index in the list of players on the page (in order of loading):
    The selector jwplayer(0) is actually the same as jwplayer().


Here is a list of all the variables that can be retrieved from the player:
Returns the current PlaylistItem's filled buffer, as a percentage (0 to 100) of the total video's length.
Returns the player's current fullscreen state, as a boolean (true when fullscreen).
Returns the current PlaylistItem's metadata, as a JavaScript object. This object contains arbitrary key:value parameters, depending upon the type of player, media file and streaming provider that is used. Common metadata keys are widthduration or videoframerate.
Returns the player's current audio muting state, as a boolean (true when there's no sound).
Returns the player's entire playlist, as an array of PlaylistItem objects. Here's an example playlist, with three items:
 { duration: 32, file: '/uploads/video.mp4', image: '/uploads/video.jpg' },
 { title: 'cool video', file: '/uploads/bbb.mp4' },
 { duration: 542, file: '/uploads/ed.mp4', start: 129 }
Returns the playlist item at the specified index. If the index is not specified, the currently playing playlistItem is returned. The item that is returned is an object with key:value properties (e.g. file,duration and title). Example:
{ duration: 32, file: '/uploads/video.mp4', image: '/uploads/video.jpg' }
Returns the player's current width, in pixels.
Returns the player's current height, in pixels.
Returns the player's current playback state. It can have the following values:
  • BUFFERING: user pressed play, but sufficient data has to be loaded first (no movement).
  • PLAYING: the video is playing (movement).
  • PAUSED: user paused the video (no movement).
  • IDLE: either the user stopped the video or the video has ended (no movement).
Returns the current playback position in seconds, as a number.
Returns the currently playing PlaylistItem's duration in seconds, as a number.
Returns the current playback volume percentage, as a number (0 to 100).


Here is a list of all functions that can be called on the player:
Change the player's fullscreen mode. Parameters:
  • state:Boolean (undefined): If state is undefined, perform a fullscreen toggle. Otherwise, set the player's fullscreen mode to fullscreen if true, and return to normal screen mode if false.
Note: This function will only work in HTML5 mode, due to Flash restrictions on setting full-screen mode.
Change the player's mute state (no sound). Parameters:
  • state:Boolean (undefined): If state is undefined, perform a muting toggle. Otherwise, mute the player if true, and unmute if false.
Loads a new playlist into the player. The playlist parameter is required and can take a number of forms:
  • Array: If an array of PlaylistItem objects is passed, load an entire playlist into the player. Example:
     { duration: 32, file: '/uploads/video.mp4', image: '/uploads/video.jpg' },
     { title: 'cool video', file: '/uploads/bbb.mp4' },
     { duration: 542, file: '/uploads/ed.mp4', start: 129 }
  • Object: If a PlaylistItem is passed, load it as a single item into the player. Example:
    { duration: 32, file: '/uploads/video.mp4', image: '/uploads/video.jpg' },
  • String: Can be an XML playlist, or the link to a single media item (e.g. an MP4 video).
Jumps to the playlist item at the specified index. Parameters:
  • index:Number: zero-based index into the playlist array (i.e. playlistItem(0) jumps to the first item in the playlist).
Jumps to the next playlist item. If the current playlist item is the last one, the player jumps to the first.
Jumps to the previous playlist item. If the current playlist item is the first one, the player jumps to the last.
resize(width, height)
Resizes the player to the specified dimensions. Parameters:
  • width:Number: the new overall width of the player.
  • height:Number: the new overall height of the player.
Note: If a controlbar or playlist is displayed next to the video, the actual video is of course smaller than the overall player.
Toggles playback of the player. Parameters:
  • state:Boolean (undefined): if set true the player will start playing. If set false the player will pause. If not set, the player will toggle playback.
Toggles playback of the player. Parameters:
  • state:Boolean (undefined): if set true the player will pause playback. If set false the player will play. If not set, the player will toggle playback.
Stops the player and unloads the currently playing media file from memory.
Jump to the specified position within the currently playing item. Parameters:
  • position:Number: Requested position in seconds.
Sets the player's audio volume. Parameters:
  • volume:Number: The new volume percentage; 0 and 100.


Here is a list of all events the player supports. In JavaScript, you can listen to events by assigning a function to it. Your function should take one argument (the event that is fired). Here is a code example, with some JavaScript that listens to changes in the volume:
 function(event) {
 alert('the new volume is: '+event.volume);
Note that our official embed method contains a shortcut for assigning event listeners, directly in the embed code:
Loading the player ...
And here's the full event list:
Fired when the currently playing item loads additional data into its buffer. Event attributes:
  • bufferPercent: Number: Percentage (between 0 and 100); number of seconds buffered / duration in seconds.
Fired when the player's buffer has exceeded the player's bufferlength property (default: 1 second). No attributes.
Fired when an error has occurred in the player. Event attributes:
  • message: String: The reason for the error.
Fired when the player's fullscreen mode changes. Event attributes:
  • fullscreen: boolean. New fullscreen state.
Fired when new metadata has been discovered in the player. Event attributes:
metadata: Object: dictionary object containing the new metadata.
Fired when the player has gone into or out of the mute state. Event attributes:
  • mute: Boolean: New mute state.
Fired when a new playlist has been loaded into the player. Event attributes:
  • playlist: Array: The new playlist; an array of PlaylistItem objects.
Fired when the playlist index changes to a new playlist item. This event occurs before the player begins playing the new playlist item. Event attributes:
  • index Number: Zero-based index into the playlist array (e.g. 0 is the first item).
Fired when the player has initialized and is ready for playback. No attributes.
Fired when the player's dimensions have changed (the player is resizing or switching fullscreen). Event attributes:
  • width: Number: The new width of the player.
  • height: Number: The new height of the player.
Fired just before the player begins playing. Unlike the onPlay and onBuffer events, the player will not have begun playing or buffering when onBeforePlay is triggered. This event can be used to prevent playback from occurring by calling the stop() function.

onPlay(callback)Fired when the player enters the PLAYING state. Event attributes:
  • oldstate: String: the state the player moved from. Can be PAUSED or BUFFERING.

onPause(callback)Fired when the player enters the PAUSED state. Event attributes:
  • oldstate: String: the state the player moved from. Can be PLAYING or BUFFERING.

onBuffer(callback)Fired when the player enters the BUFFERING state. Event attributes:
  • oldstate: String: the state the player moved from. Can be PLAYINGPAUSED or IDLE.

onSeek(callback)Fired after a seek has been requested either by scrubbing the controlbar or through the API. Event attributes:
  • position: Number: The position of the player before the player seeks (in seconds).
  • offset: Number: The requested position to seek to (in seconds).

onIdle(callback)Fired when the player enters the IDLE state. Event attributes:
  • oldstate: String: the state the player moved from. Can be PLAYINGPAUSED orBUFFERING.

onComplete(callback)Fired when the player has finished playing the current media. No event attributes.
onTime(callback)While the player is playing, this event is fired as the playback position gets updated. This may occur as frequently as 10 times per second. Event attributes:
  • duration: Number: Duration of the current item in seconds.
  • offset: Number: When playing streaming media, this value contains the last unbuffered seek offset.
  • position: Number: Playback position in seconds.

onVolume(callback)Fired when the player's volume changes. Event attributes:
  • volume: Number: The new volume percentage (0 to 100).


Note that every API call to a JW Player in turn returns the player instance. This makes it possible to chain API calls (like with jQuery):

jwplayer().setVolume(50).onComplete(function(){ alert('done!'); }).play();


JavaScript plugins can expose their own APIs. These are available by calling thegetPlugin function:

getPlugin(plugin_id)Returns a reference to a JavaScript plugin. Each plugin may expose its own public API. Example: 


You can access the player components' APIs by calling getPlugin() as well. For example, to hide the controlbar, simply call:

The following list describes the public functions for each of the player's components:


show()Shows the controlbar, if it is currently hidden.hide()Hides the controlbar, if it is currently showing.onShow(callback)Executes the callback function when the controlbar is shown. callback receives an argument which contains the following properties: 
  • component (String): This value will be set to "controlbar"
  • boundingRect (Object): Contains the coordinates (x, y, width and height) of the controlbar, relative to the video display area. If the controlbar is positioned outside of the video display, the coordinates are set to 0.
onHide(callback)Executes the callback function when the controlbar is hidden. callback receives an argument which contains the following properties: 
  • component (String): This value will be set to "controlbar"
  • boundingRect (Object): Contains the coordinates (x, y, width and height) of the controlbar, relative to the video display area. If the controlbar is positioned outside of the video display, the coordinates are set to 0.


show()Shows the dock, if it is currently hidden.hide()Hides the dock, if it is currently showing.onShow(callback)Executes the callback function when the dock is shown. callback receives an argument which contains the following properties: 
  • component (String): This value will be set to "dock"
  • boundingRect (Object): Contains the coordinates (x, y, width and height) of the dock, relative to the video display area.
onHide(callback)Executes the callback function when the dock is hidden. callback receives an argument which contains the following properties: 
  • component (String): This value will be set to "dock"
  • boundingRect (Object): Contains the coordinates (x, y, width and height) of the dock, relative to the video display area.
setButton(id, handler, outGraphic, overGraphic)Adds a button to the dock, or replaces the existing button if one with the same id already exists. 
  • id (String): The string used to identify the button. It must be unique, but it doesn't have to match the name of the plugin.
  • handler (Function): The JavaScript function that is called when the button is clicked.
  • outGraphic (String): The URL of the image that is displayed when the mouse is not over the button.
  • overGraphic (String): The URL of the image that is displayed when you hover over the button.


show()Shows the display icons, if they are currently hidden.hide()Hides the display icons, if they are currently showing.onShow(callback)Executes the callback function when the display icon is shown. callback receives an argument which contains the following properties: 
  • component (String): This value will be set to "display"
  • boundingRect (Object): Contains the coordinates (x, y, width and height) of the display icon, relative to the video display area.
onHide(callback)Executes the callback function when the display icon is hidden. callback receives an argument which contains the following properties: 
  • component (String): This value will be set to "display"
  • boundingRect (Object): Contains the coordinates (x, y, width and height) of the display icon, relative to the video display area.

Got something to say? Sign up or login to participate in the conversation.

Join RunnerFaith

Share running events, inspiration, motivation with other faith runners!
image for Canberra Australia 20170610

Canberra Australia 20170610

Trauna and Taurus in Canberra Australia 20170610


Posted in Pictures

image for Hot Chocolate 15K Columbus 20151114

Hot Chocolate 15K Columbus 20151114


Posted in Pictures

image for Washington DC Trip 2016

Washington DC Trip 2016


Posted in Pictures

image for Sidney Australia Trip 2008

Sidney Australia Trip 2008


Posted in Pictures

image for Fishing Class OKC 20120811

Fishing Class OKC 20120811

Posted in Pictures