Time line thumbnails plugin for Flowplayer Flash.

Preview HTTP example

This plugin for Flowplayer Flash allows you to display preview images from the playing mp4 video (MPEG-4 format) when the user hovers over the player's time line. The different and good thing about this plugin is that you do not need to prepare these preview images before hand, these are the key frames in your mp4 video file and they are extracted and decoded on the fly by the scrubber plugin.

If you are looking for html5 version please check out our scrubber preview plugin for Flowplayer html5.

Simply replace the standard controls plugin bundled with the Flowplayer by this one and set up global configuration variable in JavaScript specifying the desired dimensions for the video preview images. In case your videos are hosted on a different domain and are played over HTTP you would also need to upload small html file there and provide its location, this is needed for the plugin to overcome same origin policy to be able to make byte-range ajax requests to that domain to extract the key frames and metadata from the mp4 video to decode these into still images.

Code for the example:

		var easybits_FplScrubber = {
			loaders:["http://livenl.easy-bits.com/ez/prod-6/http/easybits-httpstreaming.html"],
			width:160,
			height:90
		};
		$f("player", "/swf/flowplayer-3.2.16.swf", {
			clip: {
				url:"http://livenl.easy-bits.com/videos/tears-of-steel.mp4"
			},
			debug: false,
						plugins: {
				controls: {
					url:"/software/prod-6/scrubber/flow/easybits.flowplayer.controls-preview.swf"
				}
			}
		});	
	

Installation instructions

Removing logo

Once you have obtained your license key for the thumbnails plugin place it in the configuration under ‘key’ property as follows:

		var easybits_FplScrubber = {
			...
			key:"mypurchasedlicensekey",
			...
		};
	

Preview RTMP example

Code for the example:

		var easybits_FplScrubber = {
			loaders:["http://livenl.easy-bits.com/ez/prod-6/http/easybits-httpstreaming.html"],
			width:160,
			height:90
		};
		$f("player_rtmp", "/swf/flowplayer-3.2.16.swf", {
			clip: {
				provider: 'rtmp',
				url:"mp4:videos/tears-of-steel"
			},
			plugins: {
				rtmp: {
					url: '/swf/flowplayer.rtmp-3.2.3.swf',
					netConnectionUrl: 'rtmp://cp129755.edgefcs.net/ondemand'
				},
				controls: {
					url:"/software/prod-6/scrubber/flow/easybits.flowplayer.controls-preview.swf"
				}
			}
		});	
	

If you would like to remove our logo please consider purchasing a license key:

loading..

Please wait...