当前位置：首页 > JavaScript

js实现视频切片

2026-01-30 22:46:59JavaScript

使用 MediaSource API 实现视频切片

通过 MediaSource API 可以将视频切分为多个片段并动态加载。核心流程包括创建 MediaSource 对象、监听 sourceopen 事件、添加 SourceBuffer 并分段追加视频数据。

const video = document.getElementById('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

  // 获取并追加第一段视频
  fetchVideoSegment(0).then(data => {
    sourceBuffer.appendBuffer(data);
  });

  // 监听更新结束事件追加后续片段
  sourceBuffer.addEventListener('updateend', () => {
    if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
      fetchVideoSegment(1).then(data => {
        sourceBuffer.appendBuffer(data);
      });
    }
  });
});

async function fetchVideoSegment(index) {
  const response = await fetch(`/video/segment${index}.mp4`);
  return response.arrayBuffer();
}

使用 Range 请求实现分片加载

通过 HTTP Range 头部可以请求视频的特定字节范围，结合 HTML5 Video 标签实现分片播放。

const video = document.getElementById('video');
const segmentSize = 1024 * 1024; // 1MB 分片

video.addEventListener('timeupdate', async () => {
  const currentTime = video.currentTime;
  const segmentIndex = Math.floor(currentTime / 5); // 每5秒一个分片

  if (!video.buffered.length || currentTime > video.buffered.end(0) * 0.7) {
    const startByte = segmentIndex * segmentSize;
    const endByte = startByte + segmentSize - 1;

    const response = await fetch('/video.mp4', {
      headers: { 'Range': `bytes=${startByte}-${endByte}` }
    });

    const blob = await response.blob();
    video.src = URL.createObjectURL(blob);
  }
});

使用 FFmpeg.js 进行前端切片

通过 FFmpeg.js 可以在浏览器中实现视频切片处理，需要先加载 FFmpeg 实例。

const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });

async function sliceVideo(inputFile, startTime, duration) {
  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(inputFile));

  await ffmpeg.run(
    '-i', 'input.mp4',
    '-ss', startTime,
    '-t', duration,
    '-c', 'copy',
    'output.mp4'
  );

  const data = ffmpeg.FS('readFile', 'output.mp4');
  return new Blob([data.buffer], { type: 'video/mp4' });
}

// 调用示例
sliceVideo('input.mp4', '00:00:10', '5').then(blob => {
  const url = URL.createObjectURL(blob);
  document.getElementById('video').src = url;
});