Uniapp 对接抖音短剧播放器 video-player 坑点解决

在抖音针对短剧新出的 video-player 组件对接过程中，如果是原生的话倒还好，要是 uniapp 还是有不少细节坑点的，基本文档上都有存在，这里重点列举几个：

1、uniapp 需要通过小程序原生封装一下 video-player 组件导入到 uniapp 工程使用。这里有现成封装的 video-player 原生Demo。

2、uniapp 只支持在页面级配置 usingComponents 组件使用，也就是封装的 video-player 只能在页面级使用，原生可以在组件里面嵌套，但是 uniapp 也不是不可以组件级别使用，需要在编译出小程序源码后使用 video-player 的页面子组件配置文件内添加 video-player 的引用配置：

这里可以通过 nodejs、python 等自动化脚本自行添加，这样就不需要每次都去操作。

3、每次进入播放页，播放器无法进行播放或看不到播放器，或时好时坏，或拿不到播放器的任何回调，比如开始播放、播放进度等。原因是没有开启行业 SDK 的权限配置，配置一下，权限生效就正常了。经过测试，权限配置的 package.json 在同一个 appid 下只需要首次开权限存在就行，权限开了后下次去掉也没问题的。但是依然可以像上面一样，使用自动化脚本完成这个文件的生成，因为这个文件是需要存在编译出来的源码项目根目录中的，一直存在自然更好，免得出意外。

4、使用 uni.createVideoContext('myVideo', this) 获取播放器的上下文后，无法进行操作播放器暂停、播放等，原因是需要通过小程序原生 tt:ref 获取到 video-player 本身，将这个获取到的 ref 传入到 createVideoContext('myVideo', ref) 第二个参数，平常其他小程序只需要传入 this 即可，但是 video-player 不行。这里有现成封装的 video-player 原生Demo 这个 demo 中封装的 video-player 就有获取 ref 的回调，直接使用即可：
```
<tt-video-player
    id="myVideo"
    album-id="7301931296073351730" 
    episode-id="7301931329208189450"
    :object-fit="drama.isVerScreen ? 'cover' : 'contain'"
    :inner-style="`position: left: 0; absolute; width: 100vw; background-color: orange; ${videoStyle}`"
    :autoplay="true"
    :muted="false"
    :controls="false"
    :show-progress="false"
    :show-fullscreen-btn="false"
    @timeupdate="timeUpdate"
    @ref="refHandler"
    @error="playError"
></tt-video-player>
```
```
// 获取播放器 ref
refHandler (ref) {
      
      
   // 这样就能进行操作 video-player 播放器了
   this.videoContext = uni.createVideoContext('myVideo', ref)
},
```
4、如果通过 inner-class 或 class 无法修改播放器的样式，可以使用 inner-style 直接修改样式，这种一定会生效。
uniapp 工程使用示例

uniapp 配置 usingComponents 只支持页面级，但是在博主工程中，播放器是在 uniapp 的组件内使用，而非页面级，这就导致编译出源码后，组件内的播放器没有配置链接关联，所以博主使用的是自动化脚本在编译玩代码后完成对小程序源码的修改，配置好组件内的播放器 usingComponents 配置，以及生成行业权限的 package.json 文件。

Uniapp 对接抖音短剧播放器 video-player 坑点解决

猜你喜欢