You liked seeking to any playing position and experience immediate playback. You enjoyed the feeling of streaming video, without having to buy and maintain a streaming server. And you wanted to have a “web 2.0″ interface, easy to use controls, minimalistic design, flexible resolutions, TV-like fullscreen, a volume slider, video smoothing, URL-linking and user tracking via clickTAG. Now you got it! For free if you use it in a non-commercial context, and for a small amount of EUR 50 per domain for a commercial licence.
Clients need to have at least Flash Player 9.0 installed as a browser plugin, which is freely available from Adobe for Windows, Mac OS X, Linux and Solaris (Get Flash Player). Fullscreen support is limited by Adobe to Windows and Mac OS X and requires at least Flash Player 9.0.28.
You need a webserver that is able to seek inside Flash Videos and deliver only seqments. My recommendation is lighttpd with its streaming module (see this tutorial), but others like IIS, Apache and Nginx are also known to work. H.264 is supported and looks great, but does not allow scrubbing capabilities at the moment.
Requirements: Flash Video / H.264 Video
However you transcode your videos, they should have metadata included. There are several tools to inject metadata to FLV files. On command line, yamdi (OS X, Linux, BSD) seems to perform best, but there is also flvtool2 (crossplatform, Ruby required) and flvmdi (Windows, also with a graphical user interface). For H.264 video, I use qt-faststart on command line that moves the H.264 metadata (moov atom) to the beginning of the file, which enables progressive downloads.
Requirements: Technical skills
Embedding is straight-forward, for the video above it looks like that:
<object id="FLVScrubber" width="576" height="432" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"><param name="movie" value="http://topfstedt.de/FLVScrubber3/FLVScrubber.swf"/><param name="bgcolor" value="#000000"/><param name="allowScriptAccess" value="sameDomain"/><param name="allowFullScreen" value="true"/><param name="flashVars" value="file=http://www.nibbler.at:8080/svm-nutshell.flv&previewImage=http://www.nibbler.at:8080/svm-nutshell.jpg"/><embed src="http://www.topfstedt.de/FLVScrubber3/FLVScrubber.swf" bgcolor="#000000" width="576" height="432" name="FLVScrubber" allowScriptAccess="sameDomain" allowFullScreen="true" flashVars="file=http://www.nibbler.at:8080/svm-nutshell.flv&previewImage=http://www.nibbler.at:8080/svm-nutshell.jpg" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"></object>
There are three attributes of interest: Width and height define the resolution of FLV-Scrubber. If your videos’ native resolution is eg. 320×240 pixels, you might want to set width to 320 and height to 240. No problem if does not match, the video just will be scaled up or down. The third attribute is “flashvars”. That’s where you change the bahaviour and pass over information to FLVScrubber. You need to set at least file here, to link to the video you want to play. Everything else is optional (key/value pairs inside the flashvar attribute are separated using &). Here is a complete list:
- file=[URL] defines which video to show
- &autoStart lets the video start immediately
- &bufferTime=[number] changes the buffer time (default is 3 seconds)
- &clickTag=[URL] defines a target to call after video ended
- &credit=[(URL encoded) text] to show a credit like your company name in the context menu
- &link=[URL] defines a website to open when user clicks into the video
- &linkTarget=[blank,parent,self,top] defines the target of the website above (default: blank)
- &loop=true lets your video replay itself instead of ending (default: false)
- &previewImage=[URL] sets an backgroundimage as preview before playback starts
- &scrubbing=false use that, if you’re webserver has no enabled module for fake streaming (default: true)
- &seeking=false disallows the user to seek inside the video (default: true)
- &secondsToHide=[number] defines amount of seconds that the controlbar waits before hiding (0 means never, default is 5)
- &startAt=[number] defines the the second where the playback will start (default:0)
Download and use FLVScrubber
Download the latest version of FLV-Scrubber 3.x (Click right and select save as) and use it right now! Usage is free in a non-commercial context! A commercial licence costs only EUR 50 per domain and you can purchase it via PayPal right now.
This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 2.0 Austria License.
FLV-Scrubber 2.0 is a lightweight, web-based player for Flash Video, that allows the viewers to jump to any position of the video and experience immediate playback, just if it was streaming video. In fact, it is still a progressive download, delivered by a webserver that has special segmentation capabilities (I recommend lighttpd, technology is described here). But even without such a webserver it is still possible to watch videos, but YouTube-like.
The new 2.0 version has fullscreen videoplayback (with Flash Player Plugin 9.0.28 or higher for Windows and OS X), videosmoothing, a previewpicture, an improved buffering algorithm to save bandwidth and allows you to define the second to start from if you want to link a context.
To embed FLVScrubber2 into your website, just follow this example:
<embed flashvars="" src="http://www.yoursite.com/assets/scrubber.swf?file=http://www.yoursite.com/videos/yourvideo.flv&bufferTime=3&previewImage=http://www.yoursite.com/assets/yourvideopreview.jpg&startAt=0&autoStart=false" allowfullscreen="true" type="application/x-shockwave-flash" id="FLVScrubber2" style="width: 323px; height: 283px;" />
Privileges to use FLV-Scrubber for commercial purposes and/or
without attributon are purchasable for EUR 50 per domain. If you miss functionality, need support, consultation, transcoding, … , feel free to hire me!
Many thanks to Jan Kneschke, Stephan Richter, Lee Brimelow, Nikolai Longolius, the FFmpeg-Developers, Norman Timmler and Yuji Oshimoto
Details for other webservers (Use lighttpd if you can!):
- Francesco Meani: FLV Flash video streaming with ASP.NET 2.0, IIS and HTTP handler
- Alexey Kovyrin: Flash Video (FLV) Streaming With Nginx
- Paul Querna: mod_flvx (for Apache)