This article contains all configuration options JW Player supports.
IMPORTANT:
Certain JW Player features may require a specific license. Please contact our team if your license does not support the features or configuration options you need.
Introduction
JW Player contains a number of configurable options. Some options, like width or mute, are top level, while other more advanced options may be nested, such as the ones used for skin customizations and advertising.
Here is an example setup that contains both setup options and specific advertising options:
jwplayer("myElement").setup({
"playlist": "https://example.com/myVideo.mp4",
"height": 360,
"width": 640,
"autostart": "viewable",
"advertising": {
"client": "vast",
"tag": "http://adserver.com/vastTag.xml"
}
});
Setup Options
These are the options for configuring the layout and playback behavior of a player. Each is placed directly into the setup
of the player.
Appearance
Property | Description | Default |
---|---|---|
aspectratio string |
Maintains proportions when width is a percentage. Will not be used if the player is a static size. Must be entered in ratio "x:y" format. |
- |
controls boolean |
Whether to display the video controls (control bar and display icons) | true |
displaydescription boolean |
Configures if the description title of a media file should be displayed | true |
displayHeading 8.6.0+ boolean |
(Outstream only) Controls if heading above the outstream player is displayed Possible values include: • false : No heading is shown• true : Heading is shown with default text: Advertisement . Use intl.{lang}.displayHeading to customize or localize text. |
false |
displayPlaybackLabel 8.6.0+ boolean |
Enables call-to-action text beneath the play button on the player idle screen. When set to true , you can potentially see up to a 5% increase in the number of times viewers click the play button to watch a video. The default call-to-action text is "Play." You can also localize this message for your viewers. |
false |
displaytitle boolean |
Configures if the title of a media file should be displayed | true |
height number |
The desired height of your video player (in pixels). Should be omitted when aspectratio is configured |
360 |
horizontalVolumeSlider 8.18.4+ boolean |
Displays the volume slider horizontally within the control bar If the player is in audio mode, a horizontal slider will always be displayed. By default, the volume slider is displayed as a vertical slider above the control bar. |
false |
qualityLabels array |
By default, the JW Player will set video quality levels using information from the manifest files. Use this configuration option to apply a custom quality label to a desired bandwidth in kbps, works for HLS and DASH. For example: qualityLabels:{"2500":"High","1000":"Medium"} |
- |
nextUpDisplay boolean |
Configures whether the Next Up modal is displayed | - |
renderCaptionsNatively 8.0.1+ boolean |
(Chrome and Safari only) Determines if the renderer of the browser or of the player is used to display captions Possible values include: true : Captions render using the renderer of the browser.false : Captions render using the renderer of the player.Note: See also: captions |
false (Chrome)true (Safari) |
stretching string |
Resize images and video to fit player dimensions. See graphic below for examples "uniform" — Fits JW Player dimensions while maintaining aspect ratio "exactfit": Will fit JW Player dimensions without maintaining aspect ratio "fill"— Will zoom and crop video to fill dimensions, maintaining aspect ratio "none" — Displays the actual size of the video file. (Black borders) |
uniform |
width number | string |
The desired width of your video player (in pixels or percentage) | 640 |
Stretching Examples
Behavior
Property | Description | Default |
---|---|---|
aboutlink string |
Custom URL to link to when clicking the right-click menu | https://www.jwplayer.com/learn-more |
abouttext string |
Custom text to display in the right-click menu | - |
autostart string |
Whether the player will attempt to begin playback automatically when a page is loaded. Set to 'viewable' to have player autostart if 50% is viewable. | false |
defaultBandwidthEstimate 8.3.0+ number |
When set, suggests an initial bandwidth estimate (in bits per second) which overrides the default bandwidth estimate of the player for new viewers to your site Use case: New users to your site may experience low-quality video for several seconds before the quality adapts to the connection speed at which content is delivered. This speed may be limited by their connection speed. In this case, you would want to confirm that the majority of your viewers have fast connections. NOTE: Since this property sacrifices player performance for video quality, it is strongly recommended not to set this property. The player is optimized to select the best bandwidth after several seconds. |
50000 |
liveSyncDuration 8.12.0+ number |
Defines the distance from the live edge in seconds in the following scenarios: • The player attempts to start a live or DVR stream • A user clicks the Live button to return to the live content of the stream This property can accept any value between 5-30. |
25 |
mute boolean |
Configures if the player should be muted during playback If a user overrides this property, the user’s action will persist for the duration of the user session. For example, if all players are configured with mute: true and a user unmutes a player, each subsequent player that the user encounters will start unmuted. |
false |
nextupoffset 8.9.0+ number | string |
Configures when the Next Up card displays during playback A positive value is an offset from the start of the video. A negative value is an offset from the end of the video. This property can be defined either as a number ( -10 ) or a percentage as a string ("-2%" ) |
-10 |
playbackRateControls boolean |
Whether to display a settings menu to adjust playback speed. If true, the pre-defined options available in the menu are 0.5x, 1x, 1.25x, 1.5x, and 2x. An array can be passed to customize the menu options using playbackRates . Note: This feature is not currently supported in Android with HLS streams. |
false |
playbackRates 8.0+ array of numbers |
Custom playback rate options to display in the settings menu. | [0.25, 0.75, 1, 1.25] |
playlistIndex 8.15.0+number |
Item within a playlist to start playback Within the playlist, the first index is 0 . If the playlistIndex value is negative, the index starts counting from the end of the playlist. A negative value cannot exceed the absolute number of playlist items. For example, in a playlist of 5 items, "playlistIndex": -5 is the lowest acceptable negative number.This property applies to JSON, RSS, and array playlists. |
- |
repeat boolean |
Configures if the player should loop content after a playlist completes | false |
Media
NOTE
The following properties are related to media that is loaded into the player.
You should use the playlist object to define the content that is loaded into the player.
If you have a single content item to load in a player, you can use the following properties to define this item directly within jwplayer().setup
. If you are planning on using multiple media items, these can also be used inside of a playlist array.
Property | Description | Default |
---|---|---|
file string |
URL to a single video file, audio file, or live stream to play Can also be configured inside of a sources array |
- |
description string |
A description of your video or audio item | - |
image string |
URL to a poster image to display before playback starts. | - |
mediaid string |
Unique identifier of this item. Used by advertising, analytics and discovery services | - |
title string |
The title of your video or audio item | - |
type string |
Defining the video file type is required when using a media file url that does not have an extension. Possible values: • aac • mp4 • f4a • f4v • hls • m3u • m4v • mov • mp3 • mpeg • oga • ogg • ogv • vorbis • webm |
- |
YouTube and RTMP media formats are no longer supported.8.0+
Rendering and Loading
Property | Description | Default |
---|---|---|
base string |
Configures an alternate base path for skins and providers | / |
flashplayer string |
Specifies an alternate directory of jwplayer.flash.swf | / |
hlsjsdefault boolean |
Makes HLSjs the default provider when using Chrome for Android. Disable to use the browser's default provider. | true |
liveTimeout 8.1.9+ number |
Configures how a stalled live manifest is handled This property accepts a positive number in seconds, but values between 1-10 are ignored. Set this property to 0 to configure a stream to never time out. The player will continue requesting manifests until it times out. If a live manifest does not update after being requested for longer than liveTimeout , the stream will end with an error event. If you want a stream to end immediately, include an end tag in the manifest. This configuration option only handles stalled manifests, not issues with segment loading. A chunk that results in a 404, for example, will still error out. |
30 |
loadAndParseHlsMetadata boolean |
To enable HLS playback in Safari to trigger the same metadata events that are triggered during HLS playback in Chrome, the player will make additional requests to HLS playlists provided they contain PROGRAM-DATE-TIME tags that the player can use to embed timed metadata.Possible values include the following: • true : The player loads and parses the playlist manifest as it is loaded by Safari and synchronizes the results with media playback. This will also result in multiple manifest requests• false : Prevents the player from sideloading live HLS manifests to parse out-of-band manifest metadata that Safari does not expose like DATERANGE , CUE-OUT , CUE-IN , and DISCONTINUITY tags. |
true |
preload string |
Tells the player if content should be loaded prior to playback. Useful for faster playback speed or if certain metadata should be loaded prior to playback: • none : Player will explicitly not preload content. (Recommended if you are concerned about excess content usage.)• metadata : Loads the manifest and buffers a maximum of one segment of media for HLS and Dash streams.• auto : Loads the manifest and buffers approximately 30 seconds worth of media segments. |
metadata |
Advertising
IMPORTANT
Video ad insertion requires a JW Player Enterprise license. Please contact our team to upgrade your account.
WARNING
Since any changes made to the advertising
object override any advertising settings made in the dashboard, be sure to include all existing advertising dashboard configurations within the advertising
object.
This object configures the video advertising capabilities of JW Player and overrides advertising settings configured in the dashboard. If no schedule is specified, the ad will play as a preroll by default.
Property | Description | Client | Default |
---|---|---|---|
client* string |
(Required) Chooses the ad client that will be used to display advertisements. Possible values include: • dai : Use the Google IMA SDK for dynamic ad insertion• freewheel : Use the Freewheel client• googima : Use the Google IMA SDK - Required for certain ad tags• vast : Use the JW Player VAST client |
All | - |
outstream* 8.6.0+ boolean |
(Required for outstream only) Property enabling outstream functionality NOTE: This must be set to true to enable outstream functionality. |
All | - |
adscheduleid string |
(Recommended) Unique identifier for an ad (break) schedule. This ID is located on the ADVANCED tab of the Ad Schedule Detail page. If you do not have ad schedules created via the dashboard, a randomly-generated, eight character, alpha-numeric value can be set. | All | - |
admessage < 8.6.0 string |
Text that displays during ad playback. WARNING: Starting with JW Player 8.6.0, use the intl object to set this property. |
All | The ad will end in xx seconds |
autoplayadsmuted boolean |
For inline players that start muted when viewed on mobile devices, allows ads to play muted | All | - |
bids object |
Enable Player Bidding with the given settings and bidders. See: advertising.bids | IMA, VAST | - |
companiondiv object |
Gives information to the player related to which div(s) to populate with companion ads. See: advertising.companiondiv | IMA, VAST | - |
conditionaladoptout boolean |
(VPAID-only) Used to tell the player to not play ads with the conditionalAd attribute inside of the VAST response |
VAST | false |
creativeTimeout number |
In milliseconds, the maximum amount of time between the VAST XML being returned and the adStart event before timing out |
VAST | 15000 |
cuetext < 8.6.0 string |
Specify the text that appears when a user mouses over a scheduled advertisement. WARNING: Starting with JW Player 8.6.0, use the intl object to set this property. |
All | Advertisement |
endstate 8.6.0+ string |
(Outstream only) Player behavior after all ads within the ad break have played Possible values include: • suspended : A gray background without controls remains.• close : The player gradually closes. |
All | suspended |
forceNonLinearFullSlot boolean |
For forcing nonlinear ads to be fullsot ads rather than overlays | IMA | - |
freewheel object |
FreeWheel ad client settings. See: advertising.freewheel |
FreeWheel | - |
fwassetid string |
FreeWheel identifier for content configured in FreeWheel MRM | FreeWheel | - |
fwduration number |
FreeWheel-provided length of the content | FreeWheel | - |
loadVideoTimeout number |
In milliseconds, the maximum amount of time between the VAST XML being returned and the adstart event before timing out | FreeWheel, IMA | 15000 |
locale string |
Valid two-letter language code for localization of skip-button language | IMA | - |
maxRedirects number |
The maximum number of redirects the player should follow before timing out | IMA | 4 |
placement 8.10.0+ string |
Value sent in a bid request that identifies the location of a player This value provides advertisers with more information before bidding for a video ad opportunity. You can set one fo the following possible values include: • article • banner • feed • floating • instream • interstitial • slider |
IMA, VAST | article when advertising.outstream: true instream for all other configurations |
podmessage < 8.6.0 string |
Text that displays during playback of an ad pod. Use __AD_POD_CURRENT__ to denote the currently playing item in the pod and __AD_POD_LENGTH__ for the total number of ads in the pod. WARNING: Starting with JW Player 8.6.0, use the intl object to set this property. |
VAST | Ad xx of yy. |
preloadAds boolean |
Enable pre-loading of prerolls, midrolls and postrolls in click-to-play and autostart: 'viewable' NOTE: The preroll of subsequent playlist items is also pre-loaded, but only for VAST. |
IMA, VAST |
false |
repeat 8.6.0+ boolean |
(Outstream only) Controls whether ads play once or continuouslyfalse : After all ads play once, the player enters into an endstate .true : All ads within the ad break repeat until the viewer or an API call interacts with the player. Unless an ad request fails, the player never enters into an endstate . |
All | false |
requestFilter function |
Function that replaces the XMLHttpRequest used to request the ad tag.The function takes one parameter, the request. • request.url : The url being requested• request.xhr : The XMLHttpRequest instance.Modify request.xhr or replace it by returning an object that implements open and send . Invoke xhr.onreadystatechange or xhr.onerror callbacks to complete the request. Invoke xhr.abort to receive abort requests from the player.For more information on XMLHttpRequest , visit MDN.You must return xhr from the function. |
VAST | - |
requestTimeout number |
For VAST, the maximum amount of time, in milliseconds, between the start of the ad break and a returned VAST file before timing out. For IMA and Freewheel, the maximum amount of time, in milliseconds, between the start of the ad break and the ad impression being fired. |
All | 5000 (VAST), 10000 (IMA), 15000 (FW) |
rules object |
Enable ad rules with the given settings and bidders. See: advertising.rules |
IMA, VAST |
- |
schedule array | string |
Load an ad schedule from an external JSON block (array) or VAMP XML (string) See: advertising.schedule |
All | - |
skipmessage < 8.6.0 string |
This is used to provide a customized countdown message WARNING: Starting with JW Player 8.6.0, use the intl object to set this property. |
FreeWheel, VAST | Skip ad in xx |
skipoffset number |
If not present in the VAST file, adds a skip offset to static VAST ads | FreeWheel, VAST |
- |
skiptext < 8.6.0 string |
This sets the text of the Skip button after the countdown is over WARNING: Starting with JW Player 8.6.0, use the intl object to set this property. |
FreeWheel, VAST |
Skip |
tag array | string |
When a string, URL of the ad tag for VAST and IMA plugins, or a string place holder for FreeWheel (VAST and IMA plugins) When an array, URLs of the VAST ad tags to be used as fallbacks in the event that one or multiple ad tags fail to render • (Outstream - Required) • (PB - Required) This is used as a fallback tag when using Player Bidding. When a VAST tag is used, ad tag targeting macros can be added to define features such as GDPR consent. Do not use this property and advertising.vastxml within the same ad break.advertising.schedule is ignored if this option is set. WARNING: If your ad tag uses a VMAP XML template, use the advertising.schedule property. |
All | - |
trackingFilter function |
A function that can be used to filter out a tracking pixel URL so that it is not sent. The function takes one parameter, the tracker URL to be filtered out. You must return false from the function to cancel the default behavior. |
VAST | - |
truncateMacros boolean |
Truncates macro values to 1000 characters Setting this option to false will not truncate the macro value to 1000 characters but GAM still has a limit of 4096 characters. |
IMA | true |
vastLoadTimeout number |
In milliseconds, the maximum amount of time between the ad request and a returned VAST file before timing out | IMA | 10000 |
vastxml string |
VAST XML ad tag that is requested during the configured ad break Do not use this property and advertising.tag within the same ad break.advertising.schedule is ignored if this option is set |
VAST | - |
vpaidcontrols boolean |
For forcing controls to show for VPAID ads If the VPAID creative has built-in controls, showing the controls may be redundant |
IMA, VAST |
- |
vpaidmode string |
(IMA VPAID-only)disabled : VPAID ads will not play and an error will be returned if VPAID is requested enabled : VPAID is enabled using a cross domain iFrame. The VPAID ad cannot access the site. VPAID ads that depend on friendly iFrame access may not playinsecure : The VPAID ad will load in a friendly iFrame. This allows the ad access to the site via javascript Not supported in Freewheel |
IMA | insecure |
withCredentials 8.13.0+ boolean |
Indicates if Access-Control requests for ad tags are made using credentials such as cookies, authorization headers, or TLS client certificates.• true : The player requests an ad tag with credentials. If the request fails, the player makes a second request without credentials.• false : The player makes a single ad request without credentials. |
All | true |
advertising.bids
Use this property to enable and configure Player Bidding with supported bidders.
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/a12bc3D4",
"advertising": {
"bids": {
"bidOnBreaks": 3,
"settings": { },
"bidders": [ ]
}
}
});
Property | Description |
---|---|
bidders* array |
(Required) Defines each bidding partner See: advertising.bids.bidders |
settings* object |
(Required) Defines the mediation layer,
floor price
- floor price -
The value (in cents) that a bid must exceed to qualify to win an auction
, and timeout See: advertising.bids.settings |
bidOnBreaks number |
Number of ad breaks for which bid requests are sent. NOTE: For content with more than three ad breaks, change the default setting to 3 and adjust this value depending on performance. By default, a bid request is made for each ad break. |
advertising.bids.bidders[]
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/a12bc3D4",
"advertising": {
"bids": {
"bidders": [{
"name": "SpotX",
"id": "85394"
}]
}
}
});
Property | Description |
---|---|
id* string |
(Required) Identifier issued by the bidding partner that represents a segment of a publisher's inventory |
name* string |
(Required) Ad partner from which the bid is received Possible values: • Adtelligent • AppNexus • DistrictM • EMX • IndexExchange • MediaGrid • MediaNet • OneVideo • OpenX • PubMatic • Rubicon • Sonobi • SpotX • SynacorMedia • Unruly |
optionalParams object |
Additional parameters that can be appended to the ad tag when SpotX, Pubmatic or IndexExchange is the the ad partner See: advertising.bids.bidders[].optionalParams |
pubid string |
Identifier issued by an ad partner that represents the publisher |
type < 8.13.0 string |
Indicates that the oRTB standard is used by the bidder NOTE: Required only when name is EMX or Pubmatic . Must be set to OpenRTB . |
advertising.bids.bidders[].optionalParams
IMPORTANT
This object should be used only when SpotX, Pubmatic, or IndexExchange is an ad partner.
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/a12bc3D4",
"advertising": {
"bids": {
"bidders": [{
"name": "SpotX",
"id": "85395",
"optionalParams": {
"price_floor": 5.30,
"custom": {
"name": "custom_param_name_goes_here",
"value": "custom_param_value_goes_here"
}
}
}]
}
}
});
Property | Description |
---|---|
content < 8.13.0 object |
OpenRTB content object. See: 3.2.16 Object: Content in the OpenRTB 2.5 specification. |
custom object |
Publisher-defined custom key-value pairs for the bid-request |
no_vpaid_ads boolean |
Removes VPAID creatives from available creative media types. |
passFloorPrice boolean |
Passes the configured floorPriceCents value in the bid request. |
token < 8.13.0 object |
Publisher-defined custom pass-through macros |
advertising.bids.settings
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/a12bc3D4",
"advertising": {
"bids": {
"settings": {
"mediationLayerAdServer": "jwp",
"floorPriceCents": 10,
"floorPriceCurrency": "usd",
"bidTimeout": 4000
}
}
}
});
Property | Description |
---|---|
mediationLayerAdServer* string |
(Required) Mediation layer that decides which ad runs • jwp : (VAST/IMA) An auction is conducted by the player. If a winner is selected, the winner's ad is called. If no winner is selected, the fallback tag is called. You must specify a
floor price
- floor price -
The value (in cents) that a bid must exceed to qualify to win an auction
.• jwpspotx : (VAST) No auction is conducted by the player. The player asks SpotX for a bid and calls the returned ad response regardless of price. This option is equivalent to using JW Player mediation with a $.01
floor price
- floor price -
The value (in cents) that a bid must exceed to qualify to win an auction
. You must set up SpotX line items.• dfp : (IMA) No auction is conducted by the player. All bids are sent to Google Ad Manager (GAM) and rendered as line items that compete against other line items. GAM serves the winning line item. We recommend setting buckets to minimize the number of line items that you must set up in GAM.• jwpdfp : (IMA) An initial auction is conducted by the player. If a winner is selected, the winner's ad will is called. If no winner is selected, the fallback tag is called to serve. If no winner is selected for any reason, all valid bids are sent to Google Ad Manager (GAM) where the bid values are rendered as line items to compete against other line items. The winning line item is served by GAM. You must set floorPriceCents . We recommend setting buckets to minimize the number of line items that you must set up in GAM.Default value: jwp |
buckets array |
(Recommended) Ranges of bid prices When using buckets , bid prices sent to GAM are rounded down to the closest specified increment. Price buckets are helpful to reduce the number of line items in GAM. Without price buckets, one line item per one-cent increment is required. This property only applies when dfp or jwpdfp (only for the GAM portion of the mediation) is selected as the mediationLayerAdServer . |
bidTimeout number |
8.17.0+ Timeout for bid response from when the bid request occurs, in milliseconds Default value: 3000 Min value: 2000 8.13.0+ Timeout for bid response from when the bid request occurs, in milliseconds Default value: 2000 < 8.13.0 Timeout for bid response from after the user clicks to play, in milliseconds If you use SpotX as an ad partner, be sure to make a time allowance for the SpotX SDK to load. Default value: 2000 |
floorPriceCents number |
Price in cents (CPM) that a bid has to beat in order to win This property must be set when mediationLayerAdServer is set to jwp or jwpdfp .NOTE: Determining the best floor price - floor price - The value (in cents) that a bid must exceed to qualify to win an auction depends upon various factors. If you need assistance determining the best floor price, please consult with your JW Player representative or SSP partner. |
floorPriceCurrency string |
Currency of the floorPriceCents This property must be set to usd when mediationLayerAdServer is set to jwp . |
advertising.bids.settings.buckets[]
Property | Description | Default |
---|---|---|
increment number |
Nearest increment to which a bid is rounded down, in bidding currency | 0.01 |
max number |
Maximum value of a price bucket, in bidding currency | - |
min number |
Minimum value of a price bucket, in bidding currency | 0 |
advertising.companiondiv
This is an object with 3 properties: id
, width
and height
. Set these to have JW Player load a companion ad from your VAST/IMA tag into a div on your page. See Companion Ads for more info.
Property | Description |
---|---|
height number |
The targeted desired height of a companion ad that exists in a VAST ad |
id string |
The ID of the div to replace with a companion ad |
width number |
The targeted desired width of a companion ad that exists in a VAST ad |
For an overview of JW Player's advertising capabilities, see its dedicated Video Ads section.
advertising.freewheel
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/a12bc3D4",
"fwassetid": "test_asset",
"duration": 600,
"advertising": {
"freewheel": {
"networkid": 12345,
"adManagerURL": "https://mssl.fwmrm.net/libs/adm/6.24.0/AdManager.js",
"serverid": "http://demo.v.fwmrm.net/ad/g/1",
"profileid": "12345:html5_test",
"sectionid": "test_site_section"
}
}
});
Property | Description |
---|---|
adManagerURL string |
URL of the FreeWheel Ad Manager Your FreeWheel Solution Engineer or Account Representative can provide you with a versioned AdManager URL. |
custom object |
Passes custom-defined key-value pairs to the Freewheel SDK. |
networkid number |
FreeWheel identifier of a network |
profileid string |
FreeWheel identifier of a particular application environment |
sectionid string |
FreeWheel identifier of a location where the video content plays |
serverid string |
URL of FreeWheel ad server |
advertising.rules
Use this property to control how frequently ads play back. See our Ad Rules Reference support article for more information.
jwplayer("myElement").setup({
"playlist": [ ],
"advertising": {
"rules": {
"startOn": 2,
"frequency": 1,
"timeBetweenAds": 300,
"startOnSeek": "pre",
"deferAds": {}
}
}
});
Property | Ad client | Description | Default |
---|---|---|---|
deferAds 8.12.0+ object |
VAST | An empty-object setting that prevents ad playback when the player is on an inactive tab When the player's tab is active again, the last deferred ad break will play. If you want to halt the playback of unviewable ads, configure the autoPause property. This feature cannot be enabled from your JW Player dashboard. |
- |
frequency number |
IMA, VAST |
Regularity of ads within a playlist. For example, if frequency: 3 , ads play before every third playlist item. Use 0 to only play ads on the first playlist item. In the dashboard, this is one of the Ad Frequency Rules. |
1 |
startOn number |
IMA, VAST |
First playlist item allowing ad playback. In the dashboard, this is one of the Ad Frequency Rules. |
1 |
startOnSeek 8.5.0+ string |
VAST | Setting that defines if a returning visitor is served a pre-roll ad when resuming previously-watched video content. pre : Player shows returning visitor a pre-roll ad before resuming video playback.none : Player shows returning visitor no ads and resumes video playback. In the dashboard, this is one of the Long-form Engagement Rules. NOTE: Each of the following must be tracked: the unique viewer, the unique piece of content the viewer was watching, and the time when the viewer left the page during playback of the video content. During the player setup, this information must be passed into the player. Use starttime to pass the time location to resume playback. |
- |
timeBetweenAds number |
VAST | Minimum time in seconds that must elapse after displaying an ad in a schedule before playing the next scheduled ad. In the dashboard, this is one of the Long-form Engagement Rules. |
0 |
advertising.schedule
Use this property to load an entire advertising schedule to JW Player, containing multiple ad breaks. The property value can be a URL to a VMAP schedule or an inline JSON block with ads. This schedule will then be applied to each playlist item. For scheduling ads for individual playlist items, see scheduling ads for playlist items.
Ad Schedules with VMAP Files
If you are planning on using a VMAP file, add the link to a VMAP .xml file as the value for schedule
:
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/a12bc3D4",
"advertising": {
"client": "vast",
"adscheduleid": "t4Xk5tsF",
"schedule": "myvmap.xml"
}
});
The VMAP schedule will then be applied to each playlist item. See our article about VMAP schedules for more information.
Embedded Ad Schedules with JSON
In order to use a JSON-formatted schedule, you must define at least one ad break configured inside of the schedule
property. Each ad break should include an offset
and a tag
or vastxml
.
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/a12bc3D4",
"advertising": {
"client": "vast",
"adscheduleid": "p4Xk5lsZ",
"schedule": [
{
"tag": "myPreroll.xml",
"offset": "pre",
"custParams": {
"testkey1": "testval1",
"testkey2": "testval2"
},
},
{
"vastxml": "<VAST version='2.0'> ... </VAST>",
"offset": "50%"
}
]
}
});
Property | Description | Default |
---|---|---|
custParams object |
Allows for passing custom parameters to an ad break, which then pass through to the URL requested from the ad server | - |
offset string | number |
When to play the configured ad tag • pre : (string) Ad plays as a preroll • post : (string) Ad plays as a postroll• (xx%): (string - VAST only) Ad plays after xx% of the content • (number): (number) Ad plays after the specified number of seconds • (timecode): (string) Ad plays at a specific time, in HH:MM:SS:sss format |
pre |
pod array |
(VAST only) Configures a single ad break to play two or more VAST ads consecutively Do not use use this property with advertising.schedule[].tag or advertising.schedule[].vastxml within the same ad break. Instead of using this property, we strongly recommend using a VAST 3.0 template to configure ad pods. |
- |
tag string | array |
When a string, URL of the ad tag for VAST and IMA plugins, or a string place holder for FreeWheel (VAST plugin only) When an array, URLs of the VAST ad tags to be used as fallbacks in the event that one or multiple ad tags fail to render When a VAST tag is used, ad tag targeting macros can be added to define features such as GDPR consent. Do not use this property and advertising.schedule[].vastxml within the same ad break. |
- |
type string |
Property indicating the format of the ad to be served within the ad breaklinear : Video ad that interrupts video content playback nonlinear : Static display ad that overlays a portion of the player and does not interrupt playback. No advertisting cuepoint is shown for this ad break.If a mix of linear and non-linear ads will serve within an ad break, do not set this property. The player will interrupt video playback for linear ads and will not interrupt video playback for non-linear ads. |
linear |
vastxml string |
(VAST only) VAST XML ad tag that is requested during the configured ad break Do not use this property and advertising.schedule[].tag within the same ad break. |
- |
Auto pause
Automatically pauses the player based on certain rules
By default, adding an empty autoPause
object enables the auto pause player functionality and also sets viewability: true
.
jwplayer("myElement").setup({
"playlist": "https://example.com/myVideo.mp4",
"autoPause": {
"viewability": true,
"pauseAds": true
}
});
Property | Description | Default |
---|---|---|
pauseAds 8.10.0+ boolean |
Controls if ad playback stops when the player is no longer viewable. • true : When the player is no longer viewable, ad playback pauses. Ad playback resumes when the player becomes viewable again.• false : Only video playback will be paused when the player is no longer viewable. NOTE: If viewability: false , setting pauseAds: true will have no effect. |
false |
viewability boolean |
Controls if video playback stops when player is no longer viewable • true : When the player is no longer viewable, video playback pauses. Playback resumes when the player becomes viewable again. If the player is no longer viewable after an ad break begins, the ad break will continue to play to completion before pausing.• false : The auto pause functionality is disabled. |
true |
Captions
This options block configures the styling of closed captions in the player for desktop browsers. On iOS/Android, a system settings menu provides exactly the same settings, as these are mandated by the FCC.
If you want to control if captions are rendered using the renderer of the browser or the player, set the renderCaptionsNatively property at the global level of setup()
.
Property | Description | Default |
---|---|---|
backgroundColor string |
Hex color of the caption characters background | "#000000" |
backgroundOpacity number |
Alpha percentage of the caption characters background | 75 |
color string |
Hex color of the captions text | "#ffffff" |
edgeStyle string |
Method by which the captions characters are separated from their background | "none" |
fontFamily string |
Font Family of the captions text | "sans" |
fontOpacity number |
Alpha percentage of the captions text | 100 |
fontSize number |
Size of the captions text (Will not affect text size when rendering captions via browser) | 15 |
windowColor string |
Hex color of the background of the entire captions area | "#000000" |
windowOpacity number |
Alpha percentage of the background of the entire captions area | 0 |
When setting caption styles, color must be specified as a hex value.
See Styling Captions for FCC Compliance for more information.
Casting
Casting enables a viewer to use Google Cast or Apple AirPlay technologies to stream video and audio content to a compatible TV or sound system. By enabling the casting feature for a player, a viewer can tap an icon in the control bar to stream your content on a cast-compatible device. If no compatible device is detected by the player, no cast icon appears.
See also: FAQs
To enable casting, add an empty cast
object in your setup.
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/1a2Bc3d4",
"height": 360,
"width": 640,
"cast": {}
});
If you are using a custom receiver, assign the identifier of the custom receiver to the cast.customAppId
property.
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/1a2Bc3d4",
"height": 360,
"width": 640,
"cast": {
"customAppId": "XXXXXX"
}
});
Property | Description |
---|---|
customAppId string |
(Optional) When using a custom receiver, the identifier of the receiver app |
DRM
IMPORTANT
Video content protection requires a JW Player Enterprise license. Please contact our team to upgrade your account.
Configuration options related to DRM for MPEG DASH (Playready, Widevine, Clearkey) and HLS streams (Fairplay).
JW Player includes the ability to add DRM to a specific playlist source. Using this method will allow your browser to choose the correct DRM method when multiple DRM types are configured. We highly suggest updating any configurations to use this new method.
NOTE
HTTPS is required for all DRM-protected content.
For more information regarding DRM, and for examples, please view our support article.
drm.playready
Playready DRM is specific to Internet Explorer 11 and Edge on Windows 8.1 or higher operating systems.
Property | Description | Default |
---|---|---|
url* string |
(Required) The URL of the PlayReady license server | - |
headers array |
Specifies the custom http headers to send to your playready license server. See headers for more information | - |
licenseRequestFilter function |
Expects a function which takes a single request argument. License request filters intercept license requests before 'licenseRequestHeaders' are added. | - |
licenseResponseFilter function |
Expects a function which takes a single response argument. License response filters intercept license responses before updating the session with the license key. | - |
drm.widevine
Widevine DRM is specific to Google Chrome on non-iOS devices. Widevine will also function on Firefox browsers for desktop systems.
Property | Description | Default |
---|---|---|
url* string |
(Required) The URL of the WideVine license server | - |
headers array |
Specifies the custom http headers to send to your widevine license server requests. See headers for more information | - |
licenseRequestFilter function |
Expects a function which takes a single request argument. License request filters intercept license requests before 'licenseRequestHeaders' are added. | - |
licenseResponseFilter function |
Expects a function which takes a single response argument. License response filters intercept license responses before updating the session with the license key. | - |
serverCertificateUrl string |
The URL of the WideVine service certificate | - |
drm.[widevine/playready].headers
Adding customized HTTP header data to license requests is possible with the "headers" configuration. This replaces the static "customData" configuration option in both widevine and playready scenarios. It is also possible to add multiple custom http headers by including multiple objects in the "headers" array.
DRM can be configured in the following way:
"drm": {
"playready": {
"url": "mydrmserver.com",
"headers": [{
"name": "customData",
"value": "hereismycustomdatastring"
}]
}
}
In previous versions, adding "customData" would look like the following:
"drm": {
"playready": {
"url": "mydrmserver.com",
"customData": "hereismycustomdatastring"
}
}
Property | Description |
---|---|
name string |
The name of the http header that will be included |
value string |
The value of the http header that will be included |
drm.fairplay
JW Player includes configuration options for custom Fairplay integrations. For more information and examples regarding custom Fairplay DRM integrations, please view our support article.
Property | Description |
---|---|
certificateUrl* string |
(Required) The path to the certificate which is part of the session data used to initialize the keySession.certificateUrl |
processSpcUrl* string | function |
(Required) The path to the license server (server playback context) which provides the ckc. Expects a direct url to the server. If the url needs to be constructed dynamically, a custom function can be passed to this configuration option which returns the url |
extractContentId function |
Expects a function that receives the initData uri (converted to a string) from the needkey event, and returns the contentId which is part of the session data used to initialize the keySession |
extractKey function |
Expects a function that receives the ckc returned by the license server and returns the key used to update the active key session. If the key can only be extracted asynchronously (for example reading bytes from a ‘blob’ response), this function can return a promise |
licenseResponseFilter function |
Expects a function which takes a single response argument. License response filters intercept license responses before updating the session with the license key. |
licenseResponseType string |
Specifies the data type returned by the XHR request to the license server. The default value is 'arraybuffer'. Other options include 'blob', 'json', and 'text'. This option impacts how “licenseRequestMessage” will be processed |
licenseRequestFilter function |
Expects a function which takes a single request argument. License request filters intercept license requests before 'licenseRequestHeaders' are added. |
licenseRequestHeaders array |
Expects an Array of Objects containing header “name” and “value” properties to be included in the request to the license server |
licenseRequestMessage function |
Expects a function that receives the license key message and returns the message to be sent to the license server. With the default “licenseResponseType” of ArrayBuffer this function passes through keymessage event message property without any changes |
drm.clearkey
A basic form of DRM that lists a decryption key inside of your player configuration. This is the least secure form of DRM, though it is the simplest to implement across browsers. There are no additional server resources required to decrypt content with this method. Clearkey is supported in both Chrome and Firefox browsers.
Property | Description |
---|---|
key* string |
(Required) The key required to decrypt DRM content |
keyId* string |
(Required) The key ID specified in the mpd's default_KID value |
Float on scroll
Keeps the player visible when the original player location is scrolled out of view by minimizing it to a corner of the screen
On devices in portrait orientation, the player becomes fixed to the top of the page using its original dimensions.
When floating, the viewer can drag the player to reposition it. This functionality is disabled during ad playback.
By default, adding an empty floating
object enables the floating player functionality and also sets dismissible: true
.
Use the following CSS classes to customize the floating player:
Important
Float on scroll cannot be used with a player that is embedded in an iframe.
jwplayer("myElement").setup({
"playlist": "https://cdn.jwplayer.com/v2/playlists/{PLAYLIST_ID}",
"floating": {
"dismissible": true
}
});
Property | Description | Default |
---|---|---|
dismissible boolean |
Permits or prohibits closing the floating player • true : The floating player can be closed by a viewer.• false : The floating player cannot be closed by a viewer. |
true |
mode 8.17.0+ string |
Tells the player how the floating behavior should operate Possible values include the following: • notVisible : Begin floating when the player has scrolled off screen and stop floating when it scrolls back onscreen.• never : Never float the player.• always : Always float the player. |
notVisible |
Google Analytics (ga)
This object configures the built-in integration with Google Analytics.
Property | Description | Default |
---|---|---|
label string |
Send another playlist property, like "title" or "mediaid", as your event label in Google Analytics | "file" |
trackerName 8.9.0+ string |
When using an analytics.js Google Analytics implementation, the name of a user-generated custom tracker which segments player events that appear in reporting Custom trackers with gtag.js implementations are not supported. |
- |
Google's separate JavaScript library and config needs to be included in your page's head in order to send events with JW Player. Setting an empty "ga":{}
options block will enable basic Google Analytics integration. No additional nested config options are required.
See Connecting Google Analytics for more information.
Internationalization
The intl
object allows you to add new language translations, customize translations for player text and aria-label
values, and access the benefits of the automated player localization feature.
IMPORTANT
Any existing language customizations or translations made outside of the intl
object will override both automated player localization and intl
object customizations. If you have configured language customizations or translations outside of the intl
object, use the table below to copy those values into the corresponding intl.{lang}.{property}
.
For each language, use a two-letter or locale-specific language code to define language-specific objects. Use the code example and tables below to configure the intl
object.
jwplayer("myElement").setup({
"intl": {
// Quebec french sub-block
"fr-ca": {
"play": "reproduire"
},
// french sub-block
"fr": {
"replay": "Repeter",
"play": "jouer"
},
// spanish sub-block
"es": {
"replay": "Repetir"
},
// frisian sub-block
"fy": {
"advertising": {
"loadingAd": "Advertinsje lade"
}
}
}
});
Property | Description | Default |
---|---|---|
advertising object |
See: advertising object. | - |
airplay string |
Tooltip text and aria-label for Apple AirPlay casting icon in the control bar |
Airplay |
audioTracks string |
Tooltip text for and aria-label HTML attribute of the audio tracks menu icon |
Audio Tracks |
auto string |
Label text and aria-label HTML attribute of the default quality selection option that allows the player to automatically select the best quality level for the viewer |
Auto |
buffer string |
aria-label for when player is in buffering state |
Loading |
captionsStyles 8.12.3+ object |
See captionStyles object | - |
cast string |
Tooltip text for and aria-label HTML attribute of the Google Chromecast casting icon in the control bar |
Chromecast |
cc string |
Tooltip text for and aria-label HTML attribute of the closed captions menu icon |
Closed Captions |
close string |
Tooltip text for and aria-label HTML attribute of the icon to close a menu or overlay. |
Close |
displayHeading string |
Heading text for an advertisement. | Advertisement |
errors object |
See: errors object. | - |
exitFullscreen 8.7.0+ string |
When in fullscreen mode, tooltip text for and aria-label HTML attribute of the fullscreen icon in the control bar |
Exit Fullscreen |
fullscreen string |
Tooltip text for and aria-label HTML attribute of the fullscreen icon in the control bar |
Fullscreen |
hd string |
Tooltip text for and aria-label HTML attribute of the video Quality options menu icon |
Quality |
liveBroadcast string |
In the control bar, label text and aria-label HTML attribute for live streams |
Live |
logo string |
aria-label HTML attribute of the logo in the player |
Logo |
mute 8.7.0+ string |
When the player is not muted, tooltip text for and aria-label HTML attribute of the volume icon in the control bar |
Mute |
next string |
aria-label HTML attribute of the right arrow in overlays with multiple pages of videos |
Next |
nextUp string |
Title text and aria-label HTML attribute of the overlay that displays the next item to automatically play in a playlist |
Next Up |
notLive string |
In the control bar, label text and aria-label HTML attribute that indicates the current video position in a live stream lags behind the real-time stream |
Not Live |
off string |
Menu option text for turning an option off | Off |
pause string |
aria-label HTML attribute of the pause icon in the control bar |
Pause |
play string |
aria-label HTML attribute of the play icon in the control bar |
Play |
playback string |
Call-to-action text beneath the play button on the player idle screen. | Play |
playbackRates string |
Tooltip text for and aria-label HTML attribute of the playback rate controls menu |
Playback Rates |
player string |
aria-label HTML attribute of the video player application |
Video Player |
playlist < 8.8.0 string |
aria-label HTML attribute of a playlist overlayStarting with JW Player 8.8.0, use the related.heading property to set this property. |
Playlist |
poweredBy string |
Text displayed before the JW Player name and logo on a button in the Right-click menu. | Powered by |
prev string |
aria-label HTML attribute of the left arrow in overlays with multiple pages of videos |
Previous |
related object |
See: related object. | - |
replay string |
Tooltip text for and aria-label HTML attribute of the replay button in the control bar, displayed at the completion of video playback. |
Replay |
rewind string |
Tooltip text for and aria-label HTML attribute of the rewind button in the control bar |
Rewind 10 Seconds |
settings string |
Tooltip text for and aria-label HTML attribute of the Settings menu icon |
Settings |
sharing object |
See: sharing object. | - |
shortcuts 8.11.0+ object |
See shortcuts object. | - |
slider string |
aria-label HTML attribute of the video scrub bar |
Seek Slider |
stop string |
aria-label HTML attribute of the stop button in the control bar for live streams. |
Stop |
unmute 8.7.0+ string |
When the player is muted, tooltip text for and aria-label HTML attribute of the volume icon in the control bar | Unmute |
videoInfo string |
Label text and aria-label HTML attribute of the Right-click menu button. |
About This Video |
volume string |
Tooltip text for and aria-label HTML attribute of the volume in the control bar. |
Volume |
volumeSlider string |
aria-label HTML attribute of the volume slider in the control bar. |
Volume Slider |
intl.{lang}.advertising object
This object localizes the player text and ARIA labels of the advertising object.
intl.{lang}.captionsStyles object
This object localizes the captions styling menu displayed in the player.
Property | Description | Default |
---|---|---|
backgroundColor string |
Name of submenu to control the background color of subtitles | Background Color |
backgroundOpacity string |
Name of submenu to control the backround transparency of subtitles | Background Opacity |
black string |
Name of color option | Black |
blue string |
Name of color option | Blue |
characterEdge string |
Name of submenu to control the text decoration of subtitles | Character Edge |
cyan string |
Name of color option | Cyan |
depressed string |
Label for a captions style decoration where the text appears depressed or engraved | Depressed |
disabled string |
Label to disable a feature | Disabled |
dropShadow string |
Label for a captions style decoration where the text has a shadow | Drop Shadow |
enabled string |
Label to enable a feature | Enabled |
fontColor string |
Name of submenu to control the font color of subtitles | Font Color |
fontFamily string |
Name of submenu to control the font of subtitles | Font Family |
fontOpacity string |
Name of submenu to control the transparency of subtitles | Font Opacity |
fontSize string |
Name of submenu to control the size of subtitles | Font Size |
green string |
Name of color option | Green |
magenta string |
Name of color option | Magenta |
none string |
Label of a menu item to not select any option (similar to the concept of "off") | None |
raised string |
Label for a captions style decoration where the text appears raised or embossed | Raised |
red string |
Name of color option | Red |
reset string |
Label to reset options to their defaults | Reset |
subtitleSettings string |
Heading for the menu where you can change subtitles styles | Subtitle Settings |
uniform string |
Label for a captions style decoration where the text appears outlined | Uniform |
white string |
Name of color option | White |
windowColor string |
Name of submenu to control the window color of subtitles | Window Color |
windowOpacity string |
Name of submenu to control the transparency of the subtitle window | Window Opacity |
yellow string |
Name of color option | Yellow |
intl.{lang}.errors object
This object localizes the error messages displayed in the player.
Property | Description | Default |
---|---|---|
badConnection string |
Error message text displayed when a connection issue prevents playback | This video cannot be played because of a problem with your internet connection. |
cantLoadPlayer string |
Error message text displayed when a player fails to instantiate due to a non-network reason. For example: incorrect JSON or license keys | Sorry, the video player failed to load. |
cantPlayInBrowser string |
Error message text displayed when a video fails to start playback due to a browser support reason. For example: such as Flash or DASH error or browser support | The video cannot be played in this browser. |
cantPlayVideo string |
Error message text displayed when a media item fails to load | This video file cannot be played. |
errorCode string |
Label text for a numeric error code. (For example: Error code: 50244402) | Error code |
liveStreamDown string |
Error message text displayed when a live stream has technical issues or has ended | The live stream is either down or has ended. |
protectedContent string |
Error message text displayed when DRM or protected content fails | There was a problem providing access to protected content. |
technicalError string |
Fallback error message text displayed when no other error message is applicable | This video cannot be played because of a technical error. |
intl.{lang}.related object
This object localizes the player text and ARIA labels of the related object.
intl.{lang}.sharing object
This object localizes the player text and ARIA labels of the sharing object.
intl.{lang}.shortcuts object
This object localizes the keyboard shortcut menu items.
Property | Description | Default |
---|---|---|
captionsToggle string |
Description of the keyboard shortcut behavior to toggle captions in the video | Captions On/Off |
decreaseVolume string |
Description of the keyboard shortcut behavior to decrease the volume of the video | Decrease Volume |
fullscreenToggle string |
Description of the keyboard shortcut behavior to toggle fullscreen | Fullscreen/Exit Fullscreen |
increaseVolume string |
Description of the keyboard shortcut behavior to increase the volume of the video | Increase Volume |
keyboardShortcuts string |
Heading for a list of all of the available keyboard shortcuts in the video player | Keyboard Shortcuts |
playPause string |
Description of the keyboard shortcut behavior to toggle playback | Play/Pause |
seekBackward string |
Description of the keyboard shortcut behavior to seek backward by 5 seconds in the video | Seek Backward |
seekForward string |
Description of the keyboard shortcut behavior to seek forward 5 seconds of the video | Seek Forward |
seekPercent string |
Description of the keyboard shortcut behavior to fast forward to a certain point in a video in a multiple of ten For example, you can press the 5 key to go to the 50% mark of the video. 2 key for 20% of the video. |
Seek % |
spacebar string |
Name of the spacebar key on a keyboard | SPACE |
volumeToggle string |
Description of the keyboard shortcut behavior to toggle the volume. | Mute/Unmute |
Transition table
Use the table below to copy old customization or translation values to the corresponding intl.{lang}.{property}
.
Old property | New property |
---|---|
advertising.admessage |
intl.{lang}.advertising.admessage |
advertising.cuetext |
intl.{lang}.advertising.cuetext |
advertising.podmessage |
intl.{lang}.advertising.podmessage |
advertising.skipmessage |
intl.{lang}.advertising.skipmessage |
advertising.skiptext |
intl.{lang}.advertising.skiptext |
localization.airplay |
intl.{lang}.airplay |
localization.audioTracks |
intl.{lang}.audioTracks |
localization.buffer |
intl.{lang}.buffer |
localization.cast |
intl.{lang}.cast |
localization.cc |
intl.{lang}.cc |
localization.close |
intl.{lang}.close |
localization.copied 8.1.8+ |
intl.{lang}.sharing.copied |
localization.errors.badConnection 8.4.0+ |
intl.{lang}.errors.badConnection |
localization.errors.cantLoadPlayer 8.4.0+ |
intl.{lang}.errors.cantLoadPlayer |
localization.errors.cantPlayInBrowser 8.4.0+ |
intl.{lang}.errors.cantPlayInBrowser |
localization.errors.cantPlayVideo 8.4.0+ |
intl.{lang}.errors.cantPlayVideo |
localization.errors.errorCode 8.4.0+ |
intl.{lang}.errors.errorCode |
localization.errors.liveStreamDown 8.4.0+ |
intl.{lang}.errors.liveStreamDown |
localization.errors.protectedContent 8.4.0+ |
intl.{lang}.errors.protectedContent |
localization.errors.technicalError 8.4.0+ |
intl.{lang}.errors.technicalError |
localization.fullscreen |
intl.{lang}.fullscreen |
localization.hd |
intl.{lang}.hd |
localization.liveBroadcast |
intl.{lang}.liveBroadcast |
localization.loadingAd |
intl.{lang}.advertising.loadingAd |
localization.more |
intl.{lang}.next |
localization.next |
intl.{lang}.next |
localization.nextUp |
intl.{lang}.nextUp |
localization.nextUpClose |
intl.{lang}.close |
localization.pause |
intl.{lang}.pause |
localization.play |
intl.{lang}.play |
localization.playback |
intl.{lang}.playback |
localization.playbackRates |
intl.{lang}.playbackRates |
localization.player |
intl.{lang}.player |
localization.playlist |
intl.{lang}.playlist |
localization.prev |
intl.{lang}.prev |
localization.related |
intl.{lang}.related.heading |
localization.replay |
intl.{lang}.replay |
localization.rewind |
intl.{lang}.rewind |
localization.stop |
intl.{lang}.stop |
localization.videoInfo |
intl.{lang}.videoInfo |
localization.volume |
intl.{lang}.volume |
related.autoplaymessage |
intl.{lang}.related.autoplaymessage |
sharing.heading |
intl.{lang}.sharing.heading |
sharing.link |
intl.{lang}.sharing.link |
Logo
This options block configures a clickable watermark that is overlayed on the video.
Property | Description | Default |
---|---|---|
file string |
The URL of an external JPG, PNG or GIF image to be used as watermark (e.g. /assets/logo.png). We recommend using 24 bit PNG images with transparency | - |
hide boolean |
When this option is set to true, the logo will automatically show and hide along with the other player controls | false |
link string |
The URL to visit when the watermark image is clicked. Clicking a logo will have no affect unless this is configured | - |
margin number |
The distance, in pixels, of the logo from the edges of the display | 8 |
position 8.0+ string |
This sets the corner in which to display the watermark. "control-bar" adds the logo as the leftmost icon in the right grouping of buttons in the control bar. "top-left" "top-right" "bottom-left" "bottom-right" "control-bar" |
"top-right" |
Example
jwplayer("myElement").setup({
"file": "http://example.com/myVideo.mp4",
"logo": {
"file": "/assets/jw-logo-red-46px.png",
"link": "https://www.jwplayer.com",
"hide": "true",
"position": "top-left"
}
});
NOTE
We highly recommend using low-resolution images for logos in the player, as Internet Explorer may not resize an image, especially if it is high-resolution.
Playlists
The playlist is a powerful feature of JW Player, used to play multiple video or audio files.
A playlist can be either a string, referring to the URL of an RSS feed or JSON file, or an array of media objects.
Configuring Playlist as a String
jwplayer("myElement").setup({
"playlist": "http://example.com/myPlaylist.json"
});
jwplayer("myElement").setup({
"playlist": [{
"file": "/assets/sintel.mp4",
"image": "/assets/sintel.jpg",
"title": "Sintel Trailer",
"mediaid": "ddra573"
},{
"file": "/assets/bigbuckbunny.mp4",
"image": "/assets/bigbuckbunny.jpg",
"title": "Big Buck Bunny Trailer",
"mediaid": "ddrx3v2"
}]
});
Property | Description |
---|---|
file* string |
(Required) If no file is specified in your setup or sources, this is a required configuration option |
adschedule object |
Schedule advertising for a specific media file See: playlist.adschedule |
description string |
Short description of the item. It is displayed below the title. This can be hidden with the displaydescription option. |
image string |
Poster image URL. Displayed before and after playback. |
mediaid string |
Unique identifier of this item. Used by advertising, analytics and discovery services |
minDvrWindow number |
HLS-only In seconds, the minimum amount of content in an M3U8 required to trigger DVR mode. Set to 0 to always display DVR mode.(Defaults to 120) |
recommendations string |
URL to a feed that contains related items for a particular playlist item |
sources array |
Used for quality toggling and alternate sources See: playlist.sources |
starttime number |
Time in seconds to start a media item. NOTE: When used with an MP4 video file, both seek and seeked events are triggered. Neither event is triggered when used with a DASH or HLS stream. |
title string |
Title of the item. This is displayed inside of the player prior to playback, as well as in the visual playlist. This can be hidden with the displaytitle option |
tracks array |
Include captions, chapters, and thumbnails for media See: playlist.tracks |
withCredentials boolean |
If true, "withCredentials" will be used to request a media file rather than CORS |
In addition to standard media information, (title
, description
, mediaid
) it is also possible to insert additional metadata, using custom properties. This information must be entered inside of a playlist, and cannot be set directly inside of a setup block.
playlist[].adschedule[]
IMPORTANT:
Video ad insertion requires a JW Player Enterprise license. Please contact our team to upgrade your account.
The playlist[].adschedule[]
property is used for scheduling ad breaks throughout specific playlist
items. You must define at least one ad break configured inside of the adschedule
property. Each ad break should include an offset
and a tag
or vastxml
.
Property | Description |
---|---|
offset string OR number |
(Required) When to play the configured ad tag • pre : Ad plays as a preroll • post : Ad plays as a postroll• xx% : (VAST only) Ad plays after xx% of the content• number : Ad plays after the specified number of seconds |
tag string |
(Required) When a string, URL of the ad tag for VAST and IMA plugins, or a string place holder for FreeWheel (VAST/IMA plugins) When an array, URLs of the VAST ad tags to be used as fallbacks in the event that one or multiple ad tags fail to render When a VAST tag is used, ad tag targeting macros can be added to define features such as GDPR consent. Do not use this property and playlist[].adschedule[].vastxml within the same ad break. |
type string |
Property indicating the format of the ad to be served within the ad break • linear : Video ad that interrupts video content playback • nonlinear : Static display ad that overlays a portion of the player and does not interrupt playback. No advertisting cuepoint is shown for this ad break.If a mix of linear and non-linear ads will serve within an ad break, do not set this property. The player will interrupt video playback for linear ads and will not interrupt video playback for non-linear ads. |
vastxml string |
VAST XML ad tag that is requested during the configured ad break Do not use this property and advertising.schedule[].tag within the same ad break. |
jwplayer("myElement").setup({
"playlist": [{
"title": "One Media Item",
"description": "Only One media item in a playlist!",
"file": "myFile.mp4",
"mediaid": "ddrx3v2",
"image": "myImage.png",
"adschedule": [{
"offset": "pre",
"tag": "myAdTag.xml"
},
{
"offset": 10,
"tag": "myMidroll.xml"
}]
}]
});
playlist[].sources[]
Sources are inserted into playlist objects and are lists of files. Sources serve a dual purpose, depending on the files used:
- Use different file types: Alternate "fallback" media sources
- Use the same file type: Toggle quality with static video files
Alternate Media Sources
If using different file types, sources prioritizes which file to play only in the case when a provider (HTML5, HLS, or DASH) fails to load. If there is an error with a stream, the player will not failover to the next provider. In the example below, the player will attempt to play myVideo.m3u8 as a first choice.
In the event that a browser cannot play an m3u8, the player is intelligent enough to choose myVideo.mp4 instead. In the event that an mp4 cannot be played, the player will attempt the webm format before producing an error.
jwplayer("myElement").setup({
"playlist": [{
"title": "One Playlist Item With Multiple Sources",
"description": "Three Sources - One Playlist Item",
"image": "myImage.png",
"mediaid": "ddrx3v2",
"sources": [{
"file": "myVideo.m3u8"
},{
"file": "myVideo.mp4"
},{
"file": "myVideo.webm"
}]
}]
});
Sources with DRM
When using DRM, we highly suggest placing the drm block inside of the appropriate media source. This ensures the correct media and DRM pair gets chosen for the appropriate browser. For example:
"sources": [{
"file": "myFairplayStream.m3u8",
"drm": {
"fairplay": {
"certificateUrl": "http://myfairplay.com/fairplay/cert",
"processSpcUrl": "http://myfairplay.com/fairplay/ckc"
}
}
},{
"file": "myWidevineStream.mpd",
"drm": {
"widevine": {
"url": "http://mywidevineurl.com/drm"
}
}
},{
"file": "myPlayreadyStream.mpd",
"drm": {
"playready": {
"url": "http://myplayreadyurl.com/drm"
}
},{
"file": "myClearkeyStream.mpd",
"drm": {
"clearkey": {
"key": "1234clear5678key",
"keyId": "fefde00d-efde-adbf-eff1-baadf01dd11d"
}
}
}]
See our drm section for more information.
Manifest and Segment Requests with Custom Headers
You can add custom headers to media XHR requests by using the onXhrOpen
callback. This gets executed after XMLHTTPRequest.open()
and before XMLHTTPRequest.send()
for HLS manifest, key and segment requests made by the player. This is not available in Safari browsers where HLS is played natively.
jwplayer().setup({
playlist: [{
sources: [{
file: 'video.m3u8',
onXhrOpen: function(xhr, url) {
xhr.setRequestHeader('customHeader', 'customHeaderValue');
}
}]
}]
})
For HLSjs playback only.
Quality Settings for Video Files
In the event that a streaming technology like HLS or DASH cannot be used, listing video files of different qualities will enable a quality selection settings menu in the player. Compared to other streaming methods, it has the following drawbacks:
- No automatic switching, based on bandwidth or download speed
- Changing qualities may cause playback stuttering
- Pseudostreaming may need to be configured in cases where Flash is used
jwplayer("myElement").setup({
playlist: [{
title: "One Playlist Item With Multiple Qualities",
description: "Two Qualities - One Playlist Item",
sources: [{
file: "myVideo-720p.mp4",
label: "HD"
},{
file: "myVideo-480p.mp4",
label: "SD"
}]
}]
});
Property | Description |
---|---|
file string |
(Required) URL to the video file, audio file, YouTube video or live stream of this playlist item source. |
default boolean |
Set this to true for the media source you want to play on startup. If this isn't set for any source, the first one is used |
drm object |
An object containing DRM information for a particular source |
label string |
Label of the media source, displayed in the manual quality selection menu. Set this if you have more than 2 qualities of your video. |
type string |
Forces a media type. Only required when a file extension is missing or not recognized (Using .php or certain tokens, for example) |
playlist[].tracks[]
Tracks can be attached to media for three possible reasons: captions, thumbnails, or chapters. Thumbnail and chapter files must be in WEBVTT format. Captions accept WEBVTT, SRT, and DFXP format, though JW Player strongly suggests using WEBVTT if possible.
Property | Description | Default |
---|---|---|
default boolean |
Only for captions. Set this to true if you want a captions track to display by default | - |
file string |
URL to the captions, chapters or thumbnails text track file. See Adding Closed Captions for an example setup. | - |
kind string |
The kind of text track. "captions": Captions that display during video playback. "chapters": Places markers on the video er, displaying different sections "thumbnails": A list of thumbnails that appear when the mouse cursor hovers on the timeslider. |
"captions" |
label string |
Label of the text track. Is only used in setups with multiple captions, where the label is displayed in the CC selection menu. | index |
When using the playlist to load an RSS feed, these options are set in the feed. See the Media Formats Reference for a mapping of all playlist options to RSS format.
Related
This object controls the playlist appearance and behaviors.
Property | Description | Default |
---|---|---|
autoplaymessage < 8.6.0 string |
A custom message that appears during autoplay. xx will be replaced by the countdown timer__title__ will be replaced by the next title in the related feed.WARNING: Starting with JW Player 8.6.0, use the intl object to set this property. |
"__title__ will play in xx seconds" |
autoplaytimer number |
The number of seconds to wait before playing the next related video in your content list. Set to 0 to have your next related content to play immediately |
10 |
displayMode 8.1.9+ string |
Configures the playlist user interface • none 8.9.0+: With the exception of the next up button in the control bar, removes all aspects of the playlist interfaceSet this value when using a custom external playlist user interface. • overlay : Adds a "more videos" icon to the control barWhen clicked, an overlay takes over the player and pauses playback. • shelf : Adds a horizontal bar of thumbnails above the control bar that allows viewers to browse recommended videos during the playback experienceThe shelf can be collapsed into a "More Videos" button, which appears above the control bar. Due to size constraints, small players fall back to "overlay" mode. • shelfWidget 8.5.0+: Adds a persistent horizontal bar of thumbnails outside and beneath the player that allows viewers to browse recommended videos during the playback experienceUse selector to configure shelf location. |
overlay (manual, dynamic, and trending playlists)shelf (recommendations playlists) |
file string |
Location of a JSON or RSS file that contains a recommendations playlist Use this property to associate a recommendations playlist with all playlists in a player. To associate a recommendations playlist with a specific playlist or playlist item, use playlist[].recommendations. |
- |
onclick string |
Behavior when a related video is selectedplay : Plays the next video within the current player. link : Redirects the page to the url specified in the related item's link field. |
play |
oncomplete string |
Behavior of the related videos overlay when a single video or playlist is completedautoplay : Displays the related overlay and automatically plays the next video in your related feed after 10 secondsThis option also automatically sets the onclick behavior to play .hide : Replay button and related icon will appear none : No overlay appears and player automatically advances to the next playlist itemIf there is no media item to advance to, the replay button appears. show : Display the related overlay |
none 8.9.0+show < 8.9.0 (excluding 8.9.0) |
selector 8.6.0+ string |
CSS selector that points to an HTML element that is used as the container when displayMode is set to shelfWidget . This property can be configured in the following ways: Undefined HTML element and selector: An element with id="{playerID}-shelf-widget" is created. By default, the shelf widget displays in <div id="{playerID}-shelf-widget"> directly below the player. The shelf widget size is responsive to the player.You can also assign this ID to a different HTML element on your page. This allows you to set the widget location without defining a new selector. If you assign this ID to a different HTML element, the shelf widget size is responsive to the HTML element. Defined HTML element and selector: If the HTML element has an ID ( myDefinedID ) and "selector": "#myDefinedID" , shelf widget is placed inside the of HTML element with id="myDefinedId" . The shelf widget size is responsive to the HTML element. |
- |
Sharing
This options block controls a settings submenu with social sharing options: copy embed code, copy video link and share video to social networks.
Setting an empty "sharing":{} options block will enable the social sharing menu and icon in the control bar. Without the nested config options, it will show the page URL link with default sharing sites, but no embed code.
NOTE
When a viewer uses this sharing feature, the whole page where the video is embedded is shared. This feature does not share specific playlist items within a playlist.
Property | Description | Default |
---|---|---|
link string |
URL to display in the video link field | URL of the current page |
code string |
Embed code to display in the embed code field If no code is set, the field is not shown. |
- |
heading < 8.6.0 string |
Short, instructive text to display at the top of the sharing screen WARNING: Starting with JW Player 8.6.0, use intl.{lang}.sharing.heading. |
"Share Video" |
sites array |
Allows for the customization of social icons | ["facebook", "twitter", "email"] |
Available Built-In Social Networks
Social Network | Configuration Value | Social Network | Configuration Value | |
---|---|---|---|---|
"facebook" | Tumblr | "tumblr" | ||
"twitter" | "linkedin" | |||
"interest" | "reddit" | |||
"email" |
Example
jwplayer("myElement").setup({
file: "http://example.com/myVideo.mp4",
sharing: {
sites: ["reddit","facebook","twitter"]
}
});
See our Social Sharing support article for more information.
Skin
JW Player provides you with 11 skin configuration options out-of-the-box. With such granular control over brand identity, it’s easier than ever to customize the player.
Color Customization
Color can be specified as a hex value, RGBA color value, or color name.8.0+
Config | Type | Description | Default |
---|---|---|---|
skin.controlbar.text | String | The color of any plain text in the control bar, such as the time. | "#FFFFFF" |
skin.controlbar.icons | String | The default, inactive color of all icons in the control bar. This option also controls the color of the play, pause, and replay icons in the inactive and complete states. | "rgba(255,255,255,0.8)" |
skin.controlbar.iconsActive | String | The color of hovered or selected icons in the control bar. | "#FFFFFF" |
skin.controlbar.background | String | TThe background color of the control bar and the volume slider. The default background is transparent. | "rgba(0,0,0,0)" |
skin.timeslider.progress | String | The color of the bar in the time slider filled in from the beginning of the video through the current position. The buffer region of the control bar is 50% of the opacity of this color. The color of the volume slider is also controlled by this option. | "#F2F2F2" |
skin.timeslider.rail | String | The color of the base of the timeslider, known as the rail. | "rgba(255,255,255,0.3)" |
skin.menus.text | String | The color of inactive, default text in menus and the Next Up overlay. | "rgba(255,255,255,0.8)" |
skin.menus.textActive | String | The color of hovered or selected text in menus. This option also controls the text color in the Discover overlay and the hover state text color in the Next Up overlay. | "#FFFFFF" |
skin.menus.background | String | The background color of menus and the Next Up overlay. | "#333333" |
skin.tooltips.text | String | The text color of tooltips. | "#000000" |
skin.tooltips.background | String | The background color of tooltips. | "#FFFFFF" |
Custom Skins
For more information regarding custom skins, see our Branding documentation.
Config | Type | Description | Default |
---|---|---|---|
skin.url | String | If using an external CSS file to style your player, this must be specified here. | - |
skin.name | String | The name of your custom skin to use for styling the player. If you are specifying skin.url, you must specify skin.name, which must match the class name in your CSS file. | - |
Updated 6 days ago