React开发如何实现单播放器连续播放多个m3u8播放列表

核心思路 #

不要直接手动拼接多个m3u8文件，独立的m3u8播放列表通常有独立的音视频编码参数、时间轴，直接合并没有添加对应的EXT-X-DISCONTINUITY标签就会出现仅第一个能播放的问题。正确的做法是在播放器层维护播放队列，监听当前播放列表的结束事件，自动切换下一个m3u8源加载播放，这也是AfreecaTV等平台官方播放器的实现逻辑。

React端可落地实现步骤 #

• 依赖选择：选用hls.js作为HL S流解析核心，也可以直接使用封装好的react-hls-player组件，原生video标签不支持HLS流播放，必须依赖HLS解析库实现能力补全。
• 维护播放队列状态：在组件内声明队列状态，比如const [playlistQueue, setPlaylistQueue] = useState(['第一个m3u8地址', '第二个', '第三个'])，再声明当前播放索引const [currentPlayIndex, setCurrentPlayIndex] = useState(0)。
• 监听播放结束事件：给播放器绑定onEnded回调，回调内判断当前索引是否小于队列长度-1，如果是就将索引+1，把新的m3u8地址传给播放器加载播放即可。
• 无缝优化：如果要减少切换间隙，可以在当前视频播放到剩余3-5秒时，提前预加载下一个m3u8的分片，切换时直接替换播放源即可。

核心示例代码片段 #

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

const MultiHlsPlayer = () => {
  const videoRef = useRef(null);
  const hlsRef = useRef(null);
  // 替换为你的实际m3u8播放队列
  const playlistQueue = [
    'https://example.com/1.m3u8',
    'https://example.com/2.m3u8',
    'https://example.com/3.m3u8',
  ];
  const [currentIndex, setCurrentIndex] = useState(0);

  const loadHls = (url) => {
    // 销毁之前的hls实例避免内存泄漏
    if (hlsRef.current) {
      hlsRef.current.destroy();
    }
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(url);
      hls.attachMedia(videoRef.current);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        videoRef.current.play();
      });
      hlsRef.current = hls;
    }
  };

  const handlePlayEnd = () => {
    // 队列还有下一个视频就自动加载播放
    if (currentIndex < playlistQueue.length - 1) {
      const nextIndex = currentIndex + 1;
      setCurrentIndex(nextIndex);
      loadHls(playlistQueue[nextIndex]);
    }
  };

  useEffect(() => {
    // 初始化加载第一个视频
    loadHls(playlistQueue[currentIndex]);
    // 组件卸载时销毁实例
    return () => hlsRef.current?.destroy();
  }, []);

  return (
    <video 
      ref={videoRef} 
      onEnded={handlePlayEnd}
      controls
      style={{ width: '100%' }}
    />
  );
};

export default MultiHlsPlayer;

常见问题排查 #

• 如果切换后出现卡顿/加载失败，先检查单个m3u8地址是否能独立播放，确认资源服务器的跨域配置是否正确。
• 如果需要完全无缝切换无黑帧，可以提前实例化一个隐藏的video标签预加载下一个视频，当前视频播放结束时直接替换显示的video节点即可。

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