当前位置：首页 > JavaScript

js实现视频切片

2026-03-01 13:51:03JavaScript

视频切片的基本原理

视频切片通常指将一段视频分割成多个小片段，常用于视频编辑、流媒体传输等场景。在JavaScript中可以通过操作视频元素或使用Web API实现。

js实现视频切片

使用MediaRecorder API切片

MediaRecorder API允许直接录制媒体流，适合实时切片：

js实现视频切片

// 获取视频流（示例为摄像头，可替换为视频元素）
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    const chunks = [];

    mediaRecorder.ondataavailable = e => chunks.push(e.data);
    mediaRecorder.onstop = () => {
      const blob = new Blob(chunks, { type: 'video/webm' });
      // 处理切片后的blob对象
    };

    // 每5秒生成一个切片
    setInterval(() => {
      mediaRecorder.requestData();
    }, 5000);

    mediaRecorder.start();
  });

基于Canvas的帧提取

对于已加载的视频元素，可通过Canvas提取特定帧：

const video = document.getElementById('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

function captureFrame(time) {
  video.currentTime = time;
  video.onseeked = () => {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const frameData = canvas.toDataURL('image/jpeg');
    // 处理帧数据
  };
}

FFmpeg.js处理方案

对于复杂切片需求，可使用WebAssembly版的FFmpeg：

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

async function cutVideo(inputFile, start, duration) {
  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'input.mp4', inputFile);

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

  return ffmpeg.FS('readFile', 'output.mp4');
}