LongTail Video is now JW Player - New Name, Same Passion For Video

Close

JW Player Support Documentation

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.

ClassGettersSettersEvents
Ready getRenderingMode onReady
onSetupError
Playlist getPlaylist
getPlaylistIndex
getPlaylistItem
load
playlistItem
onPlaylist
onPlaylistItem
onPlaylistComplete
Buffer getBuffer onBufferChange
Playback getState play
pause
stop
onPlay
onPause
onBuffer
onIdle
onComplete
onError
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
Controls getControls
getSafeRegion
addButton
removeButton
setControls
onControls
onDisplayClick
Advertising playAd onAdClick
onAdCompanions
onAdComplete
onAdError
onAdImpression
onAdTime
onAdSkip
onBeforePlay
onBeforeComplete
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.

Still don't have the new JW Player? Get It Here