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.


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";

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.


For Example

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

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

  $("#player img").click(function(){

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'/>
  <button class='state'>
    <span class='play'>Pause</span>
    <span class='pause'>Play</span>
  <button class='volume'>
    <span class='on'>Mute</span>
    <span class='off'>Unmute</span>

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


Instance API

Flash Events

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


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

If you have more than two movies you can specify the movie's DOM id in the binding.
$("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.

HTML Attributes

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

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.