FlowPlayer has special support for long lasting video clips. The users need quick access to different parts of the clip's timeline. To tackle this FlowPlayer provides thumbnailing. With really long videos you will need streaming support in the server side also.
Here is a demo of a video coming from Flash Media Server and showing thumbnails.
There are different options how to arrange the streaming on the server side:
The first three use the RTMP protocol (Adobe's streaming protocol) for streaming. To set up FlowPlayer to use a RTMP server (Red5, FMS or Wowza) you only need to specify the connection URL and the name of the video file:
videoFile: 'coolcars.flv', streamingServerURL: 'rtmp://www.mystreamingserver.net:1935/oflaDemo'
A quick and affordable way to get going with Adobe's Flash Media Server 3 is to sign up with Influxis. FMS 3 is the top of the line commercial streaming server and Influxis makes it easy to get started with it.
Lighttpd has a "pseudo streaming" module that makes it possible to jump to any part of the video's timeline. Currently flowplayer provides partial support for it but unnecessarily makes a new request to the server every time a seek is performed. Work is under way to avoid this request when the seek target position is already loaded and buffered. lighttpd's FLV streaming is configured like so:
videoFile: 'coolplanes.flv', streamingServer: 'lighttpd'
Thumbnails provide a way to jump to different parts of a video timeline. You can specify the thumbnail files and corresponding times in the FlowPlayer configuration and the player will display the thumbnail images specified there. When the user clicks on a thumbnail the player seeks to the time associated with it. The configuration looks like this:
thumbs: [
{ thumbNail: 'Thumb1.jpg', time: 10 },
{ thumbNail: 'Thumb2.jpg', time: 24 },
{ thumbNail: 'Thumb3.jpg', time: 54 },
{ thumbNail: 'Thumb4.jpg', time: 74 },
{ thumbNail: 'Thumb5.jpg', time: 94 },
{ thumbNail: 'Thumb6.jpg', time: 110 }
],
// Location of the thumbnail files
thumbLocation: 'http://www.kolumbus.fi/apiirain/video'
The thumbLocation variable defines the URL from which the files are loaded from. It is optional and you don't need to specify it if you place the thumbnail files in the same directory as the player component (FlowPlayerLP.swf).
The thumbs array specifies the list of thumbnails. The thumbnail specification consists of the name of the thumbnail JPG file and the time corresponding to it in the video timeline. Times are given in seconds.
You can encode cue points into the FLV file. After that there is no need to specify the thumbs information in the external config file.
As the video plays the player recognizes the encoded thumbnails when the playback reaches them. The thumbnail corresponding to the cue point is highlighted.
Cue points can be tagged with Flvtool2 like this:
flvtool2 -AUtP tags.xml -thumbLocation:http://www.mytube.net/thumbs mykids.flv
The thumbLocation option gives the location of the tumbnail files in your Web server. tags.xml is a file that contains the information about cue points and the thumbnails:
<tags> <metatag event="onCuePoint" overwrite="true"> <name>Chapter 1</name> <timestamp>10000</timestamp> <parameters> <thumb>Thumb1.jpg</thumb> </parameters> <type>navigation</type> </metatag> <metatag event="onCuePoint" overwrite="true"> <name>Chapter 2</name> <timestamp>25000</timestamp> <parameters> <thumb>Thumb2.jpg</thumb> </parameters> <type>navigation</type> </metatag> </tags>
In this file the times are given in milliseconds.