Flask后端传视频至React前端，Blob无法作为视频源播放求助

核心问题排查与修复方案 #

1. 后端未支持HTTP范围请求（Range Requests） #

浏览器播放视频依赖断点续传机制，会发送Range请求头获取部分视频内容，默认的send_file不处理该逻辑，导致视频无法正常加载。

修改后端代码，添加范围请求支持：

@app.route('/summarize/<video_name>', methods=['GET'])
def get_video(video_name):
    return send_file(
        f"custom-video/{video_name}",
        mimetype='video/mp4',
        conditional=True,
        accept_ranges=True
    )

2. 前端请求头设置错误 #

前端无需在请求头中设置Content-Type，应改为Accept头告知服务器接收的视频格式：

const playVideo = async () => {
    axios
      .get(url, {
        headers: {
          "Accept": "video/mp4",
        },
        responseType: "blob",
      })
      .then((response) => {
        const videoURL = URL.createObjectURL(response.data);
        setVideoUrl(videoURL);
        // 组件卸载时释放Blob URL，避免内存泄漏
        return () => URL.revokeObjectURL(videoURL);
      });
  };

3. 前端视频标签配置缺失 #

确保视频标签绑定正确属性，支持浏览器解析：

<video 
  controls 
  src={videoUrl} 
  type="video/mp4"
  preload="metadata"
></video>

4. 视频文件编码不兼容 #

确认视频为标准MP4编码（H.264视频 + AAC音频），非标准编码无法被浏览器解析，可通过FFmpeg重新编码：

ffmpeg -i input.mp4 -vcodec h264 -acodec aac output.mp4

验证流程 #

• 直接访问后端视频URL（如http://localhost:5000/summarize/test.mp4），确认视频可在浏览器直接播放，排除后端服务问题。
• 检查浏览器控制台是否存在跨域错误，若前后端域名不同，需在Flask中配置CORS。

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