【QA解答】开始播放后遇到的问题系列

• Q: 为什么我播放 HEVC/H.265编码视频 卡顿?
• Q: 报错Uncaught (in promise) DOMException: play() failed because the use didn't interact with the document first
• Q: MP4放进去以后一直加载不成功怎么办
• Q:播放器自动播放没有声音？
• Q:如何改变播放器的窗口大小呢?比如我想自定义播放器的viewPort?
• Q: 我该如何在 Webpack 或者 vite 环境下使用该 SDK？
• Q: 我如果无法在该指南获取帮助,我该怎么获得帮助？

---

Q: 为什么我播放 HEVC/H.265编码视频 卡顿?

• 本SDK采用软解码,受限于用户设备,如果设备良好,请优先检查视频码率以及格式。

• 如果电脑设备性能过低、空闲资源过少，也会导致卡顿。

• 如果想测试当前设备性能，请做好以下准备

  • 关闭设备上耗能软件
  • 浏览器只开当前播放tab
  • 请不要打开Console控制台
  • 播放界面最好不要添加过于复杂的UI（开发人员水平参差不齐，业务页面的UI以及逻辑会对播放器性能造成不同程度影响！）

• 检查你的页面是否有阻塞、验证占用资源、时间调度的代码。

• 推荐视频编码（对于大多数用户的电脑设备）：

  • 直播推荐 1080p/720p 不高于300kbps~1Mbps（帧率不高于30fps）
  • 点播推荐 1080p/720p 不高于2Mbps（帧率不高于60fps）

---

Q: 报错Uncaught (in promise) DOMException: play() failed because the use didn't interact with the document first

• 因为浏览器的安全限制，不允许自动播放、未经用户交互情况下进行播放（一般包含音频）
  • 解决1：在初始化播放器的配置的extInfo里面，开启 autoPlay:true
  • 解决2：关闭浏览器 对于 自动播放的安全限制（具体方法自己百度）
  • 解决3：视频流去掉音频即可

---

Q: MP4放进去以后一直加载不成功怎么办

• 确认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前置部分

• 大体确定MOOV的范围 调整coreProbePart参数大小(0-1 = 0%-100%)

  • 

---

Q:播放器自动播放没有声音？

• 因为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安全配置，允许自动播放带声音媒体。

---

为什么有些看完QA和咨询后 发现有些视频可以在VLC播放 但是不能在网页播放？

• 1）根本原因：浏览器上面我们用的probe decoder 是浏览器底层内核，因为这个改不了（这也是 大家疑惑 vlc可以 但是为啥 网页就不行

• 2）表面原因：

背景：目前 265是我们自己写的播放内核，但是264是【引用 1】条件的浏览器内核。所以 probe transmux decode等失败。

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得到帮助。提问前请遵守提问的智慧。