如何在React中正确使用Hls.js？挂载视频元素遇类型错误

你的核心问题是传递给attachMedia的不是真实DOM元素，再结合几个细节优化，就能解决报错。以下是具体修复方案：

错误根源与修复步骤 #

1. 传递正确的DOM元素给attachMedia
   你当前传的是videoRef（useRef返回的包装对象），但Hls.js需要的是真实的video DOM元素，必须使用videoRef.current。

2. 完善useEffect依赖与清理逻辑

   • 空依赖数组会导致data.src更新时不重新加载视频；
   • 组件卸载或源变化时，必须销毁Hls实例，避免内存泄漏和残留事件监听。

3. 移除video标签的src属性
   Hls.js会接管媒体源加载，手动设置src会和Hls的逻辑冲突，还会触发原生浏览器对HLS流的无效加载。

修改后的完整代码 #

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

export default function VideoPlayer({ data, className = '', ...props }) {
  const videoRef = useRef(null);
  const hlsRef = useRef(null); // 用ref保存Hls实例，方便后续清理

  useEffect(() => {
    // 跳过DOM未挂载的情况
    if (!videoRef.current) return;

    // 销毁旧的Hls实例（防止重复创建）
    if (hlsRef.current) {
      hlsRef.current.destroy();
    }

    if (Hls.isSupported()) {
      const hls = new Hls({ debug: true });
      hlsRef.current = hls;

      hls.loadSource(data.src);
      hls.attachMedia(videoRef.current); // 传真实DOM元素

      // 可选：Manifest解析完成后触发的逻辑（比如自动播放）
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        // videoRef.current?.play();
      });

      hls.on(Hls.Events.ERROR, (event, err) => {
        console.error("Hls播放错误:", err);
        // 可添加错误降级逻辑，比如切换到原生播放
      });
    } else {
      // 不支持Hls时的降级方案：直接设置video源
      videoRef.current.src = data.src;
    }

    // 清理函数：组件卸载或依赖变化时执行
    return () => {
      if (hlsRef.current) {
        hlsRef.current.destroy();
        hlsRef.current = null;
      }
    };
  }, [data.src]); // 依赖data.src，源更新时重新初始化

  return (
    <video
      ref={videoRef}
      controls
      {...props}
      className={className}
      {/* 移除src属性，由Hls或降级逻辑处理 */}
    />
  );
}

关键修改说明 #

• videoRef.current的使用：useRef返回的是一个包含DOM元素的对象，只有current属性才指向真实的video节点，Hls.js需要直接操作这个节点才能绑定事件和加载流。
• 依赖数组[data.src]：确保当视频源地址变化时，重新创建Hls实例并加载新的流，避免使用旧的源。
• Hls实例销毁：组件卸载或源更新时，调用destroy()释放资源，防止内存泄漏和重复监听事件导致的异常。
• 移除src属性：避免浏览器尝试原生加载HLS流（多数浏览器不支持原生HLS），同时防止和Hls.js的流管理逻辑冲突。

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