Animated Hover Thumbnail

[xiosensei 30]

It would be great if emby can advance over the typical media servers by offering an animated hover thumbnail to videos. maybe in m3u8, webm, mp4 or gif format?

There are several libraries on github that can do the task of generating the files needed for the thumbnails with a quick google search I found the following: https://github.com/grafov/m3u8 , https://github.com/tjenkinson/hls-live-thumbnails , https://github.com/video-dev/hls.js/, https://github.com/flowplayer/flowplayer-thumbnails

 

I think it is up for the user to use these libraries to generate animated thumbnail on the video. What emby should do however is give support to animated video or gif on hover. I have not seen this feature implemented at another media server. I am aware that emby has the animated backdrop support to some extent. But this different. Netflix currently uses this feature on a tvshow/movie level and not on each single episode.

 

I know the emby developers here are against animated thumbs.. Imagine browsing through your library with all thumbnails animated.. it will be distracting and messy! thats is why I think animatition on mouse over (or on selection in case of tv apps) would be the best idea to satisfy both sides.

Edited March 12, 2019 by xiosensei

[Luke 42077]

It's a nice idea, yes.

[ebr 16169]

Related: Trailer on hover

[CChris 59]

please consider this as an option in the admin menu which can be enabled or disabled by the admin.
I really love the clean look and feel without any animation

[ebr 16169]

please consider this as an option in the admin menu which can be enabled or disabled by the admin.

I really love the clean look and feel without any animation

 

We haven't committed to doing it at this point but, yes, it would have to be optional.  Personally, I can't stand that the YT UI does this now.

[xiosensei 30]

Following this thread. Hopefully more people give their support here.

[runtimesandbox 171]

+1 from me as an option, preferably a global setting which is also controllable by the user for personal preference 

[Baenwort 118]

-1 unless this defaults to off with a toggle to turn on the creation and use of these.

[denz 501]

I am not a fan but if it is an option then I am for it.

[xiosensei 30]

any progress on this yet? and thanks for the support

[Luke 42077]

Not yet, sorry.

[xiosensei 30]

Thanks for the likes and support. I hope they will get to do this sometime soon.

[chef 3810]

Pixi.js

 

As seen in this great red stapler example!!

 

https://redstapler.co/3d-photo-from-image-javascript-tutorial/

 

You'd have to create a depth map using imagemagik

 

 

 

It would only work in the web UI, but it is possible to create these images.

 

The thing is, the depth image that you have to use would have to be fairly generic, so it wouldn't look as good as the image above.

 

but very possible!

Edited May 26, 2019 by chef

[chef 3810]

I think I'm interested in creating a emby connected service which looks at poster art and attempts to apply the effect posted above.

 

I make no promises, but Im willing to try.

Edited May 26, 2019 by chef

[xiosensei 30]

upping this thread. hoping for any progress update on this

[Gilgamesh_48 1240]

I do not want to see any "movie" type of animation on hover.

 

However I would like something much simpler. I would lie to see the synopsis in a popup on hover over a movie tile. I will create a separate feature request for this as it is different.

It might be good to, at some point, give a choice as to what you see by a setting.

I find animations irritating but I really would like more info about a movie than just a title without having to click on the movie and then having to click back to go to the next movie.

[Syunic 1]

Is there any update on this feature?

[Luke 42077]

1 minute ago, Syunic said:

Is there any update on this feature?

Hi there, what exactly are you asking for? There's more than one idea mentioned in this topic. Thanks.

[Syunic 1]

Just now, Luke said:

Hi there, what exactly are you asking for? There's more than one idea mentioned in this topic. Thanks.

Oh Sorry, i mean the "hover over a video and get a small few seconds preview of that specific video".

[dongphuongsoc 5]

I have the same request "hover over a video and get a small few seconds preview of that specific video".

[dalo1987 5]

This would be a great feature... looking into this. Is there a way to manually replace thumbs with those animated thumbnails?

[Luke 42077]

8 hours ago, dalo1987 said:

This would be a great feature... looking into this. Is there a way to manually replace thumbs with those animated thumbnails?

I think fit what’s being asked here, the animation would be in the user interface and not in the image.

[dalo1987 5]

I think the steps inside Emby are as follows:
I think of a checkbox for the emby library 
x = generate preview-video thumbnail

 

Then bey updating metadata, emby will
create a 9-second video from a 20-minute (or any-length) source—consisting of three 3-second clips taken at 20 %, 50 %, and 80 % of the total duration—and then replace the Emby thumbnail with it:

• Determine the total duration of an Episode/Movie/...

  Use the ffprobe command you already have to extract the duration in seconds. For example, in Bash:

   

  # Read total duration in seconds
  duration=$(ffprobe -v error \
    -show_entries format=duration \
    -of default=noprint_wrappers=1:nokey=1 \
    "/videos/MyPreviewVideo.mp4")

 

• Calculate the start times
  From that duration, compute the three timepoints at 20 %, 50 %, and 80 %. In Bash, you could do something like (using bc):

  # 20 % = 0.2, 50 % = 0.5, 80 % = 0.8
  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)")

  This will give you three start times in seconds, for example start1=240.000, start2=600.000, start3=960.000 (if the file were exactly 1200 s long).

 

• Extract the three sub-clips
  Use ffmpeg to extract three 3-second clips from the source. Typically, you’ll output each to its own file

  # Clip 1: 3 s from start1
  ffmpeg -ss "$start1" -i "/videos/myfile.mp4" \
    -t 3 -c:v libx264 -c:a aac -strict experimental clip1.mp4
  
  # Clip 2: 3 s from start2
  ffmpeg -ss "$start2" -i "/videos/myfile.mp4" \
    -t 3 -c:v libx264 -c:a aac -strict experimental clip2.mp4
  
  # Clip 3: 3 s from start3
  ffmpeg -ss "$start3" -i "/videos/myfile.mp4" \
    -t 3 -c:v libx264 -c:a aac -strict experimental clip3.mp4

  -ss <start time> seeks to that timecode.
  -t 3 sets the duration to 3 seconds.
  -c:v libx264 -c:a aac re-encodes video and audio (you could use -c copy if your source codecs are already compatible).

• Concatenate the clips
  To join the three clips into one seamless 9-second output, create a simple text file named, for example, concat_list.txt with these lines:

  file 'clip1.mp4'
  file 'clip2.mp4'
  file 'clip3.mp4'

  Then run ffmpeg’s concat demuxer:

  ffmpeg -f concat -safe 0 -i concat_list.txt -c copy output_9s.mp4

  The result is output_9s.mp4, which is exactly 9 seconds long and contains the three 3 s segments in sequence.
   

• Alternative: Single-command approach using filter_complex
  If you’d prefer to do it all in one ffmpeg invocation (without intermediate files), use filter_complex. For example:
   

  ffmpeg -i "/video/myvideo.mp4" -filter_complex "
    [0:v]trim=start=$start1:duration=3,setpts=PTS-STARTPTS[v0];
    [0:a]atrim=start=$start1:duration=3,asetpts=PTS-STARTPTS[a0];
    [0:v]trim=start=$start2:duration=3,setpts=PTS-STARTPTS[v1];
    [0:a]atrim=start=$start2:duration=3,asetpts=PTS-STARTPTS[a1];
    [0:v]trim=start=$start3:duration=3,setpts=PTS-STARTPTS[v2];
    [0:a]atrim=start=$start3:duration=3,asetpts=PTS-STARTPTS[a2];
    [v0][a0][v1][a1][v2][a2]concat=n=3:v=1:a=1[outv][outa]
  " -map "[outv]" -map "[outa]" -c:v libx264 -c:a aac output_9s.mp4

  Each trim/atrim cuts a 3 s segment starting at the given time.
  setpts=PTS-STARTPTS and asetpts=PTS-STARTPTS normalize each segment’s timestamps.
  Finally, concat=n=3:v=1:a=1 stitches them in order: v0/a0 → v1/a1 → v2/a2.
  
   

• Replacing the Emby thumbnail with the video 

 

I guess thats it  

Edited June 4, 2025 by dalo1987

[dalo1987 5]

Result:

 

 

 

Edited June 4, 2025 by dalo1987

[dalo1987 5]

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.