如何分片加载音视频轨道并维持播放同步？

要解决一次性加载完整文件的问题，核心是基于HTTP Range请求实现分片加载，同时通过时间戳对齐分片保证音视频同步，结合MSE的SourceBuffer动态管理片段。以下是具体实现步骤和代码修改：

一、核心改造点 #

• 分片请求逻辑：用HTTP Range头按需请求音视频片段，避免一次性加载全量数据
• 播放进度监听：监听视频timeupdate事件，提前加载后续分片（预加载1-2个分片保证流畅）
• 音视频分片对齐：确保同时间段的音视频分片时间戳完全匹配（比如0-10s的视频分片对应同时间范围的音频分片）
• 音轨切换优化：切换时仅移除当前已加载的音频片段，从当前播放位置开始加载目标语言的对应分片，而非全量替换

二、具体代码实现 #

1. 基础配置与工具函数改造 #

const mimeVideoCodec = 'video/webm; codecs="vp9"';
const mimeAudioCodec = 'audio/webm; codecs=opus';
const CHUNK_DURATION = 10; // 每个分片时长（秒）
const PRELOAD_OFFSET = 20; // 预加载提前量（当前播放位置+20秒内的分片）

// 分片请求函数：按序号请求预分片文件（假设分片命名规则为 前缀_0.webm、前缀_1.webm...）
const getChunkBuffer = async (baseUrl: string, chunkIndex: number) => {
  const chunkUrl = `${baseUrl}_${chunkIndex}.webm`;
  const response = await fetch(chunkUrl);
  if (!response.ok) throw new Error(`Failed to load chunk ${chunkIndex}`);
  return response.arrayBuffer();
};

// 获取媒体总时长（若预先知道时长可直接硬编码）
const getMediaDuration = async (sampleChunkUrl: string) => {
  const video = document.createElement('video');
  await new Promise(resolve => video.addEventListener('loadedmetadata', resolve));
  video.src = sampleChunkUrl;
  return video.duration;
};

const waitForEvent = async (target: MediaSource | SourceBuffer, event: string) => {
  return new Promise((res) => {
    target.addEventListener(event, res, { once: true });
  });
};

2. 主逻辑改造：分片加载+动态管理 #

interface UseVideoStreaming {
  videoElement: HTMLVideoElement | null;
  checkboxElement: HTMLInputElement | null;
  videoBaseUrl: string; // 视频分片的基础URL（不含_0.webm后缀）
  originalAudioBaseUrl: string; // 原语言音频分片基础URL
  translatedAudioBaseUrl: string; // 翻译后音频分片基础URL
}

export const useVideoStreaming = ({ 
  videoBaseUrl, 
  videoElement, 
  checkboxElement,
  originalAudioBaseUrl,
  translatedAudioBaseUrl
}: UseVideoStreaming) => {
  let mediaSource: MediaSource | null = null;
  let videoBuffer: SourceBuffer | null = null;
  let audioBuffer: SourceBuffer | null = null;
  let totalDuration = 0;
  let currentVideoChunkIndex = 0;
  let currentAudioChunkIndex = 0;
  let isLoading = false;

  // 加载指定分片到对应SourceBuffer
  const loadChunk = async (buffer: SourceBuffer, baseUrl: string, chunkIndex: number) => {
    if (buffer.updating) await waitForEvent(buffer, 'updateend');
    const chunk = await getChunkBuffer(baseUrl, chunkIndex);
    buffer.appendBuffer(chunk);
    await waitForEvent(buffer, 'updateend');
  };

  // 按需加载后续分片
  const loadNextChunks = async () => {
    if (!videoElement || isLoading || !videoBuffer || !audioBuffer) return;
    isLoading = true;

    const currentTime = videoElement.currentTime;
    const targetChunkIndex = Math.floor(currentTime / CHUNK_DURATION);
    const maxNeededChunk = Math.floor((currentTime + PRELOAD_OFFSET) / CHUNK_DURATION);
    const totalChunks = Math.ceil(totalDuration / CHUNK_DURATION);

    // 加载视频分片
    for (let i = currentVideoChunkIndex; i <= maxNeededChunk && i < totalChunks; i++) {
      await loadChunk(videoBuffer, videoBaseUrl, i);
      currentVideoChunkIndex = i + 1;
    }

    // 加载当前语言的音频分片
    const audioBaseUrl = checkboxElement?.checked ? translatedAudioBaseUrl : originalAudioBaseUrl;
    for (let i = currentAudioChunkIndex; i <= maxNeededChunk && i < totalChunks; i++) {
      await loadChunk(audioBuffer, audioBaseUrl, i);
      currentAudioChunkIndex = i + 1;
    }

    isLoading = false;
  };

  // 切换音轨逻辑
  const switchAudioTrack = async () => {
    if (!audioBuffer || !mediaSource || !videoElement) return;
    if (audioBuffer.updating) await waitForEvent(audioBuffer, 'updateend');

    // 移除当前所有音频片段
    audioBuffer.remove(0, mediaSource.duration);
    await waitForEvent(audioBuffer, 'updateend');

    // 从当前播放位置的分片开始加载新音频
    currentAudioChunkIndex = Math.floor(videoElement.currentTime / CHUNK_DURATION);
    await loadNextChunks();
  };

  const initStreaming = useCallback(async () => {
    if (!videoElement || !checkboxElement) return;

    // 获取媒体总时长
    totalDuration = await getMediaDuration(`${videoBaseUrl}_0.webm`);

    mediaSource = new MediaSource();
    videoElement.src = URL.createObjectURL(mediaSource);
    await waitForEvent(mediaSource, 'sourceopen');

    // 创建音视频SourceBuffer
    videoBuffer = mediaSource.addSourceBuffer(mimeVideoCodec);
    audioBuffer = mediaSource.addSourceBuffer(mimeAudioCodec);

    // 加载第一个分片初始化播放
    await Promise.all([
      loadChunk(videoBuffer, videoBaseUrl, 0),
      loadChunk(audioBuffer, checkboxElement.checked ? translatedAudioBaseUrl : originalAudioBaseUrl, 0)
    ]);

    // 监听播放进度，按需加载后续分片
    videoElement.addEventListener('timeupdate', loadNextChunks);

    // 音轨切换事件
    checkboxElement.onchange = switchAudioTrack;

    // 视频结束后清理资源
    videoElement.addEventListener('ended', () => {
      mediaSource?.endOfStream();
      videoElement.removeEventListener('timeupdate', loadNextChunks);
    });
  }, [videoElement, checkboxElement, videoBaseUrl, originalAudioBaseUrl, translatedAudioBaseUrl]);

  return { initStreaming };
};

三、关键注意事项 #

• 分片预处理：需要提前将原音视频文件按固定时长（如10秒）切割成带时间戳对齐的分片，确保同序号的音视频分片时间范围完全一致
• 缓存策略：可以给分片请求添加缓存，避免重复加载相同分片
• 错误处理：实际生产中要添加分片加载失败的重试逻辑，以及SourceBuffer的错误监听
• Codec兼容性：确保所有分片使用相同的编码格式（如VP9+Opus），避免MSE解析错误

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