Flowplayer html5 timline scrubber thumbnails plugin

The plugin displays still frames from the video file when the user hovers over the control bar's scrubber. The good thing about it is that it's different from other similar software because it does not require you to generate the still images it does it on the fly - accessing the video file directly without downloading it first, by extracting the key frames. So rather than having to pre generate the images to be displayed on Flowplayer html5's seek bar this happens automatically and transparently for both the video publisher and the user.

If you are looking for Flash version please check out our timeline thumbnails preview plugin for Flowplayer Flash.

The plugin is able to produce preview stills in any relatively modern browser ( Internet Explorer 8+) that either support H264 mp4 html5 video or has Flash plugin enabled that is it works in pretty much any browser. It does not matter if the currently played video is mp4 or not, however an mp4 version must be present in your sources list for the plugin to be able to generate and show the scrubber preview images. For example, a webm could be playing in Firefox using html5 video tag while the stills are being generated using Flash and alternative mp4 source.

Usage

If your video files reside under the same domain as the page where Flowplayer html5 is used all you have to do is to include the plugin's javascript file in your page's head element, create an object with the desired width and height of the preview images in the global scope and you are done:

		var easybits_FplScrubber = {
			swfgeneratorurl:"/software/prod-6/mp4/easybits-topng.swf",
			width:160,
			height:90
		};
	

If you video assets are delivered from different domain name then you would need to first upload loaders onto that domain and specify their location/loctions in the plugin's options object in the of an array:

		var easybits_FplScrubber = {
			swfgeneratorurl:"/software/prod-6/mp4/easybits-topng.swf",
			loaders:["http://funnyanimation.net/ez/prod-6/http/easybits-httpstreaming.html"],
			width:160,
			height:90
		};
	

Loaders are simple html files that are used internally by the seek preview plugin to get the metadata and the key frames out of the video files.

Technical stuff

The images are not stored separately but rather reside inside the video file in the form of H264 encoded key frames and the Flowplayer html5 scrubber preview plugin simply knows how to parse the mp4 video metadata, download key frames (and some additional information needed to decode them) only without the need to download the whole file and then to decode them to be displayed as stills.

To decode the key frames for the scrubber bar preview the plugin uses either native html5 video tag if the browser supports it and specifically H264 in mp4 or it falls back to Flash, to display the decoded preview stills either canvas elements are used or embedded Flash objects. When canvas elements are used for presentation it's possible in many modern browsers to get png or jpeg images using canvas.toDataURL, however this method throws security error in some browsers, for example in the latest Firefox.

In fact an approach similar to the functionality of this plugin could be used to protect graphics from being saved by the front user, because when the images are stored encoded and are decoded on the client side using not a trivial techniques and are displayed by the means of either canvas or embedded Flash objects the browser user cannot store them to their device and use elsewhere.