VideoJS如何实现进度条滑动时显示缩略图的功能？

Hey there! You’re totally right—Video.js doesn’t come with that handy hover preview feature (thumbnail + timestamp) out of the box, unlike YouTube’s player or Xfinity’s fast-forward thumbnail previews. But no worries, there are reliable ways to add this exact functionality to your Video.js setup.

Option 1: Use a Community-Maintained Plugin #

The easiest route is leveraging a pre-built plugin designed for this. A popular choice is videojs-thumbnails—you just need to prep your video's thumbnail assets first:

• Step 1: Generate a thumbnail sprite sheet
  Create a single grid image of your video's preview thumbnails (plus a mapping of time ranges to each thumbnail's position). You can use ffmpeg for this:

  ffmpeg -i your-video-file.mp4 -vf "fps=1,scale=160:90,tile=10x10" -q:v 2 video-thumb-sprite.jpg
  

  This generates a sprite with 1 thumbnail per second, scaled to 160x90, arranged in a 10x10 grid.

• Step 2: Set up the plugin
  Install it via npm or include the script directly in your project:

  npm install videojs-thumbnails
  

  Then initialize it with your sprite data:

  const player = videojs('your-video-element-id');
  player.thumbnails({
    src: 'video-thumb-sprite.jpg',
    responsive: true,
    thumbs: [
      { time: 0, x: 0, y: 0 },
      { time: 10, x: 160, y: 0 },
      { time: 20, x: 320, y: 0 },
      // Add entries for every thumbnail's timestamp and position in the sprite
    ]
  });
  

  You can tweak the CSS to overlay the timestamp directly on the thumbnail, matching YouTube's style.

Option 2: Build a Custom Implementation #

If you want full control over the look and behavior (to mirror YouTube exactly), you can build it from scratch:

• 1. Prep your thumbnails: Either use a sprite sheet (like above) or generate individual thumbnail images for regular time intervals (e.g., every 5 seconds).
• 2. Track hover on the progress bar: Listen for mousemove events on Video.js's progress bar to calculate the hovered timestamp:

  const player = videojs('your-video-element-id');
  const progressBar = player.controlBar.progressControl.progressBar;
  
  progressBar.on('mousemove', (e) => {
    const barRect = progressBar.el().getBoundingClientRect();
    const mousePosX = e.pageX - barRect.left;
    const progressPercent = mousePosX / barRect.width;
    const hoverTime = progressPercent * player.duration();
    
    // Format the timestamp (e.g., 00:01:23)
    const formattedTime = player.formatTime(hoverTime);
    // Fetch the matching thumbnail and update your preview element
  });
  

• 3. Add a floating preview element: Create a styled div that shows the thumbnail and timestamp, positioning it near the mouse cursor as the user slides over the progress bar. Use CSS to add shadows, rounded corners, and a semi-transparent timestamp overlay just like YouTube.

Quick Notes #

• Sprite sheets are better for performance than loading individual thumbnail images—they reduce HTTP requests.
• You can adjust the thumbnail interval (e.g., every 3 seconds instead of 1) based on how granular you want the previews to be.
• This setup focuses on the hover interaction you preferred, rather than Xfinity's fast-forward triggered previews.

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