【QA解答】初始化失败系列

---

【QA】:报错WebAssembly.Memory(): could not allocate memory 怎么解决

• 原因

  • 当前设备内存太小
  • 当前设备空余内存不足
  • 当前设备 [操作系统]--分配-->[浏览器]--分配-->[Tab标签]--分配-->[播放器] 的内存不足

• 解决方式

  • 换一台高性能设备
  • 关闭其他耗能（以及内存）应用、进程
  • 换小版本WASM
    • 引入 missile-512mb 版本
    • 引入 missile-256mb 版本

---

Q:报错Uncaught ReferenceError: SharedArrayBuffer is not defined 怎么解决

1）请检查浏览器访问地址 是否为以下形式

定位

地址是否为以下形式

• file:// 开头
• /你的目录路径/xxx/xxx/xxx.html

如果是的话，那么打开方式错误。

解决

• 将播放器相关代码放置到 一个 HTTP服务器下。
• 通过HTTP服务器访问。

2）检查HTTP服务器（以Nginx为例）

定位

是否添加了以下Headers

• Cross-Origin-Opener-Policy 'same-origin'
• Cross-Origin-Embedder-Policy 'require-corp'

解决

• 添加如上headers到服务器，重启服务器即可

---

Q:Demo直接运行不成功

1）请检查浏览器访问地址 是否为以下形式

定位

地址是否为以下形式

• file:// 开头
• /你的目录路径/xxx/xxx/xxx.html

如果是的话，那么打开方式错误。

解决

• 将播放器相关代码放置到 一个 HTTP服务器下。
• 通过HTTP服务器访问。

2）检查HTTP服务器（以Nginx为例）

定位

是否添加了以下Headers

• Cross-Origin-Opener-Policy 'same-origin'
• Cross-Origin-Embedder-Policy 'require-corp'

解决

• 添加如上headers到服务器，重启服务器即可

3）其他原因

自我排查

• 检查Network里：missile.js 和 wasm文件是否加载成功
• 检查Network里：播放URL是否404
• 检查Console是否有报错
• 检查浏览器是否支持WebAssembly：可以去https://www.caniuse.com/#search=wasm排查
• 检查视频是否为 README里所支持的播放格式、编码

---

Q:报错Access to fetch at 'http://xxx' from origin 'http://xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is preset on the requested...怎么解决

• 发生了跨域
  • 你的视频地址 与 当前播放页面不是同一个域名
  • 需要修改你的服务器配置，允许跨域

---

Q:报错Uncaught Finished up all reserved function pointers. Use a higher value for RESERVED_FUNCTION_POINTERS

• 原因：你当前页面初始化的 播放器 对象过多，需要更换SDK内WASM对应版本

• 更换方式

  • 引入 missile-120func 版本

---

Q:为什么我按照 demo 集成到项目里面无法正常运行呢?

首先打开浏览器的控制台查看network选项卡是否加载了对应的wasm文件。如果加载了还是没有请确认浏览器 由于wasm只支持现代浏览器对移动端的兼容可能不是那么友好,国内浏览器例如360,搜狗可能无法运行。请使用Edge或者 Chrome

---

## Q:如何改变播放器的窗口大小呢?比如我想自定义播放器的`viewPort`?

PlayerConfig 的number和height可能无法满足您的需求。这时候您需要手动获取播放器的实例也就是PlayerConfig里面的player的DOM元素。 原生用户可以使用document.querySelector(player容器的ID)。使用现代框架的用户例如vue或者react可以通过Ref的方式进行获取。 Vue用户请在mounted阶段获取元素对dom进行设置,React用户请在useEffect里面进行操作。

---

Q: 我该如何在 Webpack 或者 vite 环境下使用该 SDK？

基于webpack的工程例如vuecli,create-react-app可以把dist拷贝进你项目里面的静态目录下。一般是public目录。然后按照exmaple示例文件进行引入。 请注意index.html文件。 基于Vite的工程。就只能采用window的方式进行引入。因为vite无法识别非esm的模块。具体参照vite_vue_ts.

---

Q: 我如果是使用 typescript 开发，我该如何获取类型提示?

本SDK提供了d.ts声明文件.您如果是webpack用户在引入SDK的时候会自动获取类型提示。Vite用户则需要把本项目 sdk 内置的d.ts导入到你自己的全局d.ts里面以获取类型支持。

---

Q: 我如果无法在该指南获取帮助,我该怎么获得帮助？

您可以通过ISSUE的方式,按照格式模板进行提问,或者加群925466059得到帮助。提问前请遵守提问的智慧。