Unlocking Creativity: Craft Stunning Seek bar Thumbnails with FFmpeg, Infused with Captivating Titles!

Thumbnail sprites provide a brief preview of the video content, whether it be a movie, episodes, or trailer. Serving as compact representations of sprites, these thumbnails are employed as visual elements in promotional materials, offering a glimpse into the visual style and characters featured in the content.

In this article we will learn how we can create sprite thumbnails during the video encoding.

Ffmpeg command to create the preview thumbnail while encoding (from the input file like mov, mp4)

ffmpeg -i input_video.mp4 -vf "select=not(mod(n\,300)),scale=120:-1,drawtext=fontfile=/path/to/font.ttf: text='%{pts\:hms}': x=(w-text_w)/2: y=h-5: fontsize=8, tile=10x35" -frames:v 1 output_thumbnail.png 

Now you might be thinking how we can add this in your encoding workflow, this is as simple as you are cracking an egg into a bowl.

#!/bin/bash 

  

# First pass 

ffmpeg -i input_video.mp4 \ 

  -vf "scale=640:360" -c:a aac -b:a 64k -c:v h264 -b:v 500k -maxrate 1000k -bufsize 1000k -profile:v main -sc_threshold 0 -g 48 -keyint_min 48 -pass 1 -f null /dev/null \ 

  -vf "scale=960:540" -c:a aac -b:a 64k -c:v h264 -b:v 800k -maxrate 1600k -bufsize 1600k -profile:v main -sc_threshold 0 -g 48 -keyint_min 48 -pass 1 -f null /dev/null \ 

  -vf "scale=1280:720" -c:a aac -b:a 64k -c:v h264 -b:v 1500k -maxrate 3000k -bufsize 3000k -profile:v main -sc_threshold 0 -g 48 -keyint_min 48 -pass 1 -f null /dev/null \ 

  -vf "scale=1920:1080" -c:a aac -b:a 64k -c:v h264 -b:v 3000k -maxrate 6000k -bufsize 6000k -profile:v main -sc_threshold 0 -g 48 -keyint_min 48 -pass 1 -f null /dev/null 

  

# Second pass 

ffmpeg -i input_video.mp4 \ 

  -vf "scale=640:360" -c:a aac -b:a 64k -c:v h264 -b:v 500k -maxrate 1000k -bufsize 1000k -profile:v main -sc_threshold 0 -g 48 -keyint_min 48 -pass 2 -hls_time 6 -hls_playlist_type vod -hls_segment_filename 360p_%03d.ts 360p.m3u8 \ 

  -vf "scale=960:540" -c:a aac -b:a 64k -c:v h264 -b:v 800k -maxrate 1600k -bufsize 1600k -profile:v main -sc_threshold 0 -g 48 -keyint_min 48 -pass 2 -hls_time 6 -hls_playlist_type vod -hls_segment_filename 540p_%03d.ts 540p.m3u8 \ 

  -vf "scale=1280:720" -c:a aac -b:a 64k -c:v h264 -b:v 1500k -maxrate 3000k -bufsize 3000k -profile:v main -sc_threshold 0 -g 48 -keyint_min 48 -pass 2 -hls_time 6 -hls_playlist_type vod -hls_segment_filename 720p_%03d.ts 720p.m3u8 \ 

  -vf "scale=1920:1080" -c:a aac -b:a 64k -c:v h264 -b:v 3000k -maxrate 6000k -bufsize 6000k -profile:v main -sc_threshold 0 -g 48 -keyint_min 48 -pass 2 -hls_time 6 -hls_playlist_type vod -hls_segment_filename 1080p_%03d.ts 1080p.m3u8 

  

# Create the master playlist manually 

echo "#EXTM3U" > master.m3u8 

echo "#EXT-X-VERSION:3" >> master.m3u8 

echo "#EXT-X-STREAM-INF:BANDWIDTH=500000,RESOLUTION=640x360" >> master.m3u8 

echo "360p.m3u8" >> master.m3u8 

echo "#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=960x540" >> master.m3u8 

echo "540p.m3u8" >> master.m3u8 

echo "#EXT-X-STREAM-INF:BANDWIDTH=1500000,RESOLUTION=1280x720" >> master.m3u8 

echo "720p.m3u8" >> master.m3u8 

echo "#EXT-X-STREAM-INF:BANDWIDTH=3000000,RESOLUTION=1920x1080" >> master.m3u8 

echo "1080p.m3u8" >> master.m3u8 

  

# Create the sprite thumbnails 

ffmpeg -i input_video.mp4 -vf "select=not(mod(n\,300)),scale=120:-1,drawtext=fontfile=/path/to/font.ttf: text='%{pts\:hms}': x=(w-text_w)/2: y=h-5: fontsize=8, tile=10x35" -frames:v 1 output_thumbnail.png 

This feature proves valuable for upcoming content awaiting encoding, enabling the generation of seek bar thumbnails during the encoding process. However, there may be instances where you need to generate seek bar thumbnails from an already encoded video that is live on your platform. In such cases, the thumbnails must be created directly from the output file. In this context, I am utilizing an already generated m3u8 file from a previous HLS encoding.

Ffmpeg command to create preview thumbnail from m3u8 file:

ffmpeg -i master.m3u8 -vf "select='gte(t,1)',thumbnail,scale=320:-1,drawtext=fontfile=/path/to/font.ttf: text='%{pts\:hms}':box=1:boxcolor=black@0.5:boxborderw=5:fontsize=20:x=(w-tw)/2:y=h-th-10,tile=10x35" -frames:v 1 -vsync vfr -q:v 2 output.png