I am working on a custom interface for the JW Player which displays the current track title and has play/pause, next track, previous track and volume toggle buttons.
It works for IE8/9 and FF but fails for Chrome and Safari. Chrome's console gives the following error: Uncaught TypeError: Object # has no method 'addControllerListener'
This is the code I am using for testing.
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
image: "preview.jpg",
height: 320,
width: 480,
modes: [
{ type: "html5" },
{ type: "flash", src: "player.swf" }
],
'playlist': [
{ 'file': "audio/01.mp3", 'title': "Track 1" },
{ 'file': "audio/02.mp3", 'title': "Track 2" },
{ 'file': "audio/03.mp3", 'title': "Track 3" }
],
});
function playerReady(obj)
{
player = document.getElementById(obj.id);
displayFirstItem();
};
function displayFirstItem()
{
try
{
playlist = player.getPlaylist();
}
catch(e)
{
setTimeout("displayFirstItem()", 100);
}
player.addControllerListener('ITEM', 'itemMonitor');
itemMonitor({index:0});
};
function itemMonitor(obj)
{
$('#nowplaying').html('<span><strong>Now Playing:</strong> ' + playlist[obj.index]['title'] + '</span>');
};
</script>
<div id="nowplaying"></div>
<div class="control_bar">
<ul>
<li onclick='player.sendEvent("play");'>[ › ] Play / Pause</li>
<li onclick='player.sendEvent("prev");'>[ « ] Previous item</li>
<li onclick='player.sendEvent("next");'>[ » ] Next item</li>
</ul>
</div>
I have searched and tried several modifications, like adding the javascriptid parameter, nothing seems to work for Chrome or Safari.
Any ideas? Thanks
