After using VideoJS for 3 or 4 years, one day it occurred to me that the standard VideoJS-provided progress-bar control displays only time-VALUES, as one hovers/drags along its progress-bar (aka 'seekbar'). Yet, the more capable engineers at YouTube, have moved to the forefront: on their viewer. By default, they show small thumbnail images from the video, so that the user might more easily find some given recognizable scene.
One such discussion thread on StackOverflow recommended using a special-purpose tool called 'mtn' (rather than the 'ffmpeg' tool itself), to extract the needed images from a video file, doing so in real-time, while the user was watching. (That 'mtn' tool is is available here ). That said however, I found that particular tool to be problematic...it was often skipping extractions, and, therefore I decided to do my extractions 'offline' (ahead of time). Any relative slowness in my favorite and very robust 'ffmpeg' tool would NOT be an issue. An example ffmpeg cmd to extract a video frame every 40 seconds and create a series of PNG image files (thumbnails), looks like this:
ffmpeg -i MyMovie.mp4 -vf "fps=1/40, scale=512:288, hue=s=0" MyMovie-%04d.pngI arrived at the cmd above, after consulting a basic writeup about thumbnails, at the 'FFmpeg' website, on their 'wiki' page here.
Also, I learned about "maximum decoded pixel-size" of PNG image files
here More specifically, both the Chrome and Firefox
mobile browsers wouldn't load my initial PNG sprite-files, initially forcing me down to a thumbnail/frame size of 256x144. Later on, it occurred to me that YouTube's choice of
such a small size for thumbnails, makes them too small to see. So, I went even larger for mine...I doubled them to 512x288. To reduce the size of the then larger sprite-files, I
decided to reduce the number of captured frames, from one every 30 seconds to one every 40 seconds. Seems to work just fine for me.
[ Later, I came upon the idea of producing GRAYSCALE thumbnails rather than colored thumbnails, achieving much smaller PNG files, with no visual loss of clarity!
This is done by adding an additional filter of "hue=s=0", as shown above.
What I did was to make the presence of a thumbnail-sprite-file optional, so that my longer duration and less-popular movies wouldn't have to support thumbnails.
This was especially true for the Firefox mobile browser, which seems to have a lower-limit on the size of a sprite file that it will load, when compared to other browsers such as
Chrome and Opera.
(Additionally, since that article indicates that JPEG images of larger dimensions than for PNG images are possible, I tried creating .JPG rather than .PNG sprite-files, but I discovered
that the 'image-magick' tool seems to have some sort of restriction handling JPG files...I couldn't get it to even CREATE a .JPG-based sprite-file.)