I'm working on a feature for a project that aims to replicate the interactive video timeline preview functionality similar to what you see on YouTube. The idea is to display a preview thumbnail as the user hovers over different parts of the video timeline.

e.g : Thumbnail preview on hover timeline

To achieve this, I'm using FFmpeg to extract keyframes from a video and compile them into a mosaic. While I've successfully created a basic mosaic of these keyframes, I'm encountering challenges in optimizing the layout to minimize empty space and ensure all keyframes are included. My current FFmpeg command is as follows:

ffmpeg -skip_frame nokey -i input2.mp4 -vf "scale=112:63, tile=NxM" mosaic.jpg

This command often results in a mosaic with unnecessary black thumbnails (empty spaces) due to the pre-set grid size.

My specific goals are:

  • To determine the optimal number of rows and columns for the mosaic based on the total number of extracted keyframes, aiming for a YouTube-like preview where the mosaic fits the keyframes closely.
  • To adjust the FFmpeg command to create a mosaic with these optimized dimensions.
  • To calculate the coordinates of each thumbnail in the mosaic based on the mouse hover timing over the timeline, for accurate preview display.

I'm also wondering if there might be a more efficient or effective approach to achieve this functionality, beyond the method I'm currently using.

I would greatly appreciate any advice, suggestions, or insights on the best layout calculation for the thumbnails, or on any alternative methods that could be more suitable for this kind of feature.

Thank you in advance for your help!


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.