Animated Hover Thumbnail

[dalo1987 5]

 

Example in Emby
(first static, video on hover) 
not implemented here

Edited June 4, 2025 by dalo1987

[Neminem 1832]

That look like a great plugin

[themandalorian 2]

Is it possible to adjust the length? and turn on the sound ?

thanks

[Santiag0 10]

On 3/12/2019 at 1:13 PM, ebr said:

Related: Trailer on hover

For the longest time I thought that was what this was for but I don't know what it's for.

 

[Luke 42885]

2 minutes ago, Santiag0 said:

For the longest time I thought that was what this was for but I don't know what it's for.

 

Theme Songs & Videos

[Santiag0 10]

https://i.imgur.com/oTcpP6c.gif

It doesn't do anything on any clients on android tv or roku for me, is it suppose to do this play trailer in the background?

Edited August 24, 2025 by Santiag0

[Luke 42885]

4 minutes ago, Santiag0 said:

https://i.imgur.com/oTcpP6c.gif

It doesn't do anything on any clients on android tv or roku for me, is it suppose to do this play trailer in the background?

What version number of the Emby Android app?

[Santiag0 10]

4 minutes ago, Luke said:

What version number of the Emby Android app?

Most recent one, for android tv I have both the new one and the one with no left side bar.

[Luke 42885]

OK did you check out the guide I linked to? It plays the videos that you've designated as video backdrops.

[Santiag0 10]

1 hour ago, Luke said:

OK did you check out the guide I linked to? It plays the videos that you've designated as video backdrops.

Yes I tried it years ago and it never worked on any clients, can you show a video of what it looks like does it do this

https://i.imgur.com/oTcpP6c.gif

I would like to see a video of what it looks like please, thank you.

[Luke 42885]

4 minutes ago, Santiag0 said:

Yes I tried it years ago and it never worked on any clients, can you show a video of what it looks like does it do this

https://i.imgur.com/oTcpP6c.gif

I would like to see a video of what it looks like please, thank you.

What exactly did you do?

[Santiag0 10]

15 minutes ago, Luke said:

What exactly did you do?

That was three years ago I don't remember exactly, I will try it again tomorrow it was more than likely user error on my part maybe I used the app that never supported it. I will try on android tv and fire tv stick tomorrow if I get it going I might end up buying the plugin to download the trailers and music themes instead of downloading trailers myself would be time consuming. Thank you for all the info today Luke you really have a great community here.

Oh one more question, does it play trailer backgrounds on the home screen when browsing the (Latest Movies & Latest TV show).

[Luke 42885]

1 hour ago, Santiag0 said:

That was three years ago I don't remember exactly, I will try it again tomorrow it was more than likely user error on my part maybe I used the app that never supported it. I will try on android tv and fire tv stick tomorrow if I get it going I might end up buying the plugin to download the trailers and music themes instead of downloading trailers myself would be time consuming. Thank you for all the info today Luke you really have a great community here.

Oh one more question, does it play trailer backgrounds on the home screen when browsing the (Latest Movies & Latest TV show).

It’s when clicking onto a movie or series screen.

[Santiag0 10]

1 hour ago, Luke said:

It’s when clicking onto a movie or series screen.

Couldn't sleep so I decided to try it and it works Works on smart tv and fire tv stick this really is very cool man. Luke man you absolutely must get this running on the home page to play the background trailer in the upper right corner this would just be crazy cool man. I know there are other background videos for movies and stuff that also plays music I can't remember what they are called or where to download them right off hand but tomorrow I will find out. Great job on this man!

[Smitty018210 168]

On 6/4/2025 at 10:34 AM, dalo1987 said:

 

 

Example in Emby
(first static, video on hover) 
not implemented here

This looks amazing! Forgive how are you doing this? 

[JCarlosL7 0]

I'm joining in the anticipation for this feature!

[Luke 42885]

7 hours ago, JCarlosL7 said:

I'm joining in the anticipation for this feature!

Hi, what are you anticipating?

[brothom 224]

On 23/10/2025 at 17:45, Smitty018210 said:

This looks amazing! Forgive how are you doing this? 

Looks like this guy just replaced the path of the image thumbnail with a gif. See how when the hover leaves, the gif still plays? 

It's more of a demo than anything else I expect.

Regardless, generating random gifs from existing episodes might cause spoilers to be shown when someone hovers over the item. That in turn would mean someone would have to painstakingly creating thumbs by hand, ensuring no spoilers or weird cuts are shown. 

This is something you'd rather not want to automate. I tried this with generating "random" trailers for movies and the result is usually just a disjointed mess.

11 hours ago, JCarlosL7 said:

I'm joining in the anticipation for this feature!

If there were a website/platform that'd deliver information (gifs/trailers) for episodes that'd be nice but I'm not expecting there to be, at least not consistent.

[CuervoBernardi 0]

On 6/4/2025 at 4:17 PM, dalo1987 said:

For this result above an All in one Skript:

 

#!/usr/bin/env bash
set -euo pipefail

# Usage: ./preview.sh <input-video> [output-directory] [max-total-length]
#   $1 = input video path (required)
#   $2 = output directory   (optional; default = current directory)
#   $3 = max total preview length in seconds (optional; default = 6)

if [ $# -lt 1 ]; then
  echo "Usage: $0 <input-video> [output-directory] [max-total-length]"
  exit 1
fi

INPUT="$1"
OUTDIR="${2:-.}"
MAX_TOTAL="${3:-6}"     # default max total length = 6 seconds

# Verify input file exists
if [ ! -f "$INPUT" ]; then
  echo "Error: Input file '$INPUT' not found."
  exit 1
fi

# Create output directory if needed
mkdir -p "$OUTDIR"

# Extract filename components
FILENAME="$(basename -- "$INPUT")"   # e.g. video.mp4
NAME="${FILENAME%.*}"                # e.g. video
EXT="${FILENAME##*.}"                # e.g. mp4

# Compute per-clip length = MAX_TOTAL / 3, rounded to 3 decimals
CLIP_LEN=$(printf "%.3f" "$(echo "$MAX_TOTAL / 3" | bc -l)")

# 1) Query total duration (in seconds) via ffprobe
duration=$(ffprobe -v error \
  -show_entries format=duration \
  -of default=noprint_wrappers=1:nokey=1 \
  "$INPUT")

# 2) Calculate 20%, 50%, and 80% start times (rounded to 3 decimals)
start1=$(printf "%.3f" "$(echo "$duration * 0.2" | bc -l)")
start2=$(printf "%.3f" "$(echo "$duration * 0.5" | bc -l)")
start3=$(printf "%.3f" "$(echo "$duration * 0.8" | bc -l)")

echo "Source duration:       $duration seconds"
echo "Max total preview len: $MAX_TOTAL seconds"
echo "Each clip length:      $CLIP_LEN seconds"
echo "Start times → 20%: $start1 s, 50%: $start2 s, 80%: $start3 s"
echo

# 3) Extract three sub-clips (video-only, no audio)
CLIP1="$OUTDIR/${NAME}_clip1.mp4"
CLIP2="$OUTDIR/${NAME}_clip2.mp4"
CLIP3="$OUTDIR/${NAME}_clip3.mp4"

ffmpeg -y -ss "$start1" -i "$INPUT" -t "$CLIP_LEN" -c:v libx264 -an "$CLIP1"
ffmpeg -y -ss "$start2" -i "$INPUT" -t "$CLIP_LEN" -c:v libx264 -an "$CLIP2"
ffmpeg -y -ss "$start3" -i "$INPUT" -t "$CLIP_LEN" -c:v libx264 -an "$CLIP3"

# 4) Build concat list
CONCAT_LIST="$OUTDIR/${NAME}_concat.txt"
cat > "$CONCAT_LIST" <<EOF
file '$CLIP1'
file '$CLIP2'
file '$CLIP3'
EOF

# 5) Concatenate into an intermediate preview (video-only)
PREVIEW_RAW="$OUTDIR/${NAME}_preview_raw_${MAX_TOTAL}s.mp4"
ffmpeg -y -f concat -safe 0 -i "$CONCAT_LIST" -c copy "$PREVIEW_RAW"

# 6) Scale the concatenated preview to 396×704 px
#    (re-encode video using libx264, drop audio if any)
PREVIEW_SCALED="$OUTDIR/${NAME}_preview_${MAX_TOTAL}s_396x704.mp4"
ffmpeg -y -i "$PREVIEW_RAW" -vf "scale=396:704" -c:v libx264 -an "$PREVIEW_SCALED"

# 7) Compute thumbnail timestamp: midpoint of the combined preview
#    Combined preview duration = MAX_TOTAL → midpoint = MAX_TOTAL / 2
MIDPOINT=$(printf "%.3f" "$(echo "$MAX_TOTAL / 2" | bc -l)")

THUMB="$OUTDIR/${NAME}_thumb_396x704.jpg"
ffmpeg -y -ss "$MIDPOINT" -i "$PREVIEW_SCALED" -vframes 1 -q:v 2 "$THUMB"

echo "Done:"
echo "  • Extracted clips (video-only):               "
echo "      $CLIP1"
echo "      $CLIP2"
echo "      $CLIP3"
echo "  • Concatenated (raw) preview:                  $PREVIEW_RAW"
echo "  • Final 396×704 px video preview (video-only): $PREVIEW_SCALED"
echo "  • Thumbnail at ${MIDPOINT}s (396×704 px):      $THUMB"

Finally you can run:

./preview.sh "/path/to/video.mp4" "/path/to/output-folder" 6

Clips become 2 s each (6 s total), concatenated, scaled to 396×704 → preview_9s_396x704.mp4, thumbnail at 4.5 s.

Hello I edited the script in lines ~ 42 to 45
 

# 2) Calculate 20%, 50%, and 80% start times (rounded to 3 decimals)
start1=$(printf "%.3f" "$(echo "$duration * 0.2" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')
start2=$(printf "%.3f" "$(echo "$duration * 0.5" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')
start3=$(printf "%.3f" "$(echo "$duration * 0.8" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')

to compesate for regional errors in my zone (decimal places are ','

and I ended the script as follows:

# 6) Scale the concatenated preview to 396×704 px
#    (re-encode video using libx264, drop audio if any)
PREVIEW_SCALED="$OUTDIR/${NAME}_preview_${MAX_TOTAL}s_396x704.gif"
ffmpeg -y -i "$PREVIEW_RAW" -vf "fps, scale=704:396" -loop 0 "$PREVIEW_SCALED"

echo "Done:"
echo "  • Extracted clips (video-only):               "
echo "      $CLIP1"
echo "      $CLIP2"
echo "      $CLIP3"
echo "  • Concatenated (raw) preview:                  $PREVIEW_RAW"
echo "  • Final 396×704 px video preview (video-only): $PREVIEW_SCALED"

rm -v "${CLIP1}" "${CLIP2}" "${CLIP3}" "${CONCAT_LIST}" "${PREVIEW_RAW}"

to remove all the auxiliar files created and produce a gif instead of an mp4

I place the gif in the movie folder as :
movie_name-default.gif or movie_name-thumb.gif.

But I do not get the animated thumbnail to work. Only the first frame for the gif.

I do not understand from this thread if the video shown of the animated thumbnail working is a suggestion of how it would eventually work or if someone has made it happen.

My emby is in a nas Server that I acces from the web on chrome
 

[Luke 42885]

3 hours ago, CuervoBernardi said:

Hello I edited the script in lines ~ 42 to 45
 

# 2) Calculate 20%, 50%, and 80% start times (rounded to 3 decimals)
start1=$(printf "%.3f" "$(echo "$duration * 0.2" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')
start2=$(printf "%.3f" "$(echo "$duration * 0.5" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')
start3=$(printf "%.3f" "$(echo "$duration * 0.8" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')

to compesate for regional errors in my zone (decimal places are ','

and I ended the script as follows:

# 6) Scale the concatenated preview to 396×704 px
#    (re-encode video using libx264, drop audio if any)
PREVIEW_SCALED="$OUTDIR/${NAME}_preview_${MAX_TOTAL}s_396x704.gif"
ffmpeg -y -i "$PREVIEW_RAW" -vf "fps, scale=704:396" -loop 0 "$PREVIEW_SCALED"

echo "Done:"
echo "  • Extracted clips (video-only):               "
echo "      $CLIP1"
echo "      $CLIP2"
echo "      $CLIP3"
echo "  • Concatenated (raw) preview:                  $PREVIEW_RAW"
echo "  • Final 396×704 px video preview (video-only): $PREVIEW_SCALED"

rm -v "${CLIP1}" "${CLIP2}" "${CLIP3}" "${CONCAT_LIST}" "${PREVIEW_RAW}"

to remove all the auxiliar files created and produce a gif instead of an mp4

I place the gif in the movie folder as :
movie_name-default.gif or movie_name-thumb.gif.

But I do not get the animated thumbnail to work. Only the first frame for the gif.

I do not understand from this thread if the video shown of the animated thumbnail working is a suggestion of how it would eventually work or if someone has made it happen.

My emby is in a nas Server that I acces from the web on chrome
 

HI, it doesn't animate where exactly?

[CuervoBernardi 0]

17 hours ago, Luke said:

HI, it doesn't animate where exactly?

Hi, here's a better detail on two different plateforms:

Chrome Navigator
When I access the emby application on my computer using the chrome navigator. I go to the folder, or the films & movies, Indicate the menu to show thumnails of elements in the folder. Then I hover over the film with that has the movie_name-thumb.gif file in the folder but the thumbnail shown is just the first frame of the gif, no animation. 

Interestingly. If I left-click the movie, and then go to edit images, left-click on the thumb image, the  menu displaed shows the image and it is animated. Showing that it is "technically" feasible to make it happen on the main menu.
 

Android App

It works!!!

Just accessing the folder, and displaying thumbs and the gif is automatically animated. 

This could be annoying if many files are there since all gif woild be running. One might have to be sure to have a gif as thumb and a jpg as default to be able to chose to display the animated and static images at will going through the menus.

 

 

[CuervoBernardi 0]

Last Update, it's working in chrome. I am not sure if it's something I did or just an amazingly fast response from developers. 

I'd be excellent if the animation only happended when hovering over the thumbnail. But this is already very good.

I share bellow how to swiftly generate the gifs,  using the script preview.sh in a folder with season subfolders but I recommend testing it on an isolated folder to avoid loosing data on unexpected behaviour (like the removal I included of previous thumb files or posters, that could explain why I couldn't make it to work before)
 

# Create -thumb.gif and -default.jpg images for all videos in subfolders
for extension in mp4 m4v avi mkv
do
	for file in ./*/*.$extension
	do
		base=$(basename "$file") 
		folder="$(dirname "${file}")"
		.preview.sh "$file"	"$folder"
	done
done

#remove *.-thumb.jpg and -poster.jpg files in all subfolders
rm -v ./*/*-thumb.jpg
rm -v ./*/*-poster.jpg

and here's the modified script that:

• Removes auxiliary files created
• Produces files 'video_name-thumb.gif' and 'video_name-default.jpg' in accordance with image naming documentation
• It's compatible with both regional configurations for decimals '.' vs ','
• works with output folders different from "." (there was a bug)

#!/usr/bin/env bash
set -euo pipefail

# Usage: ./preview.sh <input-video> [output-directory] [max-total-length]
#   $1 = input video path (required)
#   $2 = output directory   (optional; default = current directory)
#   $3 = max total preview length in seconds (optional; default = 6)

if [ $# -lt 1 ]; then
  echo "Usage: $0 <input-video> [output-directory] [max-total-length]"
  exit 1
fi

INPUT="$1"
OUTDIR="${2:-.}"
MAX_TOTAL="${3:-6}"     # default max total length = 6 seconds

# Verify input file exists
if [ ! -f "$INPUT" ]; then
  echo "Error: Input file '$INPUT' not found."
  exit 1
fi

# Create output directory if needed
mkdir -p "$OUTDIR"

# Extract filename components
FILENAME="$(basename -- "$INPUT")"   # e.g. video.mp4
NAME="${FILENAME%.*}"                # e.g. video
EXT="${FILENAME##*.}"                # e.g. mp4

# Compute per-clip length = MAX_TOTAL / 3, rounded to 3 decimals

CLIP_LEN=$(printf "%.3f" "$(echo "$MAX_TOTAL / 3" | bc -l | sed -E 's/\./\,/')" | sed -E 's/\,/\./')

# 1) Query total duration (in seconds) via ffprobe
duration=$(ffprobe -v error \
  -show_entries format=duration \
  -of default=noprint_wrappers=1:nokey=1 \
  "$INPUT")

# 2) Calculate 20%, 50%, and 80% start times (rounded to 3 decimals)
start1=$(printf "%.3f" "$(echo "$duration * 0.2" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')
start2=$(printf "%.3f" "$(echo "$duration * 0.5" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')
start3=$(printf "%.3f" "$(echo "$duration * 0.8" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')

echo "Source duration:       $duration seconds"
echo "Max total preview len: $MAX_TOTAL seconds"
echo "Each clip length:      $CLIP_LEN seconds"
echo "Start times → 20%: $start1 s, 50%: $start2 s, 80%: $start3 s"
echo

# 3) Extract three sub-clips (video-only, no audio)
CLIP1="$OUTDIR/${NAME}_clip1.mp4"
CLIP2="$OUTDIR/${NAME}_clip2.mp4"
CLIP3="$OUTDIR/${NAME}_clip3.mp4"

ffmpeg -y -ss "$start1" -i "$INPUT" -t "$CLIP_LEN" -c:v libx264 -an "$CLIP1"
ffmpeg -y -ss "$start2" -i "$INPUT" -t "$CLIP_LEN" -c:v libx264 -an "$CLIP2"
ffmpeg -y -ss "$start3" -i "$INPUT" -t "$CLIP_LEN" -c:v libx264 -an "$CLIP3"

# 4) Build concat list
CONCAT_LIST="${NAME}_concat.txt"
cat > "$CONCAT_LIST" <<EOF
file '$CLIP1'
file '$CLIP2'
file '$CLIP3'
EOF

# 5) Concatenate into an intermediate preview (video-only)
PREVIEW_RAW="$OUTDIR/${NAME}_preview_raw_${MAX_TOTAL}s.mp4"
ffmpeg -y -f concat -safe 0 -i "$CONCAT_LIST" -c copy "$PREVIEW_RAW"

# 6) Scale the concatenated preview to 396×704 px
#    (re-encode video using libx264, drop audio if any)
PREVIEW_SCALED="$OUTDIR/${NAME}-thumb.gif"
ffmpeg -y -i "$PREVIEW_RAW" -vf "fps=10, scale=320:180" -loop 0 "$PREVIEW_SCALED"

# 7) Compute thumbnail timestamp: midpoint of the combined preview
#    Combined preview duration = MAX_TOTAL → midpoint = MAX_TOTAL / 2
MIDPOINT=$(printf "%.3f" "$(echo "$MAX_TOTAL / 2" | bc -l| sed -E 's/\./\,/')" | sed -E 's/\,/\./')

THUMB="$OUTDIR/${NAME}-default.jpg"
ffmpeg -y -ss "$MIDPOINT" -i "$PREVIEW_RAW" -vframes 1 -q:v 2 "$THUMB"

echo "Done:"
echo "  • Extracted clips (video-only):               "
echo "      $CLIP1"
echo "      $CLIP2"
echo "      $CLIP3"
echo "  • Concatenated (raw) preview:                  $PREVIEW_RAW"
echo "  • Final 396×704 px video preview (video-only): $PREVIEW_SCALED"

rm -v "${CLIP1}" "${CLIP2}" "${CLIP3}" "${CONCAT_LIST}" "${PREVIEW_RAW}"

For more advanced users:

add the script to your source_path a with an alias like 'preview' so you can just keep it in one place, instead of moving it arround for every run.
In which case you'd have to replace the line 

.preview.sh "$file"    "$folder"

to 

preview "$file"    "$folder"

in the double loop for calling it.