React+HLS视频流播放404错误求助：output.m3u8未找到

核心问题分析 #

1. Express未托管静态文件：服务器未配置静态文件服务，无法将http://localhost:3001/public/test/output.m3u8这类URL映射到本地文件，导致404。
2. URL路径错误：静态目录托管后，public文件夹会成为URL根路径的一部分，请求URL无需额外添加public前缀。
3. 转换时机不匹配：前端页面加载时直接请求m3u8文件，但视频转换仅在访问根路径/时触发，可能存在文件未生成或未完成的情况。
4. FFmpeg参数潜在问题：-c copy直接复制原视频流，若原视频编码（如VP9/Opus）不兼容HLS标准，会导致生成的m3u8无法正常播放。

具体修复步骤 #

1. 配置Express静态文件服务 #

修改converted.js，在app.use(cors())之后添加静态目录托管代码：

// 配置静态文件服务，指向你的public文件夹
const publicDir = path.join('C:/Users/fomic/vite-project/public');
app.use(express.static(publicDir));

2. 修正前端请求URL #

修改VideoPlayer.jsx中的setVideoUrl路径，去掉public前缀：

setVideoUrl('http://localhost:3001/test/output.m3u8');

3. 确保视频转换完成后再加载（可选） #

若需要前端触发转换并等待完成，调整fetchVideo逻辑：

const fetchVideo = async () => {
    try {
        // 先触发视频转换
        const convertResponse = await fetch('http://localhost:3001/');
        if (!convertResponse.ok) {
            throw new Error(`服务器返回状态: ${convertResponse.status}`);
        }
        await convertResponse.text(); // 等待转换完成响应
        // 转换完成后再设置播放URL
        setVideoUrl('http://localhost:3001/test/output.m3u8');
    } catch (error) {
        console.error('获取视频时出错:', error);
    } finally {
        setLoading(false);
    }
};

4. 修复FFmpeg兼容参数（若原视频编码不兼容） #

将converted.js中的FFmpeg参数替换为转码模式，确保HLS兼容性：

const ffmpegProcess = spawn('ffmpeg', [
    '-i', inputVideo,
    '-c:v', 'libx264', // 转码为H.264视频
    '-c:a', 'aac',     // 转码为AAC音频
    '-start_number', '0',
    '-hls_time', '10',
    '-hls_list_size', '0',
    '-f', 'hls',
    outputPlaylist
]);

5. 冗余代码清理 #

删除converted.js中重复的输入文件检查代码：

// 重复的检查，直接删除
// console.log('检查输入文件:', inputVideo);
// if (!fs.existsSync(inputVideo)) {
//     console.error('错误: 输入文件未找到。');
//     return res.status(404).send('输入文件未找到。');
// }

验证步骤 #

1. 启动Express服务器：node converted.js
2. 访问http://localhost:3001/test/output.m3u8，确认文件能正常下载（若未生成，先访问http://localhost:3001/触发转换）
3. 启动前端项目，加载VideoPlayer组件，确认视频能正常流播放

内容的提问来源于stack exchange，提问作者Полина Фомичева