Skip to content
romsson edited this page Feb 20, 2013 · 18 revisions

StreamPlayer is a JavaScript library of GUI controls (play/pause, next/previous and stop) for any type of data streams (or any data with timestamp or some sort of order). It handles the internal state of the player and all the time/clock related mechanisms. A series of callback enables to bind actions according to the user interaction or the internal state.

The current features are:

  • GUI controls and callback functions
  • Automatic GUI controls updates

The future plans are:

  • More controls: replay last 30s, jump 30s ahead, replay once/all, notification of updates, etc.
  • High level of customisations in terms of skin and custom controls
  • Internal buffer for time shifting and replays
  • Various replay strategies, such as adapting to the stream characteristics (e.g. jumping ahead if nothing to read in the buffer)
  • Pre-defined sets of CSS skins

For more information/contact: twitter.com/romsson

What are the advantages of using it?

  • You don't need to worry about the visual aspect of the player, such as making some command available or not
  • The player automatically updates the setInterval() function according to the selected speed

Installation

Insert the main JavaScript class into your code:

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

A simple stream player can be instantiated with play/pause controls as follows:

<div id="stream-player">
  <input type="button" class="command pause" value="pause" title="play/pause"/>
</div>

A more complex player can be created as follows:

<div id="simple-stream-player">
  <input type="button" class="command prev" value="prev" title="prev element"/>	
  <input type="button" class="command fb" value="fb" title="fast backward"/>			
  <input type="button" class="command stop" value="stop" title="stop"/>		
  <input type="button" class="command pause" value="pause" title="play/pause"/>
  <input type="button" class="command ff" value="fb" title="fast forward"/>		
  <input type="button" class="command next" value="next" title="next element"/>	
</div>

Constructor

StreamPlayer StreamPlayer(Mixed player [, Object options ])

  • Mixed player: HTML element id or a DOM element itself
  • Object options

Options

  • Boolean auto_start: starts playing automatically once loaded; default: false
  • Boolean is_playing: is the playing currently playing data; default: auto_start
  • Integer current_speed: frequency (in milliseconds) of the updateCallback function; default: 1000
  • Integer current_time: current time; default: 0 + speed interval
  • Integer min_speed: minimal speed (milliseconds interval); default: 4000
  • Integer max_speed: maximal speed (milliseconds interval); default: 250
  • Function refreshCallback: triggered every time time update or user interaction; default: null
  • Function playCallback: on play button click; default: null
  • Function pauseCallback: on pause button click; default: null
  • Function updateCallback: updates called every updates_freq milliseconds; default: null
  • Function nextCallback: next event; default: null
  • Function previousCallback: previous event; default: null
  • Function ffCallback: fast forward reading speed; default: null
  • Function fbCallback: fast backward reading speed; default: null
  • Function soundCallback: enabling or disabling sound; default: null
Clone this wiki locally