Hey there! The feature you're looking for is commonly called Video Thumbnail Sprites (sometimes referred to as Timecode Thumbnails or Preview Thumbnail Sprites). It's exactly what YouTube uses to show those small preview frames when you hover over the progress bar or scrub through a video.

How It Works (Core Concept) #

This feature relies on pre-processing the video and front-end interaction:

• Pre-generate frames: Capture small, scaled-down frames from the video at fixed time intervals (e.g., every 2 seconds).
• Create a sprite sheet: Combine all these tiny frames into a single large image (a "sprite sheet") to reduce HTTP requests.
• Map time to sprite position: Generate a data file (JSON/CSV) that links each video timestamp to its corresponding frame's position (x/y coordinates, width/height) in the sprite sheet.
• Front-end interaction: When the user hovers over the progress bar, calculate the corresponding video time, fetch the matching frame's position from the data file, and display just that portion of the sprite sheet as a preview.

Step-by-Step Implementation #

1. Backend: Generate Sprite Sheet & Time Mapping Data #

We'll use FFmpeg (a popular video processing tool) and ImageMagick (for image stitching) as examples:

• Extract individual frames from the video:

  # Extract 1 frame every 2 seconds, scale to 160px width (maintain aspect ratio)
  ffmpeg -i your-video.mp4 -vf "fps=0.5,scale=160:-1" frames/%04d.jpg
  

• Stitch frames into a sprite sheet:

  # Arrange frames into 10 columns, no spacing between frames
  montage frames/*.jpg -tile 10x -geometry +0+0 video-sprite.jpg
  

• Generate time mapping data:
  You can write a simple script (Python/Node.js) to create a JSON file like this:

  [
    {"time": 0, "x": 0, "y": 0},
    {"time": 2, "x": 160, "y": 0},
    {"time": 4, "x": 320, "y": 0},
    // ... continue for all frames
  ]
  

  Each entry links a timestamp (in seconds) to the frame's top-left coordinates in the sprite sheet.

2. Frontend: Add Hover Preview Interaction #

Here's a minimal working example:

HTML

<div class="video-player">
  <video id="targetVideo" src="your-video.mp4" controls></video>
  <div class="progress-container">
    <div class="progress-bar"></div>
    <div class="preview-thumbnail"></div>
  </div>
</div>

CSS

.progress-container {
  position: relative;
  height: 6px;
  background: #ddd;
  margin-top: 8px;
  cursor: pointer;
}
.progress-bar {
  height: 100%;
  background: #ff0000;
  width: 0%;
}
.preview-thumbnail {
  position: absolute;
  bottom: 30px;
  width: 160px;
  height: 90px; /* Matches 16:9 aspect ratio of 160px width */
  background-image: url('video-sprite.jpg');
  background-size: auto 100%;
  display: none;
  border: 1px solid #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

JavaScript

const video = document.getElementById('targetVideo');
const progressContainer = document.querySelector('.progress-container');
const previewThumb = document.querySelector('.preview-thumbnail');

// Load the pre-generated time mapping data
const thumbnailData = [
  {"time": 0, "x": 0, "y": 0},
  {"time": 2, "x": 160, "y": 0},
  {"time": 4, "x": 320, "y": 0},
  // ... add all your frame data here
];

progressContainer.addEventListener('mousemove', (e) => {
  const containerRect = progressContainer.getBoundingClientRect();
  const hoverPercent = (e.clientX - containerRect.left) / containerRect.width;
  const hoverTime = hoverPercent * video.duration;

  // Find the closest frame to the hover time
  const closestFrame = thumbnailData.reduce((prev, curr) => {
    return Math.abs(curr.time - hoverTime) < Math.abs(prev.time - hoverTime) ? curr : prev;
  });

  // Position and show the preview
  previewThumb.style.backgroundPosition = `-${closestFrame.x}px -${closestFrame.y}px`;
  previewThumb.style.left = `${e.clientX - containerRect.left - previewThumb.offsetWidth/2}px`;
  previewThumb.style.display = 'block';
});

progressContainer.addEventListener('mouseleave', () => {
  previewThumb.style.display = 'none';
});

内容的提问来源于stack exchange，提问作者user9235753