HTML视频标签如何实现视频片段裁剪与下载功能

HTML <video> 标签本身不支持裁剪，但可通过 Canvas、MediaRecorder 和 JavaScript 实现播放中选段裁剪与下载：先用 currentTime 定位起止时间，再用 Canvas 逐帧绘制并由 MediaRecorder 编码为新视频，最后导出 Blob 触发下载；需注意跨域、Safari 兼容性及内存限制。

HTML `

定位并截取指定时间段

利用 `

1. 监听 `loadedmetadata` 获取总时长，供用户输入合法时间范围（如 10s–25s）
2. 用 `video.currentTime = startTime` 跳转到起点，触发 `seeked` 后开始捕获
3. 到达 `endTime` 时调用 `mediaRecorder.stop()` 结束录制

用 Canvas + MediaRecorder 实现无损帧捕获

避免转码失真，推荐基于时间戳的逐帧绘制与录制：

1. 创建隐藏 ``，尺寸匹配视频原始分辨率（`video.videoWidth` / `video.videoHeight`）
2. 使用 `requestAnimationFrame` 在播放过程中持续调用 `ctx.drawImage(video, https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c)` 绘制当前帧
3. 将 canvas 绑定到 `MediaRecorder`（目标 mimeType 如 `'video/webm;codecs=vp9'`）
4. 启动录制后，仅在 `startTime` 至 `endTime` 区间内保持 `mediaRecorder.state === 'recording'`

生成可下载的裁剪后视频文件

录制结束时导出 Blob 并触发下载：

1. 监听 `mediaRecorder.onstop`，从 `recordedChunks` 构建 `new Blob(chunks, {type: 'video/webm'})`
2. 用 `URL.createObjectURL(blob)` 创建临时链接
3. 动态创建 `` 并自动点击
4. 下载完成后调用 `URL.revokeObjectURL()` 释放内存

兼容性与注意事项

部分限制需提前规避：

1. 跨域视频需服务端设置 `Cross-Origin-Resource-Policy: cross-origin`，否则 canvas 绘制会触发污染异常
2. 移动端 Safari 对 MediaRecorder 支持有限，建议 fallback 到服务端裁剪（如提交时间参数给后端 FFmpeg 处理）
3. 长时间裁剪建议限制最大时长（如 ≤60 秒），防止内存溢出或浏览器卡顿