API examples

This page contains a few cases of player - javascript interaction using the player embedder.

Redirecting on complete
When the video has completed, we redirect to a new page.
<div id="container">This'll be the player</div> <script type="text/javascript"> jwplayer("container").setup({ file:"video.mp4", height:400, width:600, events:{ onComplete: function() { window.location = "http://www.cnn.com"; } }, }); </script>

Using SWFObject
When using SWFObject (or another embed script), listeners cannot be set inline. Therefore, a user has to subscribe to the listeners:
<p id="container">Please install the Flash Plugin</p> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = { file:'/data/bbb.mp4',autostart:'true' }; var params = { allowfullscreen:'true', allowscriptaccess:'always' }; var attributes = { id:'container', name:'container' }; swfobject.embedSWF('player.swf','container','480','270','9.0.115','false',flashvars, params, attributes); jwplayer('container').onComplete(function() { window.location='http://www.cnn.com'; }); </script>

Controlling the player

We add javascript controls to play/pause and mute/unmute the player.
<p id="container">Please install the Flash Plugin</p> <script type="text/javascript"> jwplayer("container").setup({ file:"video.mp4", height:400, width:600 }); </script> <ul> <li><a <li><a <li><a <li><a </ul> href="#" href="#" href="#" href="#" onclick="jwplayer().play()">play</a></li> onclick="jwplayer().pause()">pause</a></li> onclick="jwplayer().setMute(true)">mute</a></li> onclick="jwplayer().setMute(false)">unmute</a></li>

printing a playlist
We print the playlist in HTML. When an item is clicked, it is loaded in the player and autostarted.
<script type="text/javascript"> jwplayer("container").setup({ file:"video.mp4", height:400, width:600 }); </script> <ul> <li><a href="#" onclick="jwplayer().load('video.mp4')">play video.mp4</a></li> <li><a href="#" onclick="jwplayer().load('bbb.mp4')">play bbb.mp4</a></li> <li><a href="#" onclick="jwplayer().load('ed.mp4')">play ed.mp4</a></li> </ul>

See the code currently needed.

HD switch
Technically, this is similar to the playlist printing. Having a separate example will be useful though. Note that we play the video automatically upon switching:
<script type="text/javascript"> jwplayer("container").setup({ file:"video.mp4", height:400, width:600, events: { onPlaylist: function() { this.play(); } } }); </script>

<ul> <li><a href="#" onclick="jwplayer().load('video_320p.mp4')">Play in 320p quality</a></li> <li><a href="#" onclick="jwplayer().load('video_480p.mp4')">Play in SD quality</a></li> <li><a href="#" onclick="jwplayer().load('video_720p.mp4')">Play in HD quality</a></li> </ul>

See the code currently needed.

Adding chapter markers

We print a list of chapter markers on the page, to allow for easy navigation in a larger file.
<script type="text/javascript"> jwplayer("container").setup({ file:"ed.mp4", height:400, width:600 }); </script> <ul> <li><a href="#" onclick="jwplayer().seek(54)">Chapter 1</a></li> <li><a href="#" onclick="jwplayer().load(224)">Chapter 2</a></li> <li><a href="#" onclick="jwplayer().load(549)">Chapter 3</a></li> </ul>

Note that this code implies a seek() should start playing a video at the offset if the player is idle. This is ticketed for the 5.2 player.

Chapter markers with event callback

With a little more info and the onPosition() callback, it's possible to also highlight the current chapter:
<script type="text/javascript"> var positions = [54,224,549]; var current; jwplayer("container").setup({ events: { onPosition: function(data) { for (var i=0; i<positions.length; i++) { if(data.position < positions[i]) { if (i-1 != current) { document.getElementById("sec"+current).removeClass('selected'); current = i-1; document.getElementById("sec"+current).addClass('selected'); } break; } } } }, file:"ed.mp4", height:400, width:600 }); </script> <ul> <li id="sec54"><a href="#" onclick="jwplayer().seek(54)">Chapter 1</a></li> <li id="sec224"><a href="#" onclick="jwplayer().load(224)">Chapter 2</a></li> <liid="sec549"><a href="#" onclick="jwplayer().load(549)">Chapter 3</a></li> </ul>

Mimicking lineair tv
Instead of on-demand, we start the playlist in the player based upon the local time (like oldteevee).
<script type="text/javascript"> jwplayer("container").setup({ playlistfile:"playlist.rss", height:400, width:600 }); var seconds = new Date().getMinutes()*60 + new Date().getSeconds()*60; var offset = 0; var list = jwplayer().getPlaylist(); for(var i=0; i<list.length; i++) { if(offset + list[i].duration > seconds) { jwplayer().setItem(i); jwplayer().seek(offset); break; } else { offset += list[i].duration; } } </script>

Resizing the player

Youtube has a player resize toggle on its site, which allows visitors to extend the player across the entire width of the site:
<script type="text/javascript"> jwplayer("container").setup({ playlistfile:"playlist.rss", height:400, width:600 }); function resizePlayer() { if(jwplayer().getWidth() == 720) { jwplayer().resize(480,270); } else { jwplayer().resize(720,400);

} }; </script> <a href="#" onclick="resizePlayer()">Toggle player size</a>

Using the addDockButton feature (1.1?), the button for doing this can even be added to the player itself.

Player in a lightbox
Here's a simple example of the player in a lightbox, using the jQuery Tools library:
<a href="#" id="button">Show overlay</a> <div class="overlay" id="container"></div> <script type="text/javascript"> $(function() { $('#button").overlay( { effect: 'apple', onLoad: function() { jwplayer("container").setup({ playlistfile:"playlist.rss", height:400, width:600 }); }, onClose: function() { jwplayer("container").remove(); }); }); </script>