Interactive Sandbox
Experiment with different thumbnail strip settings to see how they affect the appearance and behavior. Adjust the dimensions, thumbnail width, time ranges, and video trimming to understand how each property works.
Demonstration
Attributes
target
stringtargettargetThe ID of the video element to generate thumbnails from. Do not include the # character.
The thumbnail strip will automatically track the target video element and update thumbnails when the video's properties change.
💡 Specify the element ID without the # prefix (e.g., "my-video" to target a video with id="my-video").
thumbnailWidth
number80thumbnail-widththumbnailWidthThe desired width of individual thumbnails in pixels.
The thumbnail strip automatically calculates how many thumbnails to display based on the available width and this thumbnail width. Larger values result in fewer, more detailed thumbnails.
Height is automatically calculated to maintain the video's aspect ratio within the strip's height.
startTimeMs
numberstart-time-msstartTimeMsCustom start time in milliseconds for thumbnail generation.
When specified, overrides the natural start time of the video (including any trimming) to generate thumbnails from this absolute time in the source media.
This is useful for showing thumbnails from a specific portion of the video regardless of how it's trimmed or positioned in the timeline.
endTimeMs
numberend-time-msendTimeMsCustom end time in milliseconds for thumbnail generation.
When specified, overrides the natural end time of the video (including any trimming) to generate thumbnails up to this absolute time in the source media.
Must be used in conjunction with startTimeMs to define a custom time range.
useIntrinsicDuration
booleanfalseuse-intrinsic-durationuseIntrinsicDurationUse the full source media duration instead of the trimmed duration for thumbnail generation.
When true, thumbnails are generated from the entire source video file, ignoring any trimStart, trimEnd, sourceIn, or sourceOut properties on the target video element.
⚠️ This property is ignored if custom startTimeMs or endTimeMs values are provided.
Performance
The thumbnail strip includes several performance optimizations:
- Intelligent Caching: Thumbnails are cached globally across all strip instances
- Batch Processing: Thumbnails are generated efficiently in batches
- Responsive Layout: Automatically adjusts thumbnail count based on available width
- Aspect Ratio Preservation: Thumbnails maintain proper aspect ratios without distortion