JW8: Player Builder Reference

Do you want to customize your player without writing any code? This article is a reference for all things in the player builder, where you can create and update players in just a few clicks.

Using the Player Builder

Do you want to customize your player without writing any code? This article is a reference for all things in the player builder, where you can create and update players in just a few clicks.

Getting there

Navigate to the player builder by clicking on the Players link in the left sidebar. Then click on the player you want to edit, or click the Create Player button to start from scratch.

Previewing your player

No matter where you are in the builder, you’ll always be able to preview your player on the right side of the screen.

Above the preview, you’ll find your player’s name on the left and the version it’s running on the right. In between that information are buttons that allow you to toggle the size of the player to view how your player adapts responsively to mobile devices in landscape or portrait mode and on a desktop computer. The mobile sizes can also help you envision smaller players you may use on your site, such as on sidebars. Note that if you set a fixed-sized player in the setup tab, the device options will be unavailable, as the player will always be displayed with its fixed dimensions.

Cloud-Hosted Player Library

Once you save your player, its cloud-hosted library url will be available to copy to your clipboard. If you embed your player with a single-line embed, you can use your new player when you select a video or playlist.

Beneath the url text box, you’ll notice a checkbox for our backward compatibility script. This script bridges the gap if your code contains now-removed API. We find most customers don’t use these API, as it’s mostly code that was deprecated in JW6. For this reason, we don’t recommend including the script — and with it, extra kilobytes of code – unless you need it. We recommend first testing your player without this script; if your player works as expected, great! If not, please check this box, save your player, and try again.

Release Channels

By default, players use our production channel, which is our stable release. If you’d like to use our beta channel for unverified releases, you can select that channel here. For more information on using our release channels, see our Using Release Channels article.

Tip: If you’d like to revert all of your changes since your last save, look for the Revert to Saved link in the bottom right corner of the page.

Customizing Your Player

Select a tab below to learn more about the configuration options in each section of the player builder.

Setup

The Setup tab has all the configuration options that tell your player how to lay out and behave on the page when playback starts.

Name

We recommend you give your player a descriptive name to easily identify it should you need to modify your player settings later.

Player Size

By default, new players are responsive, meaning that they will dynamically adjust to the width of space they’re in on your website. The height of the player is then determined by the aspect ratio you select from the dropdown, which should match the aspect ratio of your video.


Alternatively, you can set your player to have fixed dimensions. The player’s size will not change if the browser window is resized, nor will it change based on the device. This method is good for placing the player in a sidebar or within a space that is also a fixed area.

Playback

Loop content

Check this box if you would like your video to automatically repeat. This will only work for single videos. Videos within playlists do not loop.

Mute on start

Check this box if you would like the first video in the player to start muted. This can be a helpful setting when players are set to autostart, especially when a majority of plays are through mobile.

Enable playback rate controls

This enables a menu in settings that allows the viewer to adjust playback speed. The predefined options available in the menu are 0.5x, 1x, 1.25x, 1.5x, and 2x. Note: Adjusting the playback rate is not currently supported on Android devices with HLS streams.

Autostart

Choose whether the player should attempt to begin playback automatically when a page is loaded. Whereas the On setting will begin playback regardless of where the player is on the page, select When player is in view to have player only autostart once the player is more than 50% in view on the screen. Allow ads to play muted on mobile devices Some browsers require ads to be muted on start in order to autoplay a video. While soundless playback is known to lower ad CPMs, it can improve the user experience if the viewer is not expecting sound, or if the player is not immediately in view.

Media Preloading

Videos start playing faster when a little bit of media has been preloaded by the time the viewer clicks play. When the page first loads, only the first player will preload, while subsequent players preload once they become more than 50% visible on the screen.

  • Choosing None incurs no additional bandwidth usage, but does not ensure immediate playback. The player begins to load media only when the viewer clicks play.
  • Quick Start is the default option and is recommended for the fastest startup time. When the player becomes viewable or if it's the only player on the embedded page, the player will load the media's metadata and up to one segment.
  • Select High Quality for the fastest startup time with the highest playback quality. When the player becomes viewable or if it's the only player embedded on the page, the player will preload up to 30 seconds in the background.

Casting

Turn casting on if you want to enable your viewers to easily cast directly from the video player. When casting is enabled, either a Chromecast (in Chrome) or Airplay (in Safari) icon will appear in the control bar when casting is available. Note that browsers typically allow casting at the page level, even if casting is not enabled within the player itself.

Google Analytics

JW Player's own analytics are a great way to see how customers are consuming video. However, for more targeted video playback information, JW Player supports a direct integration with Google Analytics. You'll need to make sure you've placed the GA tracking code on your website before your JW Player activity will appear. For more information, see our Integration with Google Analytics support article.

Customize

Looking to customize the visual look and feel of your player to fit your brand? JW8 features an updated, modern skin with clean, mobile-optimized design to promote viewer interaction. JW8 also packs in 4x the customization options as JW7, all of which you can find in this tab.

Display Options

Show content title

Keep this option selected if you want the title of the video to show on the idle screen, before the viewer clicks play.

Show content description

Keep this option selected if you want the description of the video to show on the idle screen, before the viewer clicks play. Nothing shows here if the description is empty.

Show controls

(For advanced users only) Some customers create their own player controls and wish to hide the default JW Player controls, which can be achieved by unchecking this box. Hiding controls can also be useful when creating a looping, soundless background from a video.

Color Customization

JW8 supports hex colors, as well as rgba values, which include an alpha channel to control the opacity of the color. If you have brand colors you’d like to use in your player, you can paste them into the text box directly. If you don’t have exact values you’d like to use, click on the colored area next to the text to open our color picker.

If at any point you’d like to revert the color you’ve chosen to the default, simply delete the text, and that option will immediately reset.

Please refer to the table below for a description of what each color customization option controls.
 

Name Description Default
Control Bar

Text Color

The color of any plain text in the control bar, such as the time.

"#F2F2F2"

Icons Default

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)"

Icons Hover

The color of hovered or selected icons in the control bar.

"#FFFFFF"

Background Color

The background color of the control bar and the volume slider. The default background is transparent.

"rgba(0,0,0,0)"

Timeslider Progress

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"

Timeslider Rail

The color of the base of the timeslider, known as the rail.

"rgba(255,255,255,0.3)"

Menus

Links Default

The color of inactive, default text in menus and the Next Up overlay.

"rgba(255,255,255,0.8)"

Links Hover

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"

Background Color

The background color of menus and the Next Up overlay.

"#333333"

Tooltips

Text Color

The text color of tooltips.

"#000000"

Background Color

The background color of tooltips.

"#FFFFFF"

Logo

Select logo

Click the add button to upload your logo. Note that you don’t need to upload a high-resolution file in order to have a stunning logo in your player. We recommend logos have a height of 44px for control bar placement, and 60px elsewhere. The width of the logo is not constrained and should be based on the aspect ratio of your logo.

Position

JW8 has five logo positions. The Control Bar option places a small logo within the control bar itself. The other positions can appear either in the top right (default position), top left, bottom right, or bottom left of the player frame. You may select only one logo position per player.

Visibility

Using JW Player to overlay your logo means you don’t have to stitch it into your content. If you’d like the logo to persist during the entire video, check the option to keep the logo visible when controls are hidden. Otherwise, the logo will fade in and out along with the control bar. Note that this setting does not apply to logos positioned in the control bar.

URL

If you’d like your logo to be clickable, include the URL you’d like to direct viewers to. When the logo is clicked, the player pauses, and the link is opened in a new window.

Right Click

Did you know that JW Player has its own right click menu? You can add your own text above the Powered by JW Player line to link to your homepage, for example. We’ve also seen customers use this section to link to a viewer feedback survey. The link is optional, but if you include one, please be sure to include either http:// or https:// at the beginning of the url.

Note: This feature requires an Enterprise license. To access these features, upgrade now.

Discover

The Discover Overlay in the JW Player allows viewers to discover and browse media items loaded from a playlist. Playlists consist of linear or episodic content chosen through editorial curation or are generated from JW Engage's Recommendations Engine based on viewer and content metadata.

Activate discover overlay

Turn Recommended Content on or off for this player. You can test the overlay at different resolutions on the right panel​. Remember: the recommendations interface is configured on a per player basis.

Select a similar video playlist

Publishers can choose to use any Similar Video playlists with a recommendations enabled player. A 'Default Recommendations Feed' is auto-selected with content from the entire property. More editorial control over recommended content can be achieved by creating a new similar video playlist with specific tag business rules or the promote feature enabled. Be sure to provide unique names for any new playlists.

Auto-advance

Publishers can choose to auto-advance to the Next Up video 'immediately'; after 5, 10, 20, or 30 seconds; OR only upon a viewer click with the 'do not advance' setting.

Custom text

You can customize the Next Up text if desired. This text appears in a tooltip and in an overlay near the end each video.

Sharing

This tab contains all of the settings for sharing. Enabling sharing adds an icon in the control bar, which opens a menu in settings with social sharing options.

Page URL or Page URL & IFrame

When you toggle sharing on, JW Player automatically adds a link option, which takes the URL of the page where the video is embedded and copies the link to the user’s clipboard. Optionally, you can also include an embed code by selecting the Page URL & IFrame option. The embed option copies an iframe embed code to the viewer’s clipboard.

Sharing Tooltip

By default, the sharing tooltip that appears on hover and for accessibility use, such as screen readers, says “Share Video.” If you want to customize this text to suit your brand, or translate the text into another language, you can do so here.

Social Networks

Here you can select and reorder the networks you want to enable in the sharing menu. The link and/or embed options always appear at the end of the list. Out of the box, JW Player supports sharing to Facebook, Twitter, email, Google+, LinkedIn, Pinterest, Reddit, and Tumblr.

Note: This feature requires an Enterprise license. To access these features, upgrade now.

Monetize

JW Player's advertising features allow you to monetize your content with video ads. This tab contains everything you need to run ads on your player. You can enable Advertising and perform the setup for the first time, or navigate to the full Ad Schedules page for advanced configuration.

Ads Tester

Before pushing your player live, our Ads Tester is a great place to ensure your ad tags will work. Any debugging will also be easier as you can compare your ad tags against JW Player's overall video ad capabilities. If your ad tags don’t work in our ad tester, it’s unlikely they’ll work with your player.

Schedule

Select an existing ad schedule or create a new preroll schedule to go with your player, allowing you to run ads on it.

When creating a new preroll ad schedule, you can do your initial configuration and edit it on its Ad Schedules page later. First you’ll select the ad manager, name your schedule, and paste the ad tag you received from your ad provider. You can also customize the ad countdown message and cue text seen when hovering over an ad break on the timeslider.

If using VAST as your ad manager, you can also add waterfall tags and make the ads skippable. If using Google IMA as your ad manager you can adjust the VPAID mode if desired.

Companion Ads

Configure a div to display companion ads to go alongside your video ads.

Did you find this article helpful?

Please log in to rate this article.