如何使用Axios在React中实现Laravel存储视频的流式拖动播放？

一、修复Laravel后端，支持HTTP范围请求 #

默认的response()->file不会处理Range请求，导致前端拖动视频时无法跳转到指定位置。需要手动处理Range头，返回206 Partial Content响应：

Route::get('/video', function () {
    $filePath = public_path('/Articles/Videos/del659d4345-980b-4e4a-a499-84618da19107.mp4');
    $fileSize = filesize($filePath);
    $mime = mime_content_type($filePath);

    // 处理Range请求头
    if (isset($_SERVER['HTTP_RANGE'])) {
        preg_match('/bytes=(\d+)-(\d+)?/', $_SERVER['HTTP_RANGE'], $matches);
        $start = intval($matches[1]);
        $end = isset($matches[2]) ? intval($matches[2]) : $fileSize - 1;
        $length = $end - $start + 1;

        $file = fopen($filePath, 'rb');
        fseek($file, $start);
        $content = fread($file, $length);
        fclose($file);

        return response($content, 206)
            ->header('Content-Type', $mime)
            ->header('Content-Length', $length)
            ->header('Content-Range', "bytes $start-$end/$fileSize")
            ->header('Accept-Ranges', 'bytes');
    }

    // 正常请求返回完整文件
    return response()->file($filePath, [
        'Accept-Ranges' => 'bytes',
        'Content-Type' => $mime,
    ]);
});

二、React前端直接使用video标签实现流式播放 #

不需要用Axios去请求整个视频数据，video标签本身会自动发送Range请求来实现流式加载和拖动。直接将后端接口地址作为video的src属性即可：

import React from 'react';

const VideoPlayer = () => {
    return (
        <video 
            controls 
            width="800"
            src="/api/video" // 直接指向后端视频接口
        >
            您的浏览器不支持视频播放
        </video>
    );
};

export default VideoPlayer;

为什么原来的方式不行？ #

• 你之前用Axios GET 请求整个视频，是把视频内容全部加载到内存中，这种方式无法实现流式播放，也不支持拖动（因为拖动需要请求视频的指定片段，而不是整个文件）。
• video标签会根据播放进度自动发送Range请求，后端处理后返回对应片段，从而实现流畅的拖动和流式加载。

额外注意事项 #

• 确保视频文件的MIME类型正确，Laravel的mime_content_type一般能正确识别，如果不行可以手动指定（比如video/mp4）。
• 如果视频文件很大，建议将文件存储在云存储并使用CDN，这样流式播放的性能会更好，后端也不用处理文件请求压力。

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