Skip to content

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

Numberwolf-Yanlong edited this page Oct 23, 2022 · 25 revisions

Q:为什么我的265没有走硬解码播放 而走了软解码很卡?或者为什么硬解码播放提示 IO 失败?

  • 原因

    • 你的浏览器不支持硬解码,所以会根据策略走CPU软解码
    • 硬解码播放失败
      • MP4: 你的MP4是否是 hvc1 的tag? 请参考WIKI 实例的ffmpeg转码 加命令 -vtag hvc1 -movflags faststart
      • FLV: 你的FLV Chunk 是否是标准的
  • 判断浏览器是否支持 265硬解:(JS代码)

if (MediaSource.isTypeSupported('video/mp4;codecs=hvc1.1.1.L63.B0"') === true) alert("支持");
else alert("不支持");

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

  • 原因

    • 当前设备内存太小
    • 当前设备空余内存不足
    • 当前设备 [操作系统]--分配-->[浏览器]--分配-->[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 版本

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

应该用的是 dist-multi-thread 目录的 多线程版本包; 此版本必须 遵循 2/3条修改,并且配合HTTPS头才可以

**0)最简单的方法 **

切换为 dist目录的单线程版本,兼容性较强

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';

最好在server下面也加一下
image


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

Q:报错Uncaught RangeError: Start offset undefined is outside the bounds of the buffer

  • 检查是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

  • 原因:你当前页面初始化的 播放器 对象过多,需要更换SDKWASM对应版本

  • 更换方式


Q:报错CompileError: WebAssembly.instantiate(): expected magic word xxxxxxxxxxxxxxxxx

  • 原因:你当前浏览器对WASM不支持、或者是假性支持。

  • 更换方式

换最新chrome浏览器试试。 不要过360等国产浏览器


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

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


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

PlayerConfignumberheight可能无法满足您的需求。这时候您需要手动获取播放器的实例也就是PlayerConfig里面的playerDOM元素。 原生用户可以使用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得到帮助。提问前请遵守提问的智慧。


我还有其他问题。

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

Clone this wiki locally