Have a screencast and tired of bad video quality of youtube and other video sharing sites?
Now you can post lossless screencasts on your own site using ScreenPressor's Flash-based
web player. Ordinary Flash video players (used at virtually all video sharing sites)
use Flash's built-in video codecs (a very limited choice) and so cannot offer lossless
video with reasonable bitrate. One has to either bear with quality loss or use lossy
codecs with very high bitrate, increasing traffic costs and bandwith requirements.
Web player for ScreenPressor does not use Flash video and instead simply implements
ScreenPressor decoder. It's very small (about 10 times smaller than youtube player),
efficient, flexible and it's free. You don't need any video streaming server, any ordinary
Here's an example:
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, left to right:
Rewind to the start, go back to last key frame, go back one frame,
play/pause, go forward one frame, go forward to next key frame,
current position / total length, toggle fullscreen.
Using the web player
Just record and save your video to AVI file with video stream compressed with ScreenPressor
and audio stream in MP3 (16-bit, 44 KHz, stereo) or without any audio. Then upload this video
file to your web site. Also upload (just once) the player -
screenpressor.swf (33 KB). To show the video on a web page
use following HTML snippet:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="player"
<param name="movie" value="screenpressor.swf">
<param name="FlashVars" value="fname=clip.avi&thumb=clip-thumb.jpg">
<param name="allowFullScreen" value="true"/>
<param name="allowScriptAccess" value="always" />
<embed type="application/x-shockwave-flash" src="screenpressor.swf"
width="600" height="548" flashVars="fname=clip.avi&thumb=clip-thumb.jpg"
allowFullScreen="true" allowScriptAccess="always" name="player">
Red parts are the ones you need to change: specify your video 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).
If you're making a web application you can communicate with the video player from your
if (navigator.appName.indexOf("Microsoft Internet")==-1)
if (document.embeds && document.embeds[movieName])
After defining this function you can call video player's functions like this:
where "player" is the id you specified in HTML code above of embedding the flash object.
The player exposes following functions:
These functions become available when the player is loaded and started to load the video.
- 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)
The player will call this function passing its id as string (e.g. "player"). The id parameter
may be helpful if you've got several instances of the player on one page. Just give them different
You can also define another function:
return 1; //anything but null
If it is defined, the player will call it each time user presses "Next frame" button in the
player's UI. If it returns null the button will work as usual (change position one frame forward),
otherwise it will do nothing, so you can add your own logic for that button. Again, "id" is a
string parameter containing id of player instance.
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 parameters to the flashVars string of HTML code embedding
Here's an example of flashVars string with colors redefined:
- 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.
To change buttons more radically you can provide your own images for them. You will need to
prepare following files:
Upload the files to some place in your site and specify the URL to this place in "buttons"
parameter in the flashVars. Like this:
- 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
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 (using Mongrel).
If you're interested in this version of the player, contact us.