如何按特定时间段分段加载BLOB视频（仿YouTube/Netflix）

The issue with your current code is that the #t=0,10 fragment identifier is only interpreted by the browser's video player, not the server. When you send an HTTP request to test.mp4#t=0,10, the server ignores the fragment entirely and sends the full video file—this is why you’re not seeing the segmented loading behavior you want.

To achieve chunked, on-demand video loading like YouTube or Netflix, you’ll need to combine HTTP Range Requests with the Media Source Extensions (MSE) API. Here’s a breakdown of how to make this work:

Key Concepts to Understand #

1. HTTP Range Requests: This lets you ask the server for a specific byte range of the video file (e.g., bytes 0-500000) instead of the entire file. Your server must support this feature (check for Accept-Ranges: bytes in the response headers).
2. Media Source Extensions (MSE): An API that allows you to dynamically feed media chunks into a video element, building the stream incrementally as chunks load.

Step-by-Step Implementation #

1. Prepare Your Video File #

For the smoothest streaming experience, use a fragmented MP4 (fMP4). Unlike regular MP4s, fragmented files split the video into small, streamable chunks with metadata at the start. If you’re using a standard MP4, you’ll need to ensure the first chunk includes the moov atom (video metadata) so the browser can play it immediately.

2. Working Code Example #

Here’s a practical implementation that loads 10-second video segments sequentially:

const videoElement = document.querySelector("video");
const videoUrl = "test.mp4";
const segmentLength = 10; // Load 10-second segments
let currentSegment = 0;
let mediaSource;
let sourceBuffer;

// Initialize Media Source setup
function initMediaStream() {
  mediaSource = new MediaSource();
  videoElement.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener("sourceopen", async () => {
    // Adjust this mime codec string to match your video's actual codecs
    const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

    if (!MediaSource.isTypeSupported(mimeCodec)) {
      console.error("Unsupported video codec:", mimeCodec);
      return;
    }

    sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    sourceBuffer.mode = "sequence"; // Ensure segments are appended in order

    // Load the first segment
    await loadSegment(currentSegment);

    // Auto-load next segment when approaching the end of the current one
    videoElement.addEventListener("timeupdate", async () => {
      const nextSegmentStart = (currentSegment + 1) * segmentLength;
      if (videoElement.currentTime >= nextSegmentStart - 2 && !sourceBuffer.updating) {
        currentSegment++;
        await loadSegment(currentSegment);
      }
    });
  });
}

// Fetch and append a specific video segment
async function loadSegment(segmentIndex) {
  const start = segmentIndex * segmentLength;
  const end = start + segmentLength;

  try {
    // Get video metadata to calculate byte ranges
    const headResponse = await fetch(videoUrl, { method: "HEAD" });
    const totalBytes = parseInt(headResponse.headers.get("Content-Length"));
    const totalDuration = await getVideoDuration();

    // Calculate approximate byte range for the segment
    const startByte = Math.floor((start / totalDuration) * totalBytes);
    const endByte = Math.floor((end / totalDuration) * totalBytes) - 1; // Range is inclusive

    // Fetch the segment using Range header
    const segmentResponse = await fetch(videoUrl, {
      headers: {
        Range: `bytes=${startByte}-${endByte}`
      }
    });

    if (segmentResponse.status !== 206) {
      console.error("Server does not support HTTP Range requests");
      return;
    }

    const blob = await segmentResponse.blob();
    const arrayBuffer = await blob.arrayBuffer();

    // Append the chunk to the video buffer
    sourceBuffer.appendBuffer(arrayBuffer);

    // Wait for buffer to finish updating before loading next segment
    await new Promise(resolve => {
      sourceBuffer.addEventListener("updateend", resolve, { once: true });
    });

  } catch (error) {
    console.error("Failed to load segment:", error);
  }
}

// Helper to get video duration without loading the full file
async function getVideoDuration() {
  const tempVideo = document.createElement("video");
  tempVideo.src = videoUrl;
  await tempVideo.load();
  return tempVideo.duration;
}

// Start the streaming process
initMediaStream();

Critical Notes #

• Server Compatibility: Your server must enable HTTP Range requests. For Apache, add EnableSendfile On and EnableMMAP On to your config; for Nginx, this is enabled by default in most setups.
• Codec Matching: Ensure the mimeCodec string matches your video’s actual codecs. Use tools like ffprobe or online video inspectors to find the correct values.
• Error Handling: Add retry logic for failed segments and buffer underrun handling to improve robustness.
• Adaptive Bitrate: For a fully Netflix-like experience, consider using HLS or DASH protocols with libraries like hls.js or dash.js, which handle adaptive bitrate switching automatically.

Why Your Original Code Failed #

The #t=0,10 fragment is a client-side instruction for the video player to seek to that time range, but it has no impact on the HTTP request sent to the server. The server still delivers the entire video file, so you don’t get the segmented loading you intended. Range requests paired with MSE are the industry standard for this use case.

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