A simple but effective command-line tool for generating thumbnails of a video and corresponding VTT file for use within JW Player to generate the toolbar thumbnail previews.
FFmpeg is required to generate the thumbnails.
Typical usage would look like:
php thumbnails.php -i "/input/video.mp4"
This would generate the thumbnails for the video given coalesced into one file (a sprite sheet) and the required VTT file that specifies which thumbnail to display and where in the sprite sheet it is located.
If you do not wish to generate a sprite sheet then include the -v switch to generate verbose output - ie, all the thumbnails are separate files and the VTT file points to each.
php thumbnails.php -i "/input/video.mp4" -v
It is recommended that you use the default coalesced file as this is more optimal when loading than individual images.
You can change the output directory with the -o switch:
php thumbnails.php -i "/input/video.mp4" -o "/output/directory"
This will write the images and VTT file in the provided directory (default is just to write into the same directory as the generator script).
To alter the default time between thumbnails use the -t switch with the number of seconds you'd like between each:
php thumbnails.php -i "/input/video.mp4" -t 30
That will generate one thumbnail for every 30 seconds of video.
To change the width of the thumbnail use the -w switch with the size in pixels:
php thumbnails.php -i "/input/video.mp4" -w 75
That will generate thumbnails that are 75 pixels in width. The height is automatic and proportional to the video size.
The tool also provides the ability to generate a poster file of the video from a random frame of the video at the same time it's generating the thumbnails. To do this, use the -p switch:
php thumbnails.php -i "/input/video.mp4" -p
The code you would use for JW Player would be something like:
<div id="video">video loading...</div>
<script>
jwplayer("video").setup({
playlist: [{
file: "/input/video.mp4",
image: "poster.jpg",
tracks: [{
file: "thumbnails.vtt",
kind: "thumbnails"
}]
}]
});
</script>