uniApp前端微短剧项目开源分享
开源地址：git开源下载地址
文章目录
- 快手短剧播放器uniapp如何引入与对接？
- 1.引入短剧播放器
- 2.创建文件kscomponents组件
- 3.local-stream.js文件说明
- 4.用户行为事件
- 4.local-stream.ksml文件参考如下
快手短剧播放器uniapp如何引入与对接？
1.引入短剧播放器
组件名: playlet
作用：专用于短剧行业播放器，内置提供内容库资源、提供上下滑交互能力，统一短剧C端交互
引入：打开源码视图或点击快手小程序配置appid
在 pages.json 对应页面的 style -> usingComponents 引入组件：
2.创建文件kscomponents组件
由于这里使用的是uniapp开发的，所以需要用到小程序原生组件
创建文件kscomponents
如下图所示
3.local-stream.js文件说明
下面这个是官方的使用实例代码
<!-- 使用示例 -->
// js
Page({
data: {
playletAble: ks.canIUse('playlet'),// 用于判断当前播放是是否可用，不可用时，需降级为开发者原有播放能力
playId: 'kmp5197435572253913798',
playletId: 'kmp5220516518114815260',
episodeIdList: [
"kmp5214324068735814356",
"kmp5197435572253913798",
"kmp5190117222967049206",
"kmp5252041717489368041",
"kmp5210101945142343238",
"kmp5233464369157754857",
"kmp5207850144175705929",
"kmp5232056994883566342",
"kmp5199124419888573424",
"kmp5228679295623438411"],
extParams: {
freeList: [1,2], // 已付费的剧集号，对应上传资源库的episodeNumber
payedList: [3,4], // 已付费的剧集号，对应上传资源库的episodeNumber
configList: {
1: { //
"like": {
"liked": true, // 是否已点赞
"likedCount": 123, // 点赞数
},
"collect": {
"hasCollected": true, // 是否已收藏
},
"operation": {
"operationUrl": "http://xxx.com/xx.png", // 运营位图片
"operationDesc": "运营位" // 运营位描述
},
"follow": {
"avatar": "http://xxx.com/xx.png", // 头像
"followed": true // 是否已关注
}
}
},
sourceList: {
"filingNumber": "备案号",
"totalEpisodeNumber": "",
"episodeList": [
{
"coverUrl": "封面链接",
"introduction": "简介",
"videoUrl": "http://xxx/xxx.mp4",
"duration": "600",
"episodeNumber": 1
}
]
}
}
},
})
// ksml
<playlet
ks:if="{{playletAble}}" // 判断当前短剧播放器是否可用
class="my-playlet-class"
playletId="{{ playletId }}" // 剧目id
episodeIdList="{{ episodeIdList }}" // 剧集id
playId="{{playId}}"
extParams="{{extParams}}"
>
</playlet>
<view ks:else>
<!-- 原有播放能力 -->
</view>
这里是用uniapp开发的也需要整体进行改造、如下所示，将会在代码中进行备注
Component({
properties: {
playletAble: {
type: Boolean,
value: true,
},
item: {
type: Object,
value: {},
observer: function(newVal) {
// 当 item 属性变化时调用 getVideo
if (newVal && newVal.playletId) {
this.getVideo();
}
}
},
payplayId: {
type: String,
value: {},
observer: function(payplayId) {
if (payplayId) {
this.getpayplayIdFreeList(payplayId)
}
}
},
buyPlayIdStatus: { // 0 等于切换时已购买需要刷新界面 1表示免费的可直接播放 3表示未解锁的
type: Number,
value: {},
},
},
observers: {},
data: {
show:false,
activePlayIndex: 1,
playletAble: ks.canIUse('playlet'), // 用于判断当前播放是否可用，不可用时，需降级为开发者原有播放能力
playId: '',// 这个是剧目ID，用户点击剧目进入详情的时候传这个ID过来
playletId: '',// 这个是剧集ID，传了剧集ID过来之后就会默认播放这一集的视频，比如历史播放到第几集这个用的比较频繁
episodeIdList: [], // 这个是剧集列表的ID，传递数组过来就行
extParams: {
freeList: [1, 2, 3], // 免费的剧集号，对应上传资源库的episodeNumber
payedList: [4, 5], // 付费的剧集号，对应上传资源库的episodeNumber
configList: {
1: {
"like": {
"liked": false, // 是否已点赞
"likedCount": 123 // 点赞数
},
"collect": {
"hasCollected": false // 是否已收藏
},
"operation": {
"operationUrl": "http://xxx.com/xx.png", // 运营位图片
"operationDesc": "运营位" // 运营位描述
},
"follow": {
"avatar": "http://xxx.com/xx.png", // 头像
"followed": false // 是否已关注
}
},
},
sourceList: {
"filingNumber": "备案号",
"totalEpisodeNumber": "",
"episodeList": [{
"coverUrl": "封面链接",
"introduction": "简介",
"videoUrl": "http://xxx/xxx.mp4",
"duration": "600",
"episodeNumber": 1
}]
},
},
4.用户行为事件
调用bindaction，里边有event事件，操作时会返回对应的event.detail.type ，拿到之后就可以进行对应的操作了
bindaction(event) {
const self = this; // 保存 `this` 的引用
// this.getVideo()
console.log('行为事件:', event.detail);
console.log('行为事件:', event.detail.type);
// console.log('item获取到的数据:', this.data.item);
console.log('Received item in component1:', this.properties.item);
if (event.detail.type == 'operation') {
// 运营位置
ks.redirectTo({
url: 'pages/home/bonus/bonus'
});
} else if (event.detail.type == 'like') {
const events = 'like'
var event = {
detail:{
playletId: self.data.episodeIdList[event.detail.episodeNumber - 1],
episodeNumber: event.detail.episodeNumber
}
}
console.log('暂停event:', event);
self.bindpause(event)
self.getState(event.detail.episodeNumber, events)
} else if (event.detail.type == 'collect') {
const events = 'collect'
self.getState(event.detail.episodeNumber, events)
} else if (event.detail.type == 'share') {
// 转发
}
},
4.local-stream.ksml文件参考如下
<view class="centert-lsty" ks:if="{{show}}" >
<playlet
ks:if="{{playletAble}}"
class="my-playlet-class"
playletId="{{ playletId }}"
episodeIdList="{{ episodeIdList }}"
playId="{{ playId }}"
extParams="{{ extParams }}"
showBottomSafeArea = "{{false}}"
showShare = "{{true}}"
bind:play="bindplay"
bind:change="bindchange"
bind:action="bindaction"
bind:error="binderror"
bind:pause="bindpause"
showBottomSafeArea="{{true}}"
objectFit="cover"
>
</playlet>
<slot></slot>
</view>
