Hi, I've been searching around ...Hi, I've been searching around but unable to find exactly what I'm trying to do and I'm a bit confused with the jscript api events so I was hoping to get a better answer here..
What I have setup so far is a video playlist via xml. What I'd like to do is when the player is in the action of PLAYING, I'd like it to show some text in a div about the current playing item from the playlist.
I've managed to set this up to some degree but right now regardless of whether or not the player is playing, the text still shows some text. I even setup the div with a mouseover and mouseout event so that the div will only display when my mouse is over the player.
Although I can get the div to change text from video to video, I can't get it to change during a video if a person were to pause the video or resume. None of the event listeners i've tried seem to work (or I'm using them wrong).
Can anyone give a hand? The code below that I've got so far (with the help from forums) will float the div on top of the player and hide/show it depending on the mouseover/mouseout. But how can I find if the player is stopped (like when first loaded or when paused) vs. when it is actively playing?
Thanks!!
<html><head><title></title>
<style type="text/css">
div.nowplaying
{
position: absolute;
top: 225px;
left: 150px;
width: 200px;
height: 40px;
padding: 5px;
font-size: 14px;
font-weight: bold;
font-family: arial;
color: #202020;
border: solid 1px #808080;
background-color: #FFFFC0;
}
div.preview
{
width: 470px;
height: 470px;
}
</style>
<script type='text/javascript' src='/_include/script/swfobject.js'></script>
<script type="text/javascript">
var player = null;
function playerReady(obj)
{
player = gid(obj.id);
displayFirstItem();
};
function itemMonitor(obj)
{
gid('nowplaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].title + '</span>.<br>Link: <span><a href="' + player.getPlaylist()[obj.index].link + '">Click for more info</a></span>';
};
function displayFirstItem()
{
if(player.getPlaylist())
{
itemMonitor({index:0});
player.addControllerListener('ITEM', 'itemMonitor');
}
else
{
setTimeout("displayFirstItem()",100);
}
alert(player.ViewListener('PLAY'));
};
function gid(name)
{
return document.getElementById(name);
};
function showHideContent(status)
{
var nowplay;
nowplay= document.getElementById('nowplaying');
if (status == 'ON')
{
nowplay.style.visibility = 'visible';
}
else
{
nowplay.style.visibility = 'hidden';
}
}
</script>
</head>
<body onLoad="showHideContent('OFF')">
<div id="nowplaying" class="nowplaying">
</div>
<div id='preview' class="preview" onMouseOver="showHideContent('ON')" onMouseOut="showHideContent('OFF')" width='470' height='470'>The player will show in this paragraph</div>
<script type='text/javascript'>
var s1 = new SWFObject('/_resources/mediaplayer/mediaplayer.swf','player','470','470','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode', 'transparent','true');
s1.addParam('flashvars','file=test.xml&skin=snel.swf&playlist=bottom&displayclick=link&lightcolor=FFCC00&frontcolor=000000&wmode=opaque');
s1.write('preview');
</script>
</body>
</html>
First, update your displayFirstItem() function to this:
function displayFirstItem(){
try
{
playlist = player.getPlaylist();
}
catch(e)
{
setTimeout("displayFirstItem();", 100);
}
player.addControllerListener('ITEM', 'itemMonitor');
itemMonitor({index:0});
};
Next, since it's a bit unclear, do you only want the "Now Playing" to be visible when the player is actually playing?
If so, use this:
<script type="text/javascript">var player = null;
var playlist = null;
var currentItem = null;
function playerReady(obj)
{
player = gid(obj.id);
displayFirstItem();
};
function displayFirstItem()
{
try
{
playlist = player.getPlaylist();
}
catch(e)
{
setTimeout("displayFirstItem();", 100);
}
player.addModelListener('STATE', 'stateMonitor');
player.addControllerListener('ITEM', 'itemMonitor');
itemMonitor({index:0});
};
function stateMonitor(obj)
{
if(obj.newstate == 'PLAYING')
{
gid('nowplaying').innerHTML = 'Now Playing: <span>' + playlist[currentItem]['title'] + '</span>.<br>Link: <span><a href="' + playlist[currentItem]['link'] + '">Click for more info</a></span>';
}
else
{
gid('nowplaying').innerHTML = '';
}
};
function itemMonitor(obj)
{
currentItem = obj.index;
};
function gid(name)
{
return document.getElementById(name);
};
</script>
Untested, but barring a few typOs, it should work!