h5p-standalone插件下H5P文件存放位置及配置问题排查

H5P文件的正确存放规则 #

不存在强制绑定的全局固定存放路径，路径计算的核心基准是当前承载H5P加载逻辑的HTML页面的实际访问位置：

• 所有配置里写的相对路径，一律以测试HTML页面的所在位置为起点计算，不能以项目根目录、dist打包目录的位置为基准推导相对路径
• 适配你当前使用test/simple.html开展测试的标准目录结构参考：

项目根目录/
├─ dist/                      # h5p-standalone 打包输出目录
│  ├─ frame.bundle.js
│  └─ styles/
│     └─ h5p.css
├─ test/
│  └─ simple.html             # 测试页面所在位置
└─ workspace/
   └─ xyz.h5p                 # 目标H5P文件存放位置

当前配置的常见问题定位 #

• 路径计算类报错
  你当前写的.h5p文件路径../workspace/xyz.h5p、框架资源路径../dist/frame.bundle.js、../dist/styles/h5p.css，从目录结构上看逻辑是通顺的，但高频触发加载失败：
  • 若直接双击HTML文件、用file://本地协议打开测试页，浏览器会直接拦截跨目录的本地文件读取请求，必须通过本地静态服务托管整个项目目录，通过http/https协议访问测试页面
  • 所有相对路径必须和浏览器实际解析的请求地址一致，可通过开发者工具的网络面板检查所有资源请求是否存在404、路径错位的问题
• 插件运行逻辑兼容问题
  h5p-standalone 默认需要对接后端解压接口完成.h5p包的资源解析，部分版本的插件不支持直接传入本地静态存储的.h5p文件路径，若直接写静态路径指向本地.h5p文件，会出现内容解析失败、页面空白的问题，需要确认当前使用的插件版本是否支持纯前端直接读取静态.h5p文件的能力
• 静态资源权限问题
  确认workspace目录、xyz.h5p文件没有被静态服务的访问规则拦截，具备公开读取的权限

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