求类似YouTube的带预览视频Seekbar组件或GitHub链接

Hey there! I’ve got you covered with some solid options for building a YouTube-style seekbar that shows video thumbnails when you drag it—here’s what you can do:

Ready-to-Use Components #

If you don’t want to build everything from scratch, these pre-built components work out of the box:

• React: Look for components like react-youtube-seekbar—they’re designed to handle the thumbnail preview logic. You just need to pass in a sprite image (a single image containing all your video’s thumbnails) and configure details like frame width/height, and the component will automatically show the correct thumbnail as you drag the slider.
• Vue: Similar to React, vue-video-seekbar offers this functionality. It supports custom sprite setups and handles the drag-to-preview interaction seamlessly for Vue projects.
• Vanilla JS: For framework-free projects, lightweight libraries like video-seek-thumb are perfect. They have zero dependencies and let you hook up a seekbar with thumbnail previews by just initializing the library with your sprite and video details.

DIY Implementation (For Full Customization) #

If you want to build it yourself to match your exact design, here’s a step-by-step breakdown:

1. Create a Thumbnail Sprite
   First, generate individual thumbnails from your video (use this ffmpeg command: ffmpeg -i your-video.mp4 -vf fps=1 -s 160x90 thumbnails/%03d.jpg to get one frame per second). Then merge these into a single horizontal sprite image (you can use online tools or scripts for this). Note down the width of each frame, total number of frames, and the sprite’s total dimensions.

2. Build the Seekbar UI

   • Create a basic seekbar structure: a track div, a draggable slider button, and a hidden thumbnail container (positioned absolutely to follow the slider).
   • Style the thumbnail container with your sprite image as the background, set its size to match a single frame’s dimensions.

3. Add Interaction Logic

   • Listen for mousedown/touchstart on the slider to show the thumbnail container.
   • On mousemove/touchmove, calculate the current progress percentage:

     const seekbar = document.getElementById('seekbar');
     const progress = (e.clientX - seekbar.offsetLeft) / seekbar.offsetWidth;
     

   • Calculate which frame to show: const frameIndex = Math.floor(progress * totalFrames);
   • Adjust the sprite’s background position to show the correct frame:

     const thumbnailContainer = document.getElementById('thumbnail-preview');
     thumbnailContainer.style.backgroundPosition = `-${frameIndex * frameWidth}px 0`;
     

   • Listen for mouseup/touchend to hide the thumbnail container.

GitHub Implementation References #

You can find tons of open-source examples on GitHub by searching for keywords like "youtube seekbar thumbnail preview". These projects typically include:

• Full working code (HTML/CSS/JS)
• Scripts to generate thumbnail sprites automatically
• Optimizations for mobile touch events and smooth dragging

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