Embedding the Player
This guide explains how to embed the JW Player onto your site, load the media file(s) you want to play and tweak the player's layout and playback behaviour.
Getting JW Player
JW6 supports 2 set-up methods: the cloud-hosted and self-hosted JW Player. This doc applies to both set-up methods, as the player embed configuration options do not change based on your set-up method.
- If you are using the cloud-hosted JW Player, you simply need to copy & paste the hosted JW Player script tag into your webpage. The tag can be found inside your JW Player Account, on the Home Page or from the Publish Wizard:
- If you are using the self-hosted JW Player, there are 3 JW Player files (along with your media files) that need to be uploaded to your site. See the Quick Start Guide for more info on this.
Embedding the JW Player
Now, actually embedding the JW Player is a simple, 2-step process. Open your web page in an HTML editor and:
1: Add library to <head>
Embed the main JW Player script library into the head of your page (note the Flash and HTML5 player area automatically loaded).
- For the cloud-hosted JW Player, this is the JW Player script tag, which includes your account token & unlocks the features of your JW Player Edition, as well as tracks your JW Player video analytics, like so:
<script src="http://jwpsrv.com/library/YOUR_JW_PLAYER_ACCOUNT_TOKEN.js" ></script>
If you require secure hosting, change the domain to https://ssl.jwpsrv.com
- For the self-hosted JW Player, if you have purchased the Pro, Premium or Ads edition of JW Player, unlock its features of the by inserting your (server-less) JW Player license key in a second line right below the first one, like so:
Note a key is not required for the Free edition, but still available from your JW Player Account. Including your key will enable the (free) JW Player Analytics for your account.
2: Add embed to <body>
Insert a <div> element with a unique id in the body of your page, at the location you want the player to appear:
<div id="myElement">Loading the player ...</div>
Right below it, insert a script that invokes the JW Player setup() call on your <div>:
The last code block is where the heavy lifting happens. The script tells the JW Player library to setup a player instance over the DOM element with ID container. Inside the setup call, the script provides a list of options for configuring the player. In this setup, only the file, height, image and width options are set, but many more are available. They are listed below.
Note two very common issues prevent smooth playback of videos in Internet Explorer 9/10. First, you need to set <!DOCTYPE html> to prevent triggering IE's quirks mode. Second, your videos must be served with the video/mp4 mimetype or IE will refuse to play them. See our troubleshooting guide for more common issues.
There are three options for configuring which media file(s) to load in the player:
- URL to a single MP4/FLV/WebM video, AAC/MP3/Vorbis audio, YouTube page or HLS/RTMP stream to play. See Supported Media Formats for an overview.
- URL to a JPG/PNG poster image to display before playback is started. For audio-only media, the poster image stays visible during playback.
- Title of the media loaded in the player. Is displayed in the middle of the display before playback is started.
Note these options are used only for basic setups, like playing a single MP4 video or AAC song. Use the playlist option block for everything else, like an MP4+WebM source, SD+HD quality or a list with multiple clips. See Working with Playlists for more info.
These are the options for configuring the layout of the player:
- Whether to display the video controls (controlbar, icons and dock). Can be false or true (default).
- Which skin to use for styling the player (we call the default Six). Is set to the URL of that skin on your site. If you have purchased JW Player, you can load one of the 8 premium skins off our CDN by simply inserting the skin name (e.g. skin: "bekle" ). See Using JW Player Skins for more info.
- Width of the player. Defaults to 480 pixels. We recommend setting this to at least 320 pixels, since otherwise certain UI elements may not fit. It can also be set to "100%" to enable Responsive Design, in combination with the aspectratio option.
- This option, used to setup JW Player for Responsive Design, is set to the video display aspect ratio, for example "16:9". When the width of the player changes, it then automatically scales its height accordingly. When the aspectratio is set, the height option is ignored.
- Height of the player in pixels. We recommend setting this to at least 180, so all UI elements will fit. However, it can be set to a small size (e.g. 40) for audio-only playback. Defaults to 270.
And these are the options for configuring the setup and playback behavior:
- Automatically start playing the video on page load. Can be true or false (default). Autostart does not work on mobile devices like iOS and Android.
- Whether to render a nice download link for the video if HTML5 and/or Flash are not supported. Can be true (a fallback is rendered) or false (the original HTML is not touched). Defaults to true.
- Whether to have the sound muted on startup or not. Can be false (default) or true.
- Which rendering mode to try first for rendering the player. Can be html5 (default) or flash.
- Whether to loop playback of the playlist or not. Can be true (keep playing forever) or false (stop playback when completed). Defaults to false.
Some more obscure options are available to tweak the internals of JW Player:
- By default, JW Player will display the title of an audio/video file inside the play icon in the middle of the display when set. If you have set a title, but don't want it to display here, set this option to false.
- Alternative location from where to load jwplayer.flash.swf. By default, this file is in the same location as jwplayer.js. In certain edge cases though (e.g. CDN-ing the players), you may want to host them separately.
- Alternative location from where to load jwplayer.html5.js. By default, this file is in the same location as jwplayer.js. In certain edge cases though (e.g. CDN-ing the players), you may want to host them separately.
- Querystring parameter for seeking to not-yet-download portions of FLV or MP4 files in Flash mode. Not needed for HTML5 (where this works by default). See Pseudostreaming in Flash for more info.
- Set this flag to false to disable GPU-accelerated image compositing in the Flash rendering mode. With some combinations of H264 parameters and GPU cards, we see inconsistent issues with rendering of the video image. Disabling Stage Video fixes this issue.
- How to resize the poster and video to fit the display. Can be none (keep original dimensions), exactfit (stretch disproportionally), uniform (stretch proportionally; black borders) or fill (stretch proportionally; parts cut off). Defaults to uniform.
Advanced Options Blocks
In addition to above configuration options, a list of configuration blocks is available to enable the more advanced functionalities of JW Player. For example, the listbar block can be used to display the playlist in a bar next to the video display:
As you can see, the listbar is an object that itself contains a set of configuration options. In this case, the bar is setup to the right of the display and set 320 pixels wide. At large, the following advanced option blocks are available:
- Config block with playlist data or RSS feed link. Enables all sophisticated media playback options, like multiple quality levels or closed captions.
- Configures a sidebar that displays all playlist entries.
- Configures an on-screen watermark for the Pro, Premium and Ads editions.
- Configures the Social Sharing overlay for the Pro, Premium and Ads editions.
- Configures the Related Videos overlay for the Premium and Ads editions.
- Configures the VAST or IMA Advertising options for the Ads edition.
- Configures the playback of specific types of RTMP streams.
- Configures the free JW Player analytics tracking.
- Configures the Google Analytics connection for the Premium and Ads editions.
- Configures the Adobe SiteCatalyst connection for the Premium and Ads editions.
- Configures the layout of the closed captions rendering area (load captions using a playlist).