Articles Technology Blog News Company
JavaScript-based player for ScreenPressor
This is the new JS-based implementation of in-browser player for videos made with ScreenPressor. No plugins required, works in all modern browsers but no sound in Internet Explorer (MS Edge is ok though). Supports videos compressed with versions 2, 3, and 4 of ScreenPressor.

This player for ScreenPressor does not use built-in video codecs and instead simply implements ScreenPressor decoder. It's efficient (faster than Flash version), flexible and it's free. You don't need any video streaming server, any ordinary web server is ok. You can easily customize player's look and control it via JavaScript.

Some live examples:

The player does not load video data until you activate it by clicking it. While not activated it shows a static thumbnail image loaded from a JPEG file, which can be resized and lossy compressed down to a very small size, so don't let this image mislead you regarding video quality.

UI controls:

(Yeah, that's probably too many. This set of controls was created for a corporate client, we can make a simpler set, just let us know if you need it.)

Using the web player

Just record and save your video to AVI file with video stream compressed with ScreenPressor and audio stream in MP3 (44.1 KHz) or without any audio. Then upload this video file to your web site. Also upload (just once) the player - jsplayer.js
Load it on your page, like:
<script type="text/javascript" src="jsplayer.js"></script>

To show your video on a web page use following HTML snippet:
  <div id="player1"></div>
  <script type="text/javascript">
    lime.embed ("jsplayer", "player1", 900, 660, {
     parameters: {fname:"my_video.avi", id:"player1",  thumb: "my_video_thumbnail.jpg" } });
  </script>
  
Red parts are the ones you need to change: specify your player window dimensions and relative path to video file on your server. If you want to show some preview picture before loading the video, specify path to the image after "thumb:". You can skip this parameter, in this case the player will start loading video right away (just loading, not playing). "player1" in this example is an ID for the player, you can put any identifier here, and in case you place several player instances on one page you can use this parameter to identify and control them.

Controlling the web player from JavaScript

If you're making a web application you can communicate with the video player from your JavaScript code. Access the player instance like this:
  document.getElementById('player1')
  
(assuming 'player1' is the id you used in snippet above) Then you can call video player's functions like this:
  document.getElementById('player1').spplay();
  

The player exposes following functions:

  • spplay() - Play
  • sppause() - Pause
  • spposition() - get current position in seconds as a float value
  • spseek( pos ) - seek to specified position in seconds (where "pos" is a float value)
  • spload( filename ) - load another video file
  • spnextchange() - move forward to the next content change (helpful for videos containing recorded screen which doesn't change for a long time)
  • spresize( width, height ) - resize the player window to given dimensions
These functions become available when the player is loaded and started to load the video. To know in your code when the player is available to JS you can define a JavaScript function like this:
  function on_player_loaded(id, w,h)
  {
    ...
  }
  
The player will call this function passing its id as string (e.g. "player1") and resolution of the video - width and height. The id parameter may be helpful if you've got several instances of the player on one page. Just give them different ids.

Customizing player's look

You can either change colors of UI elements or provide your own images for them.

To change colors you can add following fields to the 'parameters' JSON object in the HTML code embedding the player, where you set 'fname' and 'thumb':

  • buttonbg - color of button background
  • buttonhover - background color of a button under mouse (highlighted)
  • buttonface - color of the figures on buttons
  • frame - color of frames around UI controls
  • loaded - color of the part of seekbar meaning loaded part of video
  • textcolor - color of the text

Colors are specified as 6-char triples of hexadecimal values, a format common for HTML but without the '#' character. Example: { parameters: {fname:"vid_sp3.avi", id:"player1", buttonbg:"ff0000", buttonhover:"00ff00", buttonface:"0000ff" } }

To change buttons more radically you can provide your own images for them. You will need to prepare following files:

  • btn_begin.png - "go to beginning" button
  • btn_begin_h.png - "go to beginning" button highlighted
  • btn_fullscreen.png - "toggle fullscreen" button
  • btn_fullscreen_h.png - "toggle fullscreen" button highlighted
  • btn_nextframe.png - "go to next frame" button
  • btn_nextframe_h.png - "go to next frame" button highlighted
  • btn_nextkey.png - "go to next key frame" button
  • btn_nextkey_h.png - "go to next key frame" button highlighted
  • btn_pause.png - pause button
  • btn_pause_h.png - pause button highlighted
  • btn_play.png - play button
  • btn_play_h.png - play button highlighted
  • btn_prevframe.png - "go to previous frame" button
  • btn_prevframe_h.png - "go to previous frame" button highlighted
  • btn_prevkey.png - "go to previous key frame" button
  • btn_prevkey_h.png - "go to previous key frame" button highlighted
  • btn_timecode.png - background for current position
Upload the files to some place in your site and specify the URL to this place in "buttons" parameter in the same JSON object. Like this:
parameters: {fname:"video.avi", buttons:"/images/", ...

Here's a sample archive with button images: buttons.zip.

Extended version of the web player

The version described above is rather simple. It doesn't require any video streaming server, you just need a simple web server capable of serving static content. It loads video file with a HTTP GET request and reads it entirely into memory. So it can be used for not so large files (less than a gigabyte or better half a gigabyte). For those wishing to play in a browser large files we've got another version of the web player. It only loads up to specified amount of megabytes and doesn't try to keep entire file in memory. It does so by requesting parts of video file using HTTP POST requests of a certain form. On the server side there must be a script which understands those requests and sends required data chunks. It's really simple, for example a Ruby implementation of such server is just a few lines of code.

If you're interested in this version of the player, please contact us.

Just decoder without UI

The JS version above contains a lot of UI elements and logic, but in case you need just a video decoder to integrate with your web application, there is one too. Just 30 KB.
A little demo.
Archive with code and description.