Super Dumb Player

A Flash video player which uses a pure HTML user interface.

Copyright 2010 by John Weir licensed under the MIT license.

Source Code: Github | run the tests set

Requires jQuery, jQuery UI with Draggable and swfobject.

Installation

Download the files and place them in your javascript directory.

You will need to include the following script source files:

<script type="text/javascript" src="vendor/swfobject.js"></script>
<script type="text/javascript" src="vendor/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="super_dumb_player.js"></script>
<script type="text/javascript" src="vendor/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" charset="utf-8">

// Update the path the swf file if you need too
dumb_player.player_url = "/super_dumb_player.swf";

</script>

Click the image for a dumb example

Basic Usage

1. Create an element to contain your video. It should include height and width styles or other be the dimensions you want the player to be. This element and its contents will be replaced by the flash movie.

<div id='unique_id' style="width:420px; height:360px">This is where your player will go</div>

2. Create the player. Call create with the target element and the url to the video.

$("#unique_id").superDumbPlayer("video_file_path.m4v");

<div id='player'>
  <img src='assets/still_from_video.png'/>
</div>

<script type="text/javascript">
  var player;

  $("#player img").click(function(){
     $("#player").superDumbPlayer('assets/dumb_example.m4v');
  })
</script>
    

Custom Templates

The player has a built in HTML interface template, but no CSS style. So create some CSS to give the UI a useable look. Each element in the UI uses a specific class name, see below.

The interface template can be replaced using dumb_player.ui.template(template_source). You must replace the template before you create the player.

The UI does not need to have all, or any, of the elements. No errors should occur if something is missing.

<div class='dumb_player_ui'>
  <span class='duration'/>
  <span class='time'/>
  <div class='scrubber'>
    <div class='track'>
      <div class='buffer'>
        <div class='thumb'/>
      </div>
    </div>
  </div>
  <button class='state'>
    <span class='play'>Pause</span>
    <span class='pause'>Play</span>
  </button>
  <button class='volume'>
    <span class='on'>Mute</span>
    <span class='off'>Unmute</span>
  </button>
</div>
    

It is possible to use a graphics library, like Raphael, to really customize the look.

API

• dumb_player.player_source

  Set this property to point to the URL for the super_dumb_player.swf

• dumb_player.create(target_element, video_src) ⇒ dumb_player instance

  Creates a new player instance. Playing is always auto.

• dumb_player.ui.template() ⇒ template source

  dumb_player.ui.template(template_source) ⇒ template source

  This is optional. Set or retrieves the html template to use for the UI. A default UI will be used if you do not set one.

• dumb_player.ui.time_formater(function)

  This is optional. The time formatter is a function applied to the duration and time data. Use this function to manipulate the incoming decimal data for rounding.

Instance API

• player.buffer_time(n) ⇒ stream.bufferTime

  Set or get the number of seconds to buffer the video before playing. This can also be set via the spd_buffer_time attribute in the video source element. The default value is 1 second.

• player.load(src) ⇒ player

  Load a new movie and start playing it

• player.pause() ⇒ player

• player.play() ⇒ player

  Play the movie, if it is paused.

• player.player() ⇒ the object/embed element

  Return the object or emended element containing the Flash player.

• player.remove()

  Remove the player and replace it with the original content.

• player.toggle() ⇒ player

  Toggle play/pause.

• player.toggle_volume() ⇒ player

  Toggle volume on or off.

Flash Events

You can bind a parent of the player to listen for sdpState and sdpStatus events.

• sdpState true | false

  Triggered when the movie is played or paused

• sdpUpdate object

  Triggered as the movie plays.

  
    time      : stream.time
    duration  : metaDataStore.duration
    percentage: stream.time/metaDataStore.duration * 100
    loaded    : stream.bytesLoaded/stream.bytesTotal
          

Examples

$("body").bind("sdpState", function(event, state){
  if(state == false){ alert("the player is paused")}
});
      

$("body").bind("sdpState.PLAYER_ID", function(event, state){
  if(state == false){ alert("the player is paused")}
});
      

UI Flash Events

The following Flash events are captured: MOUSE_DOWN, MOUSE_MOVE, MOUSE_OUT, MOUSE_OVER, MOUSE_UP, MOUSE_WHEEL

By default these events are ignored. If you wish to do anything with them you need to create a function to process them.

• player.flash_event(func) ⇒ player

  Use this method to capture mouse events which occur in the Flash Player.

  func is a function which takes one argument, an object which has all the properties of a AS3 MouseEvent

  For example, to toggle pause/play in a movie with a mouse click:

  player.flash_event(function(event){
    if(event.type == "mouseUp") {
      player.toggle();
    }
  })
            

HTML Attributes

The player source element can have the following attributes to overwrite the defaults.

• sdp_auto_play

  Set to 'off' to not auto play the video.

• sdp_buffer_time

  Number of seconds to buffer the stream before playing, default is 1.

• sdp_stage_scale_mode

  Should be a StageScaleMode. Default is StageScaleMode.NO_SCALE

• sdp_volume

  Sets the volume level from 0 to 1.

An example. Click the below example to load the video. Then click the video or play to start.

For reasons I don't understand, the video does not scale to the full width of the player.