如何在React前端裁剪从服务器获取的视频（去除前2秒）？

你遇到的#t=2片段标识符无效的问题，大概率是因为服务器不支持HTTP字节范围请求，或者部分浏览器对该标识符的兼容性不佳。下面给你两种纯前端（React环境）的实现方案：

方案一：利用视频元数据加载事件直接跳转 #

通过监听视频的loadedmetadata事件，在视频元数据加载完成后，直接将播放位置设置到2秒处，这是最简便的实现方式：

import { useRef } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);

  const handleMetadataLoaded = () => {
    if (videoRef.current) {
      // 设置播放起始位置为2秒
      videoRef.current.currentTime = 2;
    }
  };

  return (
    <video
      ref={videoRef}
      src="http://193.70.82.68/video/bigbang/s08-kuraj/01.mp4"
      controls
      onLoadedMetadata={handleMetadataLoaded}
    />
  );
}

export default VideoPlayer;

补充优化（可选） #

如果需要禁止用户手动跳回开头2秒，可以额外监听timeupdate事件，强制将播放位置拉回2秒：

const handleTimeUpdate = () => {
  if (videoRef.current && videoRef.current.currentTime < 2) {
    videoRef.current.currentTime = 2;
  }
};

// 在video元素上添加事件
<video
  ...
  onTimeUpdate={handleTimeUpdate}
/>

方案二：MediaSource API进阶裁剪（彻底隐藏开头内容） #

如果需要完全不让用户看到开头2秒的帧，可以用MediaSource API对视频数据流进行切片处理，但实现相对复杂：

1. 通过fetch请求视频数据，解析视频元数据计算出2秒对应的字节偏移量
2. 截取从该偏移量开始的视频数据，通过MediaSource喂给video元素

这种方法需要处理视频编码、字节偏移计算等细节，一般推荐先用方案一解决问题。

注意事项 #

如果视频是跨域资源，必须确保服务器配置了正确的CORS响应头（如Access-Control-Allow-Origin），否则currentTime和MediaSource相关操作可能无法正常执行。

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