【QA解答】初始化失败系列
- Q: MP4放进去以后一直加载不成功怎么办
- Q:为什么HEVC/H.265裸流放进去不能播放？
- Q:播放器自动播放没有声音？
- Q:为什么有些看完QA和咨询后 发现有些视频可以在VLC播放 但是不能在网页播放？
- Q:为什么我的265没有走硬解码播放 而走了软解码很卡？或者为什么硬解码播放提示 IO 失败?
- Q:报错WebAssembly.Memory(): could not allocate memory 怎么解决
- 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 ...
- 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:报错CompileError: WebAssembly.instantiate(): expected magic word xxxxxxxxxxxxxxxxx
- Q:为什么我按照 demo 集成到项目里面无法正常运行呢?
- Q: 我该如何在 Webpack 或者 vite 环境下使用该 SDK？
- Q: 我如果是使用 typescript 开发，我该如何获取类型提示?
- Q: 我如果无法在该指南获取帮助,我该怎么获得帮助？
-
确认
moov box是否在mdat box之前- 使用FFMpeg 确定 moov位置:
输出如下，
ffprobe 视频.mp4 -v trace 2>&1 | grep 'mdat\|moov'
type:'moov'在type:'mdat'之前就是正常的，否则就是错误。[mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fd30d004400] type:'moov' parent:'root' sz: 7993 36 815638 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fd30d004400] type:'mvhd' parent:'moov' sz: 108 8 7985 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fd30d004400] type:'trak' parent:'moov' sz: 5480 116 7985 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fd30d004400] type:'trak' parent:'moov' sz: 2268 5596 7985 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fd30d004400] type:'udta' parent:'moov' sz: 129 7864 7985 [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fd30d004400] type:'mdat' parent:'root' sz: 807609 8037 815638
- 解决方法
- 参考 【视频转码指南】如何用FFmpeg编码合格的 直播 点播 视频 的
mp4 将moov box前置部分
- 参考 【视频转码指南】如何用FFmpeg编码合格的 直播 点播 视频 的
- 使用FFMpeg 确定 moov位置:
-
大体确定MOOV的范围 调整
coreProbePart参数大小(0-1 = 0%-100%)
-
检查265裸流的尾缀是否
.265/.h265/.hevc -
检查给播放器的URL, 是否是带
http://开头的路径, 例如http://localhost:8080/test.h265这样子可以；
不可以/test.h265
-
因为Chrome等浏览器的安全策略，
为了防止有网站突然放声音吓到人所以禁止在第一次用户交互前播放声音Chrome does not allow autoplay if the video is not muted.
So to autoplay video you need to set both autoplay and muted attribute.
- 所以我们自动播放是静音机制，用户也可以自行将
ignoreAudio配置改为1也可以。
- 所以我们自动播放是静音机制，用户也可以自行将
-
那什么时候
自动播放可以有声音呢？- 根据安全策略，需要和页面有交互：
- 只要发生任何
点击行为就会有声音（具体做法：比如进入之后给用户一个弹窗、或者音量直接最低，让用户手动调节【这样子就会发生点击】）
- 只要发生任何
- 或者自行修改Chrome安全配置，允许自动播放带声音媒体。
- 根据安全策略，需要和页面有交互：
-
1）根本原因：浏览器上面我们用的probe decoder 是浏览器底层内核，因为这个改不了（这也是 大家疑惑 vlc可以 但是为啥 网页就不行
-
2）表面原因：
背景：目前 265是我们自己写的播放内核，但是264是【引用 1】条件的浏览器内核。所以 probe transmux decode等失败。
https://github.com/numberwolf/h265web.js/issues/196
-
原因
- 你的浏览器不支持硬解码，所以会根据策略走CPU软解码
- 硬解码播放失败
- MP4: 你的MP4是否是 hvc1 的tag? 请参考WIKI 实例的ffmpeg转码 加命令
-vtag hvc1 -movflags faststart - FLV: 你的FLV Chunk 是否是标准的
- MP4: 你的MP4是否是 hvc1 的tag? 请参考WIKI 实例的ffmpeg转码 加命令
-
判断浏览器是否支持 265硬解：(JS代码)
if (MediaSource.isTypeSupported('video/mp4;codecs=hvc1.1.1.L63.B0"') === true) alert("支持");
else alert("不支持");-
原因
- 当前设备内存太小
- 当前设备空余内存不足
- 当前设备 [操作系统]--分配-->[浏览器]--分配-->[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 版本
**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下面也加一下
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目录
-
原因：你当前浏览器对WASM不支持、或者是假性支持。
-
更换方式
换最新chrome浏览器试试。 不要过360等国产浏览器
首先打开浏览器的控制台查看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 |