h5页面可通过htmlmediaelement api和canvas纯前端提取本地视频缩略图并检测时长：一、设video.preload='metadata'监听loadedmetadata事件获取duration，nan时重试或降级；二、等待canplay后绘制首帧，缩放裁剪导出jpeg；三、截任意帧需设置currenttime并监听seeked事件；四、注意跨域、模糊、兼容性及大文件加载提示。
在 H5 页面中，无法直接读取视频文件的元数据（如时长、帧图像）而不加载或解码部分视频，但可以通过 HTMLMediaElement API 和 Canvas 配合 FileReader 实现本地视频的缩略图提取与时长检测——无需上传服务器，纯前端完成。
一、获取视频时长：利用 loadedmetadata 事件
视频文件通过 <input type="file"> 选择后，创建一个隐藏的 <video></video> 元素，将其 src 设为文件的 Object URL，监听 loadedmetadata 事件即可安全读取 duration 属性。
注意：duration 在某些格式（如未含关键帧信息的 MP4）可能返回 NaN，需加兜底逻辑：
- 设置
video.preload = 'metadata'，避免加载全部内容 - 监听
durationchange或延时setTimeout重试（最多 2–3 次） - 若仍为
NaN，可尝试用ffprobe（WebAssembly 版本如 ffmpeg.wasm）解析，但会增大包体积和初始化耗时
二、提取首帧缩略图：Canvas 绘制当前视频帧
视频元数据加载完成后，调用 video.play() 并立即 pause()，确保播放头位于起始位置（currentTime === 0），再用 canvas.getContext('2d').drawImage() 捕获首帧。
关键细节：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须等待
canplay或canplaythrough事件后再绘制，否则 canvas 可能为空白 - 建议统一缩放至目标尺寸（如 160×90），保持宽高比并居中裁剪，避免拉伸失真
- 导出为缩略图时，用
canvas.toDataURL('image/jpeg', 0.8)控制质量与体积
三、提取任意时间点缩略图（如第 1 秒）
若需非首帧（例如跳转到视频 1 秒处截图），需设置 video.currentTime = 1.0，然后监听 seeked 事件——只有该事件触发后，帧才真正就绪，方可绘制。
常见问题处理：
-
seeked不触发？检查是否设置了video.crossOrigin = 'anonymous'（尤其本地 file:// 协议下通常无需，但部分浏览器对 blob URL 有策略限制） - 截图模糊？因视频分辨率高而 canvas 尺寸小，建议先绘制全尺寸 canvas，再缩放导出；或使用
drawImage的 9 参数版本做精确裁剪
四、兼容性与性能提示
Chrome / Edge / Safari（macOS/iOS 15+）支持良好；Android WebView 需注意旧版 Chromium 内核可能不支持 loadedmetadata 稳定触发。
优化建议：
- 缩略图提取与时长检测可封装为 Promise 工具函数，避免回调嵌套
- 大视频（如 >500MB）首次加载 metadata 可能延迟数秒，UI 上应显示「分析中」状态
- 移动端慎用自动播放（
play()可能被策略拦截），改用用户手势触发后的同步操作
不复杂但容易忽略：所有操作都基于浏览器原生媒体能力，无需后端参与，但依赖视频容器格式和编码是否携带标准元数据。对于异常文件，降级显示默认图标 + 手动输入时长更稳妥。
