Using the JavaScript API

This guide explains how to use the JavaScript API that is available with JW Player 6. This API can be used to enhance the functionality of your video embeds and/or to implement rich video-page interactions. It abstracts any differences between Flash and HTML5, so the code you write will work with both technologies.

Getting Started

Before it is possible to interact with a player, that player should be setup. The separate Embedding JW Player guide explains in detail how this works. Here is a quick example:

<div id="myElement">Loading the player ...</div>

<script type="text/javascript">
    jwplayer("myElement").setup({
        file: "/uploads/example.mp4",
        height: 360,
        image: "/uploads/example.jpg",
        width: 640
    });
</script>

When the player is setup, API calls can immediately be made. If you have one player on your page, it can always be accessed using the jwplayer() function. For example:

<ul>
    <li onclick='jwplayer().play()'>Start playback</li>
    <li onclick='alert(jwplayer().getVolume())'>Get audio volume</li>
</ul>

Multiple Players

When you have multiple players on a page, you must be specific about which player you want to interact with. In that case, there are two ways to select a player:

• With the id of the element you instantiated the player over:

  jwplayer('myElement').play();

• With the index in the list of players on the page (top to bottom):

jwplayer(2).play();

Note the selector jwplayer(0) is actually the same as jwplayer().

API Calls

JW Player 6 supports a large number of API calls, grouped by functionality in classes. In each class, three types of API calls are available:

1. Getters, which retrieve variables. For example:

   var volume = jwplayer().getVolume();

2. Setters, which control the player. For example:

   jwplayer().setVolume(80);

3. Events, which call a function whenever a variable changes. For example:

   jwplayer().onVolume( function(event){
       alert('the volume is now: ' + event.volume);
   });

The table below provides an overview of all API calls. The separate JavaScript API Reference guide contains an elaborate listing of all parameters for all API calls. Click on the name of a class in the table to jump to the corresponding section in the API Reference.

Class	Getters	Setters	Events
Ready	getRenderingMode		onReady
Playlist	getPlaylist getPlaylistItem	load playlistItem	onPlaylist onPlaylistItem onComplete onPlaylistComplete
Buffer	getBuffer		onBufferChange
Playback	getState	play pause stop	onBeforePlay onPlay onPause onBuffer onIdle
Seek	getPosition getDuration	seek	onSeek onTime
Volume	getMute getVolume	setMute setVolume	onMute onVolume
Resize	getWidth getHeight getFullscreen	resize	onFullscreen onResize
Quality	getQualityLevels getCurrentQuality	setCurrentQuality	onQualityLevels onQualityChange
Captions	getCaptionsList getCurrentCaptions	setCurrentCaptions	onCaptionsList onCaptionsChange
Button		addButton removeButton
Controls	getControls getSafeRegion	setControls	onControls onDisplayClick
Error			onError
Metadata			onMeta

Player Removal

In addition to the setup call and the various API classes, JW Player 6 contains a function to unload a specific player embed. It is very simple:

jwplayer().remove();

This formal remove() function will make sure the player stops playback, the DOM is re-set to its original state and all event listeners and timers are cleaned up.