快手短剧播放器uniapp如何引入与对接?

uniApp前端微短剧项目开源分享

开源地址:git开源下载地址

文章目录

快手短剧播放器uniapp如何引入与对接?

1.引入短剧播放器

组件名: playlet

作用:专用于短剧行业播放器,内置提供内容库资源、提供上下滑交互能力,统一短剧C端交互

引入:打开源码视图或点击快手小程序配置appid

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

2.创建文件kscomponents组件

由于这里使用的是uniapp开发的,所以需要用到小程序原生组件

创建文件kscomponents

如下图所示

3.local-stream.js文件说明

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

javascript 复制代码
 <!-- 使用示例 -->
// 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开发的也需要整体进行改造、如下所示,将会在代码中进行备注

javascript 复制代码
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 ,拿到之后就可以进行对应的操作了

javascript 复制代码
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文件参考如下

javascript 复制代码
<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>
相关推荐
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
css趣多多12 小时前
使用git管理uniapp项目
uni-app
前端小雪的博客.1 天前
Uniapp 小程序复制、粘贴功能实现
小程序·uni-app
竣子好逑1 天前
uniapp v2 组件
前端·uni-app
筱歌儿1 天前
uniapp 阿里云点播 播放bug
uni-app·bug
陆康永1 天前
uniapp-X 对象动态取值
uni-app
林涧泣1 天前
【Uniapp-Vue3】登录成功后获取当前用户信息并渲染到页面中
前端·javascript·uni-app
前端小雪的博客.1 天前
Uniapp 小程序接口封装与使用
微信小程序·uni-app
离别又见离别1 天前
uniapp 本地数据库多端适配实例(根据运行环境自动选择适配器)
数据库·vue.js·sqlite·uni-app·db
香菜的开发日记1 天前
uniapp 系统学习,从入门到实战(四)—— 页面与路由管理
uni-app