【HTML】视频缩略图生成器

效果：

在线地址：视频缩略图生成器

代码：页面右键

AI：cursor

以下为 AI 生成内容

视频缩略图生成器

这是一个基于 Web 技术开发的视频缩略图生成器，支持精确的时间控制和灵活的时间格式输入。

主要功能

• 文件选择：
  • 支持 .mp4 和 .flv 格式的视频文件
  • 支持拖拽上传
  • 文件选择区域视觉反馈
• 时间控制：
  • 可设置开始时间和结束时间
  • 支持秒数和时分秒两种格式（如：5.1 或 00:00:05.1）
  • 一键切换时间输入格式
  • 支持精确到 0.1 秒的时间间隔设置
• 缩略图生成：
  • 在指定时间范围内生成缩略图
  • 实时进度显示
  • 缩略图时间标签显示
  • 根据时间间隔自动调整时间显示格式（整数秒或小数秒）
• 缩略图展示：
  • 网格布局展示
  • 悬停动画效果
  • 点击放大预览
  • 支持响应式布局

技术特性

• 前端技术：
  • HTML5 视频处理
  • CSS Grid 和 Flexbox 布局
  • 现代 JavaScript ES6+
  • CSS 变量实现主题定制
• 用户体验：
  • 拖放文件上传
  • 实时输入验证
  • 进度条反馈
  • 响应式设计
• 第三方库：
  • Fancybox：用于图片预览

使用说明

1. 选择视频：
   • 点击上传区域选择视频文件
   • 或直接将视频文件拖拽到上传区域
2. 设置时间：
   • 设置开始时间：视频开始截取的时间点
   • 设置结束时间：视频结束截取的时间点
   • 设置时间间隔：两张缩略图之间的时间间隔
   • 可点击"切换格式"在秒数和时分秒格式之间切换
3. 生成缩略图：
   • 点击"生成缩略图"按钮
   • 等待进度条完成
   • 查看生成的缩略图列表
4. 查看缩略图：
   • 将鼠标悬停在缩略图上可以看到放大效果
   • 点击缩略图可以全屏预览
   • 缩略图底部显示对应的时间点

注意事项

• 支持的视频格式：.mp4 和 .flv
• 时间输入格式：
  • 秒数格式：直接输入数字（如：5.1）
  • 时分秒格式：HH:MM:SS.S（如：00:00:05.1）
• 时间间隔最小支持 0.1 秒
• 开始时间必须小于结束时间
• 建议使用现代浏览器以获得最佳体验

未来计划

• 支持更多视频格式（如 WebM、AVI 等）
• 添加缩略图尺寸调整功能
• 支持批量导出缩略图
• 添加暗色主题
• 支持自定义缩略图质量
• 添加键盘快捷键支持