====== Timeline Preview for Videos =======

===== Requirement =====

Users should be able to look ahead the video by mouse hovering on the video player control bar.

{{:timeslidertooltip-preview.jpg|}}

===== Implementation =====

As we are using jwplayer to play videos we can use a plugin available to achieve this. 

http://blog.loadvars.com/time-slider-tooltip-plugin/

We should be generating the video thumbnails from the video sing tools like ffmpeg.

==== Contact Sheet ====

If we use individual thumbnails and show them one by one we need to make more number of HTTP requests to bring the images and it slows down loading of the images and effects the user experience. So, to achieve a better user experience we can use sprites of images (i.e video contact sheets.).

There are tools to generate the contact sheets from videos. Some examples -

1. http://p.outlyer.net/vcs/

2. http://blog.loadvars.com/contact-sheet-generator/


We need to decide a contact sheet generator which suits our purpose and fix the time-slider-tooltip jwplayer plugin based on that if required.

=== Contact Sheet Generation ====

The contact sheet generators( above mentioned & others) are restrictive and we cannot use them for our purpose. So, it is better to create this from ffmpeg and imageback by ourselves. The below is the pseudo code for the contact sheet generation. We can take the screen shots of video every 5 seconds and generate a contact sheets each of which contains 25 images (5x5)

<code>
#Generate thumbnails every 5 seconds
ffmpeg -i video.mp4 -f image2 -r 1/5 thumb%04d.jpg

#prepare 5x5 contact sheet with image magics montage.
for_every_25_images do
#i - iterator

montage thumb*.jpg  -background white -geometry +1+1 -tile 5x5 video#{i}.jpg
end

# Remove the thumbs that are not needed.

</code>

===== Limitations =====

1)  We cannot show the preview images for you tube (and vimeo) videos. You tube has this feature in built. (http://www.reelseo.com/youtube-introduces-look-ahead-feature/) but it does not expose an API where jwplayer can grab the timeline thumbnails. It is difficult to construct/guess the URLs of the thumbs.

**Fix** - We might need to download the youtube video using tools like Youtube-dl (http://rg3.github.com/youtube-dl/) and generate thumbnails from them for crossbow server.

2) The timeslider-tooltip plugin works with our JWPlayer 5 but not with jwplayer 6. So, when we migrate to jwplayer 6 we need to change it's source code to fix this. 

(Source code - https://github.com/francoismassart/JWPlayer-TimeSlider-Tooltip-Plugin)