React中如何实现本地大体积视频文件的流式播放？

核心问题定位 #

你遇到的RangeError [ERR_FS_FILE_TOO_LARGE]错误和播放器、视频本身无关，是webpack的静态资源导入限制导致的：import语句导入文件时，webpack会将文件读取后打包到最终产物中，webpack默认限制了单个可导入静态资源的大小不超过2GB，这就是你报错的直接原因。原生HTML环境可以正常播放是因为你直接给src传路径，没有经过打包工具的资源导入逻辑。

优先推荐的低成本方案 #

不要用import导入大体积视频文件，按照以下步骤操作即可直接播放，无需拆分片、无需引入HLS/DASH：

• 将所有超过100M的视频文件放到React项目的public目录下（可以新建子目录分类存储）
• 直接给播放器的src属性传入public目录下的相对路径，webpack不会处理public目录内的资源，不会触发大小限制
• 示例代码：

import React from 'react';
import { Player } from 'video-react';
import 'video-react/dist/video-react.css';

function VideoPage() {
  // 假设视频存放在 public/videos/test.mp4
  const videoSrc = '/videos/test.mp4';
  return (
    <Player>
      <source src={videoSrc} type="video/mp4" />
    </Player>
  );
}
export default VideoPage;

• 只要你的视频文件moov元数据位于文件头，浏览器会自动通过HTTP范围请求分段拉取视频，支持边下边播、拖动进度条秒跳转，完全满足常规播放需求。

需要流式协议的场景方案 #

如果需要做多码率自适应、低带宽场景适配，再考虑引入流媒体协议：

• 优先选择HLS协议：兼容性最好，绝大多数桌面、移动端浏览器原生支持，不支持的场景可以用hls.js做兼容，接入成本极低
• DASH适合更复杂的多音轨、多字幕、多清晰度切换场景，国内生态比HLS稍差，无特殊需求不需要选择
• HLS实现步骤：
  1. 用ffmpeg将原MP4文件转成HLS分片，执行命令：ffmpeg -i 输入视频.mp4 -c:v libx264 -c:a aac -hls_time 10 -hls_list_size 0 -f hls 输出索引.m3u8
  2. 将生成的m3u8索引文件和所有ts分片放到public目录下
  3. 接入播放器的示例代码：

import React, { useRef, useEffect } from 'react';
import Hls from 'hls.js';

function HlsVideoPlayer() {
  const videoRef = useRef(null);
  useEffect(() => {
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('/hls/输出索引.m3u8');
      hls.attachMedia(videoRef.current);
    }
  }, []);
  return <video ref={videoRef} controls width="100%" />;
}
export default HlsVideoPlayer;

额外注意事项 #

• 如果需要播放用户本地磁盘上的任意视频，不需要把文件导入项目，直接用<input type="file" accept="video/*"/>获取文件对象后，调用URL.createObjectURL(文件对象)生成临时地址传给src即可，无大小限制
• 生产环境部署时，确保静态资源服务器开启了Range请求头支持，主流Nginx、Apache默认都已开启该配置

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