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
- Include JavaScript files from the package on the page where Flowplayer is embedded in the following order: easybits-helper.js, easybits-multistreaming.js, jdataview.js, easybits-mp4.js, easybits-flowplayer-flash-scrubber-preview.js
- In Flowplayer initialisation specify url of the thumbnails controls plugin
... plugins: { controls: { url:"/software/prod-6/scrubber/flow/easybits.flowplayer.controls-preview.swf" } ... - If domain name of the page and domain name of the video url does not match upload easybits-httpstreaming.html (loader that allows to work around cross domain ajax requests restrictions) onto the video server and change urls to easybits-helper.js and easybits-multistreaming.js inside this html file (you will probably use the same urls as in point 1)
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:
Home