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

简介: 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 文件。


相关文章
|
2月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐播放器附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的音乐播放器附带文章和源代码设计说明文档ppt
22 3
|
17天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的音乐播放器的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的音乐播放器的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的农商对接系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的农商对接系统的详细设计和实现
|
26天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的音乐播放器小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的音乐播放器小程序附带文章源码部署视频讲解等
8 0
|
2月前
|
缓存 JSON 安全
【Uniapp 专栏】Uniapp 与后端接口对接的实战要点
【5月更文挑战第12天】在 Uniapp 项目开发中,成功对接后端接口至关重要。要点包括:深入理解后端提供的接口文档,确保数据格式(如 JSON)正确处理,选择合适的请求方式(如 GET、POST),设置正确的请求头,做好错误处理和数据缓存策略,确保安全性(如使用 HTTPS 和令牌验证)并进行全面测试。同时,进行版本管理和团队协作,与后端开发人员保持良好沟通,以实现高效、稳定的接口对接。
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐播放器的设计和实现附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的音乐播放器的设计和实现附带文章和源代码部署视频讲解等
10 0
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的音乐播放器的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的音乐播放器的详细设计和实现
16 0
|
7月前
|
对象存储
uniapp对接oss视频上传+压缩
uniapp对接oss视频上传+压缩
398 0
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
10 2
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
8 1