如何使用JS/React/Node.js实现双视频并发流式播放？

可用工具库 #

• 前端播放控制：
  • 原生HTML5 <video>：零依赖，满足基础播放需求，适合入门。
  • plyr/video.js：轻量封装的视频播放库，提供统一API、样式和事件监听，多实例同步控制更省心。
• 后端视频处理/流生成：
  • fluent-ffmpeg：Node.js下封装FFmpeg的工具包，无需直接写复杂命令，轻松生成HLS/DASH等流格式。
  • FFmpeg：核心转码工具，将原始视频转成适合流媒体播放的格式（如HLS的ts切片）。

实现流程（基于VOD点播场景） #

后端适配（复用单流逻辑即可） #

你已经能实现单视频流，双视频并发不需要重构核心流服务，只需：

1. 给每个视频分配独立标识（比如视频ID），后端根据标识返回对应视频的流文件/转码结果。
2. 若为实时转码，用fluent-ffmpeg为每个视频启动独立转码进程（注意：服务器资源有限，建议用bull等队列工具控制并发转码数量）。
3. HLS转码的Node.js封装示例：

const ffmpeg = require('fluent-ffmpeg');

function generateHlsStream(inputPath, outputDir, videoId) {
  return ffmpeg(inputPath)
    .output(`${outputDir}/${videoId}.m3u8`)
    .outputOptions([
      '-c:v libx264',
      '-c:a aac',
      '-hls_time 10', // 每10秒生成一个切片
      '-hls_list_size 0' // 保留所有切片
    ])
    .run();
}

4. 用Express等框架提供静态文件服务，让前端能访问生成的m3u8和ts文件。

前端实现 #

1. 页面布局示例：

<!-- 原生标签版本 -->
<video id="video1" controls src="/streams/video1.m3u8"></video>
<video id="video2" controls src="/streams/video2.m3u8"></video>

<!-- Plyr播放器版本 -->
<div id="player1" data-plyr-provider="html5" data-plyr-source-type="hls">
  <video src="/streams/video1.m3u8" controls></video>
</div>
<div id="player2" data-plyr-provider="html5" data-plyr-source-type="hls">
  <video src="/streams/video2.m3u8" controls></video>
</div>

2. 双视频同步控制逻辑：

// 原生标签同步示例
const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');

// 同步播放/暂停
video1.addEventListener('play', () => video2.play().catch(err => console.log(err)));
video1.addEventListener('pause', () => video2.pause());

// 同步进度（避免循环触发）
video1.addEventListener('timeupdate', () => {
  if (!video2.seeking) {
    video2.currentTime = video1.currentTime;
  }
});
video2.addEventListener('timeupdate', () => {
  if (!video1.seeking) {
    video1.currentTime = video2.currentTime;
  }
});

入门建议 #

1. 先易后难：先跳过后端流，用本地视频文件测试前端双视频同步播放，确认逻辑没问题后再对接后端流服务。
2. 优先选HLS协议：HLS兼容性好，浏览器无需额外插件支持，FFmpeg转码命令简单，适合入门学习。
3. 控制后端并发：实时转码时不要同时启动过多进程，否则会耗尽服务器资源，用队列工具做任务调度更稳妥。
4. 调试技巧：先确保单个视频流正常播放，再叠加第二个；用浏览器开发者工具的Network面板查看流请求状态，Console面板排查JS报错。

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