ReactJs集成H5P-standalone无法监听xAPI事件的问题求助

你遇到的Cannot read properties of undefined (reading 'on')错误，是因为尝试访问的全局H5P.externalDispatcher尚未初始化，或者并非当前H5P实例对应的事件调度器。正确的做法是使用new H5P()返回的实例中的事件调度器，同时优化异步代码逻辑。

修正后的代码示例 #

import { H5P } from "h5p-standalone";
import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    let h5pInstance;
    const initH5P = async () => {
      const el = document.getElementById("h5p-container");
      const options = {
        h5pJsonPath: "/h5p/pygame",
        frameJs: "/assets/frame.bundle.js",
        frameCss: "/assets/styles/h5p.css"
      };
      // 直接await获取H5P实例，无需嵌套then
      h5pInstance = await new H5P(el, options);
      
      // 使用实例的externalDispatcher监听xAPI事件
      const handleXAPIEvent = (event) => {
        console.log("捕获到xAPI事件:", event);
      };
      h5pInstance.externalDispatcher.on("xAPI", handleXAPIEvent);

      // 返回清理函数，组件卸载时移除事件监听，防止内存泄漏
      return () => {
        if (h5pInstance?.externalDispatcher) {
          h5pInstance.externalDispatcher.off("xAPI", handleXAPIEvent);
        }
      };
    };

    initH5P();
  }, []);

  return <div id="h5p-container"></div>;
}

关键修改点说明 #

• 使用实例级的externalDispatcher：全局H5P对象的externalDispatcher可能未在H5P实例初始化完成前就绪，直接使用new H5P()返回的实例中的调度器才是当前播放器对应的事件源。
• 优化异步逻辑：去掉await与then的冗余嵌套，直接通过await获取实例，代码更简洁易读。
• 添加清理逻辑：在useEffect的返回函数中移除事件监听，避免组件卸载后残留事件绑定导致内存泄漏。
• 修复容器元素：原代码返回的空片段没有提供H5P挂载的容器，改为<div id="h5p-container"></div>确保播放器有正确的挂载节点。

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