thumbnails support Created Oct 2, 2009

I had quite a lot trouble with this feature. I had a playlist and wanted to load a thumbnail of each image before the video plays. After a lot of stress I decided to use the javascript api.

The first steps I took was to load the images into the cache. I then used the content plugin to load the relevant image over the video. To hide the image I would check the state of the player. While the video was loading, I would show the image. As soon as the status changed to playing, I would hide the image using jquery. Its a bit long winded but It meant that the my player was more dynamic.

Alternatively if you have only one video on the page, or a single video per player, you can use and <img /> tag inside wher you create the player.

ie

<code class"html"> <a style="display:block;width:520px;height:330px" id="player"> <img src="path to your image"/> </a>
If your flowplayer config is set to autoplay false the image will be present till someone clicks on the image.

Hope that helps

hi
thanks but in the previous versions of flowplayer they had a thumbnail feature, so you could click on the thumbnail and it would bring you to that timelineplace in the video,
for example
http://www.watercompare.com/water/playvideo1.jsp?ref=4104

do you know if i can do this with the newest flowplayer?

Looks graetn not sure if they have that feature. I have searched the site for the past 4 weeks and haven't seen any feature like this. This feature would be really handy though.

Have a look at ffmpeg as they have a function to extract thumbnails.

I've made a sketchy outline on how you can implement thumbnails in this post.

rmerch mentions that the you can use an image as splash while video is loading. I have gotten this to work. But the behavior I want is to have the video autoplay as soon as it is done loading, without the user needing to click. There must be a setting for this, but I can't find it.

@mcallans
The playlist will do this for you.

http://flowplayer.org/documentation/configuration/playlists.html

clip : { 
    scaling: 'fit', 
    autoPlay: true 
}, 
 
// the first clip overrides the scaling property 
playlist: [ 
   { url: 'splash.jpg', scaling: 'orig'}, 
   'clip1.flv', 
   'clip2.mp4' 
]

I don't believe a timeline thumbnails feature is in Flowplayer 3.x.

Keep in mind that Flowplayer is based on the plugin concept. Rather than create one huge SWF with the bulk of features most people won't use, the player relies on optional plugins to extend its functionality. The plugin architecture is documented, and this type of feature could be accomplished by creating a custom control bar.

Note that clickable timeline thumbnails will need a streaming server, or at least pseudo-streaming. Otherwise, you won't be able to seek to a point in the timeline until it has been downloaded. For short videos not a problem, but then, they don't need thumbnails.

For the latter, and if you have FFmpeg take the snapshots, you will first need to make sure the file has been passed through a metadata injector that identifies keyframes and positions. You'd need to pass the keyframe positions (or a subset of them) to FFmpeg, so that your thumbnails are only on keyframes.

I have created something similar - not a nice coding, but working. Will change to pseudo-streaming soon, so it won't matter whether it's downloaded or not. I've tried with RTMP and worked there.

You can have a look here:
http://trainingportal.us/video/v.php?v=3