Documentation: JavaScript API

To use the java script api of the player we have coded a simple class in javascript that you can download jarisflvplayer.js. Also you need to pass the flash variable jsapi with a value of 1 or true in order to expose the api functions.

1. You will need to include the script file on your page like this:

<script type="text/javascript" src="jarisflvplayer.js"></script>

2. Create your function listeners and initialize the interface to add them

//Catches all the events triggered by the player
function onAll(data){
    alert(data.type);
}

//Triggers when the playback ends
function onComplete(data){
    alert("playback has finished");
}

//Initialize the player interface
player = new JarisFLVPlayer("Id_Of_Player_Object");
player.addListener(JarisFLVPlayer.event.ON_ALL, "onAll");
player.addListener(JarisFLVPlayer.event.PLAYBACK_FINISHED, "onComplete");

Demo:

CODE:

(HTML)

<center>
<object
  width="576" height="360"
  id="playerObject" 
  data="/files/JarisFLVPlayer.swf"
  type="application/x-shockwave-flash"
>
<param name="allowFullscreen" value="true">
<param name="allowScriptAccess" value="always">
<param name="movie" value="/files/JarisFLVPlayer.swf">
<param name="bgcolor" value="#000000">
<param name="quality" value="high">
<param name="scale" value="noscale">
<param name="wmode" value="opaque">
<param name="flashvars" value="
source=http://jaris.sourceforge.net/files/jaris-intro.flv&
type=video&duration=52&streamtype=file&poster=/images/poster.png&
autostart=false&logo=/images/logo.png&
logoposition=top left&logoalpha=30&logowidth=130&
logolink=http://jaris.sourceforge.net&
hardwarescaling=false&controls=false&jsapi=1">
<param name="seamlesstabbing" value="false">
</object>

<div style="clear: both"></div>

<div style="width: 576px; background-color: #263843">
<button style="padding: 5px 0 5px 0; display: block; float: left; 
border: solid 1px #fff; color: #fff; background-color: #6D90A5" 
id="btnPlay" onclick="togglePlay(this)" >Play</button>
<span style="padding: 5px; display: block; float: right; color: #fff; 
font-weight: bold" id="seconds">
</span>
<div style="clear: both"></div>
</div>
</center>

(JavaScript)

<script type="text/javascript" src="/files/js/jarisflvplayer.js"></script>
<script type="text/javascript">
function togglePlay(caller)
{
    switch(caller.innerHTML)
    {
case "Pause":
    caller.innerHTML = "Play";
    player.pause();
    break;
case "Play":
    caller.innerHTML = "Pause";
    player.play();
    break;
    }
}

function addEvents()
{
    player.addListener(JarisFLVPlayer.event.TIME, "onTime");
    player.addListener(JarisFLVPlayer.event.PLAYBACK_FINISHED, "onPlayBackFinished");
}

function onTime(data)
{
    document.getElementById("seconds").innerHTML = player.getCurrentTime();
}

function onPlayBackFinished(data)
{
    alert("playback has finished!");
}

player = new JarisFLVPlayer("playerObject");

//Create a timer with 1000 miliseconds of delay to be sure the player has loaded before adding events
add_listener_timer = setTimeout("addEvents()", 1000);
</script>
Fork me on GitHub