快手短剧播放器uniapp怎样引入与对接？

uniApp前端微短剧项目开源分享
开源地址：git开源下载地址
  
  
快手短剧播放器uniapp怎样引入与对接？

1.引入短剧播放器

   组件名: playlet
作用：专用于短剧行业播放器，内置提供内容库资源、提供上下滑交互能力，同一短剧C端交互
引入：打开源码视图或点击快手小程序配置appid
  

   在 pages.json 对应页面的 style -> usingComponents 引入组件：
  

2.创建文件kscomponents组件

   由于这里使用的是uniapp开发的，所以需要用到小程序原生组件
创建文件kscomponents
如下图所示
  

3.local-stream.js文件说明

   下面这个是官方的使用实例代码

1. <!-- 使用示例 -->
2. // js
3. Page({
4.   data: {
5.                 playletAble: ks.canIUse('playlet'),// 用于判断当前播放是是否可用，不可用时，需降级为开发者原有播放能力
6.                 playId: 'kmp5197435572253913798',
7.             playletId: 'kmp5220516518114815260',
8.             episodeIdList: [
9.                                         "kmp5214324068735814356",
10.                                 "kmp5197435572253913798",
11.                                 "kmp5190117222967049206",
12.                                 "kmp5252041717489368041",
13.                                 "kmp5210101945142343238",
14.                                 "kmp5233464369157754857",
15.                                 "kmp5207850144175705929",
16.                                 "kmp5232056994883566342",
17.                                 "kmp5199124419888573424",
18.                                         "kmp5228679295623438411"],
19.                 extParams: {
20.                freeList: [1,2], // 已付费的剧集号，对应上传资源库的episodeNumber
21.                payedList: [3,4], // 已付费的剧集号，对应上传资源库的episodeNumber
22.                configList: {
23.                  1: { //   
24.                     "like": {
25.                       "liked": true, // 是否已点赞
26.                       "likedCount": 123, // 点赞数
27.                     },
28.                     "collect": {
29.                       "hasCollected": true, // 是否已收藏
30.                     },
31.                     "operation": {
32.                       "operationUrl": "http://xxx.com/xx.png", // 运营位图片
33.                       "operationDesc": "运营位" // 运营位描述
34.                     },
35.                     "follow": {
36.                       "avatar": "http://xxx.com/xx.png", // 头像
37.                       "followed": true  // 是否已关注
38.                     }
39.                   }
40.                },
41.                sourceList: {
42.                   "filingNumber": "备案号",
43.                   "totalEpisodeNumber": "",
44.                   "episodeList": [
45.                     {
46.                       "coverUrl": "封面链接",
47.                       "introduction": "简介",
48.                       "videoUrl": "http://xxx/xxx.mp4",
49.                       "duration": "600",
50.                       "episodeNumber": 1
51.                     }
52.                   ]
53.                 }
54.       }
55.   },
56. })
57. // ksml
58. <playlet
59.     ks:if="{{playletAble}}" // 判断当前短剧播放器是否可用
60.     class="my-playlet-class"
61.     playletId="{{ playletId }}" // 剧目id
62.     episodeIdList="{{ episodeIdList }}"  //  剧集id
63.     playId="{{playId}}"
64.     extParams="{{extParams}}"
65.     >
66. </playlet>
67. <view ks:else>
68.         <!-- 原有播放能力 -->
69. </view>

复制代码

  这里是用uniapp开发的也需要团体进行改造、如下所示，将会在代码中进行备注

1. Component({
2.         properties: {
3.                 playletAble: {
4.                         type: Boolean,
5.                         value: true,
6.                 },
7.                 item: {
8.                         type: Object,
9.                         value: {},
10.                         observer: function(newVal) {
11.                                 // 当 item 属性变化时调用 getVideo
12.                                 if (newVal && newVal.playletId) {
13.                                         this.getVideo();
14.                                 }
15.                         }
16.                 },
17.                 payplayId: {
18.                         type: String,
19.                         value: {},
20.                         observer: function(payplayId) {
21.                                 if (payplayId) {
22.                                         this.getpayplayIdFreeList(payplayId)
23.                                 }
24.                         }
25.                 },
26.                 buyPlayIdStatus: { // 0 等于切换时已购买需要刷新界面 1表示免费的可直接播放 3表示未解锁的
27.                         type: Number,
28.                         value: {},
29.                 },
30.         },
31.         observers: {},
32.         data: {
33.                 show:false,
34.                 activePlayIndex: 1,
35.                 playletAble: ks.canIUse('playlet'), // 用于判断当前播放是否可用，不可用时，需降级为开发者原有播放能力
36.                 playId: '',// 这个是剧目ID，用户点击剧目进入详情的时候传这个ID过来
37.                 playletId: '',// 这个是剧集ID，传了剧集ID过来之后就会默认播放这一集的视频，比如历史播放到第几集这个用的比较频繁
38.                 episodeIdList: [], // 这个是剧集列表的ID，传递数组过来就行
39.                 extParams: {
40.                         freeList: [1, 2, 3], // 免费的剧集号，对应上传资源库的episodeNumber
41.                         payedList: [4, 5], // 付费的剧集号，对应上传资源库的episodeNumber
42.                         configList: {
43.                                 1: {   
44.                                         "like": {
45.                                                 "liked": false, // 是否已点赞
46.                                                 "likedCount": 123 // 点赞数
47.                                         },
48.                                         "collect": {
49.                                                 "hasCollected": false // 是否已收藏
50.                                         },
51.                                         "operation": {
52.                                                 "operationUrl": "http://xxx.com/xx.png", // 运营位图片
53.                                                 "operationDesc": "运营位" // 运营位描述
54.                                         },
55.                                         "follow": {
56.                                                 "avatar": "http://xxx.com/xx.png", // 头像
57.                                                 "followed": false // 是否已关注
58.                                         }
59.                                 },
60.                         },
61.                         sourceList: {
62.                                 "filingNumber": "备案号",
63.                                 "totalEpisodeNumber": "",
64.                                 "episodeList": [{
65.                                         "coverUrl": "封面链接",
66.                                         "introduction": "简介",
67.                                         "videoUrl": "http://xxx/xxx.mp4",
68.                                         "duration": "600",
69.                                         "episodeNumber": 1
70.                                 }]
71.                         },
73.                 },

复制代码

4.用户活动事件

   调用bindaction，里边有event事件，使用时会返回对应的event.detail.type ，拿到之后就可以进行对应的使用了
  

1. bindaction(event) {
2.                         const self = this; // 保存 `this` 的引用
3.                         // this.getVideo()
4.                         console.log('行为事件:', event.detail);
5.                         console.log('行为事件:', event.detail.type);
6.                         // console.log('item获取到的数据:', this.data.item);
7.                         console.log('Received item in component1:', this.properties.item);
8.                         if (event.detail.type == 'operation') {
9.                                 // 运营位置
10.                                 ks.redirectTo({
11.                                         url: 'pages/home/bonus/bonus'
12.                                 });
13.                         } else if (event.detail.type == 'like') {
14.                                 const events = 'like'
15.                                 var event = {
16.                                         detail:{
17.                                                 playletId: self.data.episodeIdList[event.detail.episodeNumber - 1],
18.                                                 episodeNumber: event.detail.episodeNumber
19.                                         }
20.                                 }
21.                                 console.log('暂停event:', event);
22.                                 self.bindpause(event)
23.                                 self.getState(event.detail.episodeNumber, events)
24.                                
25.                         } else if (event.detail.type == 'collect') {
26.                                 const events = 'collect'
27.                                 self.getState(event.detail.episodeNumber, events)
28.                         } else if (event.detail.type == 'share') {
29.                                 // 转发
30.                         }
31.                 },

复制代码

4.local-stream.ksml文件参考如下

1. <view class="centert-lsty"  ks:if="{{show}}" >
2.         <playlet
3.                   ks:if="{{playletAble}}"
4.                   class="my-playlet-class"
5.                   playletId="{{ playletId }}"
6.                   episodeIdList="{{ episodeIdList }}"
7.                   playId="{{ playId }}"
8.                   extParams="{{ extParams }}"
9.                   showBottomSafeArea = "{{false}}"
10.                   showShare = "{{true}}"
11.                   bind:play="bindplay"
12.                   bind:change="bindchange"
13.                   bind:action="bindaction"
14.                   bind:error="binderror"
15.                   bind:pause="bindpause"
16.                   showBottomSafeArea="{{true}}"
17.                   objectFit="cover"
18.           >
19.         </playlet>
20.         <slot></slot>
21. </view>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。