如何为HTML <video/>标签添加JWT授权请求头

核心思路是利用MediaSource Extensions (MSE) 配合支持Range的请求，既能给视频请求添加Authorization头，又能实现流式加载和无延迟快进（依赖服务器支持分段请求）。

关键前提 #

• 视频服务器必须支持Range请求（请求时返回206 Partial Content状态码），这是实现无延迟快进的核心——快进时可直接请求对应时间点的视频片段。
• 跨域场景下，服务器需配置CORS：允许Authorization请求头，同时暴露Content-Length、Accept-Ranges等响应头。

实现步骤 #

1. 基础MSE流式加载逻辑 #

通过MSE创建媒体源，绑定到video元素，用带Auth头的fetch请求分段加载视频：

// 初始化MediaSource
const mediaSource = new MediaSource();
const videoElement = document.getElementById('target-video'); // 或react-player底层的video元素
videoElement.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {
  // 注意：codec需匹配你的MP4实际编码，可通过ffmpeg查看
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  const videoUrl = '你的视频地址';
  const authHeaders = { Authorization: 'Bearer 你的认证Token' };

  // 加载初始片段
  await loadVideoSegment(sourceBuffer, videoUrl, authHeaders, 0);

  // 监听快进事件，加载对应片段
  videoElement.addEventListener('seeked', async () => {
    if (!videoElement.duration) return;
    const currentTime = videoElement.currentTime;
    // 获取视频总大小，计算对应起始字节
    const headRes = await fetch(videoUrl, { method: 'HEAD', headers: authHeaders });
    const totalBytes = parseInt(headRes.headers.get('Content-Length'));
    const startByte = Math.floor((currentTime / videoElement.duration) * totalBytes);

    // 等待当前缓冲区更新完成，再清空并加载新片段
    if (sourceBuffer.updating) {
      await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
    }
    sourceBuffer.abort();
    await loadVideoSegment(sourceBuffer, videoUrl, authHeaders, startByte);
  });
});

// 分段加载视频的函数
async function loadVideoSegment(sourceBuffer, url, headers, startByte) {
  const res = await fetch(url, {
    headers: { ...headers, Range: `bytes=${startByte}-` }
  });
  if (!res.ok) throw new Error('视频片段请求失败');

  const reader = res.body.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    // 等待缓冲区可用，再追加数据
    if (sourceBuffer.updating) {
      await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
    }
    sourceBuffer.appendBuffer(value);
  }
}

2. 适配ReactPlayer的方案 #

利用ReactPlayer的ref获取底层video元素，将上述逻辑整合到React组件中：

import React, { useRef, useEffect } from 'react';
import ReactPlayer from 'react-player';

const AuthVideoPlayer = ({ videoUrl, authToken }) => {
  const playerRef = useRef(null);

  useEffect(() => {
    const videoElement = playerRef.current?.getInternalPlayer();
    if (!videoElement) return;

    const mediaSource = new MediaSource();
    videoElement.src = URL.createObjectURL(mediaSource);
    let sourceBuffer = null;

    const initSource = async () => {
      try {
        sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
        await loadVideoSegment(sourceBuffer, videoUrl, { Authorization: `Bearer ${authToken}` }, 0);
      } catch (err) {
        console.error('视频加载失败:', err);
      }
    };

    const handleSeek = async () => {
      if (!sourceBuffer || !videoElement.duration) return;
      const currentTime = videoElement.currentTime;
      const headRes = await fetch(videoUrl, { method: 'HEAD', headers: { Authorization: `Bearer ${authToken}` } });
      const totalBytes = parseInt(headRes.headers.get('Content-Length'));
      const startByte = Math.floor((currentTime / videoElement.duration) * totalBytes);

      if (sourceBuffer.updating) {
        await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
      }
      sourceBuffer.abort();
      await loadVideoSegment(sourceBuffer, videoUrl, { Authorization: `Bearer ${authToken}` }, startByte);
    };

    mediaSource.addEventListener('sourceopen', initSource);
    videoElement.addEventListener('seeked', handleSeek);

    // 清理函数
    return () => {
      mediaSource.removeEventListener('sourceopen', initSource);
      videoElement.removeEventListener('seeked', handleSeek);
      if (sourceBuffer && !sourceBuffer.updating) sourceBuffer.abort();
      URL.revokeObjectURL(videoElement.src);
    };
  }, [videoUrl, authToken]);

  return <ReactPlayer ref={playerRef} controls width="100%" />;
};

export default AuthVideoPlayer;

3. 优化建议 #

• 精准快进：上述时间转字节是线性简化逻辑，生产环境可使用mp4box.js解析MP4的moov box，定位对应时间点的关键帧字节位置，避免加载无效数据，提升快进效率。
• 错误处理：添加请求失败、缓冲区溢出等场景的错误捕获与重试逻辑。
• 预加载：可提前加载后续几个片段，提升播放流畅度。

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