- 在抖音针对短剧新出的 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
文件。