使用React.js或Node.js实现长视频指定时间片段播放的方案咨询

核心结论 #

纯React.js前端实现是当前场景的最优解，Node.js+FFmpeg预裁剪方案完全属于过度设计，没有必要使用

你当前的需求完全可以靠HTML5原生video标签的能力实现，全程不需要服务端参与，也没有任何裁剪等待耗时，实现成本极低：

• 页面内置HTML5 <video> 标签，视频源直接指向你那部2小时的原始视频资源，可默认隐藏不展示，用户点击启动后再显示
• 给两个输入框加简单的正则校验，确保输入格式符合HH:mm:ss.SSS规范，再写个时间转换工具函数，把时间戳转换为总秒数，比如00:20:21.330 换算为 20*60 + 21.33 = 1221.33 秒即可
• 点击启动按钮后执行三个操作：
  1. 给video元素的currentTime属性直接赋值为起始时间对应的总秒数，视频会自动跳到对应位置
  2. 调用video的play()方法启动播放
  3. 给video绑定timeupdate事件监听，每次播放进度更新时判断当前播放时间是否大于等于结束时间对应的总秒数，触发条件后直接调用pause()停止播放即可

特殊场景兼容 #

如果你的视频资源存在跨域限制、或者不允许直接对外暴露原始地址，再考虑用Node.js做服务端适配，即便如此也不需要预裁剪存储文件：

• 写个流式接口，接收前端传来的起止时间参数，调用FFmpeg直接读取原始视频的指定片段，把转码流实时推送给前端边传边播，全程不需要本地存储裁剪后的文件，等待时间只有FFmpeg初始定位的毫秒级耗时，基本可以做到秒开

注意点 #

• 确认你的视频存储服务支持HTTP Range请求，目前主流的静态资源服务器默认都支持该特性，开启后前端设置currentTime时不需要加载整个2小时的视频，只会拉取对应时间点附近的分片，加载速度非常快
• 可以给输入框加基础容错逻辑，比如结束时间小于起始时间、时间超过原视频总时长时，给用户抛出明确的错误提示即可

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