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


