如何在Next.js中播放HLS m3u8格式视频？工具兼容遇阻

方案一：正确集成video.js到Next.js #

之前通过CDN引入失败大概率是Next.js SSR环境的限制，建议通过npm包+客户端组件的方式集成：

1. 安装依赖：

npm install video.js videojs-contrib-hls

2. 创建客户端播放器组件（必须添加'use client'指令）：

'use client';

import { useEffect, useRef } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-contrib-hls';

export default function HLSVideoPlayer({ src }) {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    // 初始化video.js播放器
    if (!playerRef.current && videoRef.current) {
      const videoElement = videoRef.current;
      playerRef.current = videojs(videoElement, {
        controls: true,
        responsive: true,
        fluid: true,
        sources: [{ src, type: 'application/x-mpegURL' }]
      });
    }

    // 组件卸载时销毁播放器，避免内存泄漏
    return () => {
      if (playerRef.current) {
        playerRef.current.dispose();
        playerRef.current = null;
      }
    };
  }, [src]);

  return (
    <div data-vjs-player>
      <video ref={videoRef} className="video-js vjs-big-play-centered" />
    </div>
  );
}

3. 在页面或其他组件中直接使用：

import HLSVideoPlayer from './HLSVideoPlayer';

export default function VideoPage() {
  return (
    <div>
      <HLSVideoPlayer src="你的m3u8视频地址" />
    </div>
  );
}

方案二：直接使用hls.js + 原生video标签 #

避开第三方播放器的兼容问题，直接用hls.js操作原生video标签，灵活性更高：

1. 安装依赖：

npm install hls.js

2. 创建客户端组件：

'use client';

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

export default function HLSNativePlayer({ src }) {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    let hlsInstance;
    // 优先使用浏览器原生HLS支持（如Safari）
    if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = src;
    } else if (Hls.isSupported()) {
      // 其他浏览器用hls.js处理
      hlsInstance = new Hls();
      hlsInstance.loadSource(src);
      hlsInstance.attachMedia(video);
    } else {
      console.error('当前浏览器不支持HLS播放');
    }

    // 清理hls实例
    return () => {
      if (hlsInstance) {
        hlsInstance.destroy();
      }
    };
  }, [src]);

  return (
    <video
      ref={videoRef}
      controls
      style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}
    />
  );
}

方案三：调整React Player的版本或配置 #

如果坚持使用React Player，可通过指定兼容版本或配置解决兼容性问题：

1. 安装兼容版本的React Player（以2.12.0为例，该版本与最新hls.js兼容性较好）：

npm install react-player@^2.12.0

2. 创建客户端组件使用：

'use client';

import ReactPlayer from 'react-player';

export default function ReactPlayerHLS({ src }) {
  return (
    <ReactPlayer
      url={src}
      controls
      width="100%"
      height="auto"
      config={{
        file: {
          hlsOptions: {
            // 可根据需求添加hls.js配置，如开启调试：debug: true
          }
        }
      }}
    />
  );
}

通用注意事项 #

• 所有播放器组件必须标记为客户端组件（添加'use client'），因为视频播放库依赖浏览器的window对象，无法在SSR环境运行。
• 确保视频源配置了正确的CORS策略，否则会出现跨域加载失败的问题。
• 测试时优先在真实浏览器环境下验证，Next.js的开发服务器可能存在特殊限制。

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