【QA解答】初始化失败系列
- Q:报错WebAssembly.Memory(): could not allocate memory 怎么解决
- Q:报错Uncaught ReferenceError: SharedArrayBuffer is not defined 怎么解决
- Q:Demo直接运行不成功
- Q:报错Uncaught RangeError: Start offset undefined is outside the bounds of the buffer
- 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
- Q:为什么我按照 demo 集成到项目里面无法正常运行呢?
- Q: 我该如何在 Webpack 或者 vite 环境下使用该 SDK？
- Q: 我如果是使用 typescript 开发，我该如何获取类型提示?
- Q: 我如果无法在该指南获取帮助,我该怎么获得帮助？
-
原因
- 当前设备内存太小
- 当前设备空余内存不足
- 当前设备 [操作系统]--分配-->[浏览器]--分配-->[Tab标签]--分配-->[播放器] 的内存不足
-
解决方式
- 换一台高性能设备
- 关闭其他耗能（以及内存）应用、进程
- 换小版本WASM dist目录
- 引入 missile-512mb 版本
- 引入 missile-256mb 版本
Q:报错Uncaught abort(Cannot enlarge memory arrays to size 1074094080 bytes (OOM). Either (1) compile with -s TOTAL_MEMORY=X with X higher than the current value 1073741824, (2) compile with -s ALLOW_MEMORY_GROWTH=1 ...
-
原因
- 当前设备内存太小
- 当前设备空余内存不足
- 当前设备 [操作系统]--分配-->[浏览器]--分配-->[Tab标签]--分配-->[播放器] 的内存不足
-
解决方式
- 换一台高性能设备
- 关闭其他耗能（以及内存）应用、进程
- 换小版本WASM dist目录
- 引入 missile-512mb 版本
- 引入 missile-256mb 版本
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到服务器，重启服务器即可
add_header Cross-Origin-Opener-Policy 'same-origin';
add_header Cross-Origin-Embedder-Policy 'require-corp';
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里所支持的播放格式、编码
- 检查是32还是64位系统：需要64位
- 检查浏览器是否位支持WASM的浏览器：需要支持
- 升级Chrome版本
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 版本 dist目录
首先打开浏览器的控制台查看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里面进行操作。
基于webpack的工程例如vuecli,create-react-app可以把dist拷贝进你项目里面的静态目录下。一般是public目录。然后按照exmaple示例文件进行引入。
请注意index.html文件。
基于Vite的工程。就只能采用window的方式进行引入。因为vite无法识别非esm的模块。具体参照vite_vue_ts.
本SDK提供了d.ts声明文件.您如果是webpack用户在引入SDK的时候会自动获取类型提示。Vite用户则需要把本项目 sdk 内置的d.ts导入到你自己的全局d.ts里面以获取类型支持。
您可以通过ISSUE的方式,按照格式模板进行提问,或者加群925466059得到帮助。提问前请遵守提问的智慧。
您可以通过
ISSUE的方式,按照格式模板进行提问,或者加QQ群925466059得到帮助。提问前请遵守提问的智慧。
- 提问注意点（杜绝消极提问）：
- 严格按照ISSUE模板提供必要信息
- 严禁
牙膏主义方式提问：禁止挤牙膏问答式提问(效率低下，维护者作者们都很忙，请一次性把所有信息吐出来（多打点字，多发点图）- 严禁私聊（具体原因看WIKI首页【作者说】为什么不建议私聊）
如果不按照以上方式提问题，作者无义乌积极回应。
| 微信 | 支付宝 | PayPal |
|---|---|---|
 |
 |
TODO |