短剧播放器01：插件接入流程，如何跳转到播放器页面获取后台加密数据后播放短剧剧集_js中 短剧视频怎么接入前端的

主要解决的问题是短剧播放器插件在uniApp中的如何修改、如何注册及如何调用的问题
uniApp前端微短剧项目开源分享
开源地址：git开源下载地址

一、注册播放器页面的onLaunch事件

在App.vue里进行引入注册，只需要注册一次，如果你在其他地方也注册了，会导致将来再进入播放器之后数据重复调用的问题！

<script>
	const playletPlugin = requirePlugin("playlet-plugin");
	const PlayerManager = require("./utils/playerManager.js");
	export default {
		onLaunch: function(options) {
			playletPlugin.onPageLoad(this._onPlayerLoad.bind(this))
		},
		methods:{
			_onPlayerLoad(info) {
				const playerManager = new PlayerManager()
				playerManager._onPlayerLoad(info)
			},
		}
	}
<script/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二、复制并修改playletPlugin.js文件

因为我们用的是uniApp开发的而不是微信小程序原生开发，所以我们需要将官方提供的demo文件里边的playerManager.js复制到我们项目中，这个文件是整个短剧播放器插件的核心，放到utils中即可

官方示例：

var playletPlugin = requirePlugin("playlet-plugin");
// 点击按钮触发此函数跳转到播放器页面
function navigateToPlayer(obj) {
  // 下面的${dramaId}变量,需要替换成小程序管理后台的媒资管理上传的剧的dramaId
  // 变量${srcAppid}是提审方appid
  // 变量${serialNo}是剧集id
  // 变量${extParam}是分享参数，分享的卡片和二维码会在分享的链接上携带此参数
  const { extParam, dramaId, srcAppid } = obj
  wx.navigateTo({
    url: `plugin-private://wx94a6522b1d640c3b/pages/playlet/playlet?dramaId=${dramaId}&srcAppid=${srcAppid}&extParam=${extParam || ''}`
  })
}
function deepClone(obj) {  
  if (typeof obj !== 'object' || !obj) return obj
  let newObj = obj instanceof Array ? [] : {}  
  for (let key in obj) {    
    if (typeof obj[key] === 'object') {      
      newObj[key] = deepClone(obj[key])    
    } else {
      newObj[key] = obj[key]    
    }
  }
  return newObj
}

const proto = {
  data: { // 可通过this.data访问
    playerId: '',
    arr: [],
    b: null
  },
  _onPlayerLoad(info) {
    console.log('onPlayerLoad info', info, 'data', this.data)
    this.data.playerId = info.playerId
    const pm = playletPlugin.PlayletManager.getPageManager(info.playerId)
    this.pm = pm
    // encryptedData是经过开发者后台加密后(不要在前端加密)的数据，具体实现见下面的加密章节
    this.getEncryptData({serialNo: info.serialNo}).then(res => {
      // encryptedData是后台加密后的数据，具体实现见下面的加密章节
      pm.setCanPlaySerialList({
        data: res.encryptedData,
        freeList: [{ // 1~10集是免费剧,data里面的字段也必须至少设置1~10集可播放
          start_serial_no: 1,
          end_serial_no: 10
        }],
      })
    })
    // 需要解锁的事件
    pm.onCheckIsCanPlay(this.onCheckIsCanPlay)
    this._initShare()
    // 参考文档章节“数据上报”
    pm.onDataReport((obj) => {
      if (obj.event === playletPlugin.REPORT_DATA_EVENTS.VIDEO_PLAY
        || obj.event === playletPlugin.REPORT_DATA_EVENTS.CHANGE_SERIAL
        || obj.event === playletPlugin.REPORT_DATA_EVENTS.VIDEO_PAUSE
      ) {
        console.log('>>>>onDataReport obj', obj)
      }
    })
    // 设置右侧固定运营位置跳转路径
    pm.setActivityInfo({
      url: ''
    })
    // 设置运营区域
    pm.updateOpenArea({
      showLeft: false,
      showRight: false,
      leftsideAreaList: [
        {
          left: 16, // 类似绝对定位的样式
          top: 20,
          width: 72,
          height: 32
        },
      ],
      ext: 'extInfo',
    })
  },
  _initShare() {
    const pm = this.pm
    // 关于分享的处理
    // 开启分享以及withShareTicket
    pm.setDramaFlag({
      share: true,
      withShareTicket: true
    })
    // 获取分享参数,页面栈只有短剧播放器一个页面的时候可获取到此参数
    // 例如从分享卡片进入、从投流广告直接跳转到播放器页面，从二维码直接进入播放器页面等情况
    playletPlugin.getShareParams().then(res => {
      console.log('getLaunch options query res', res)
      // 关于extParam的处理，需要先做decodeURIComponent之后才能得到原值
      const extParam = decodeURIComponent(res.extParam)
      console.log('getLaunch options extParam', extParam)
      // 如果设置了withShareTicket为true，可通过文档的方法获取更多信息
      // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
      const enterOptions = wx.getEnterOptionsSync()
      console.log('getLaunch options shareTicket', enterOptions.shareTicket)
    }).catch(err => {
      console.log('getLaunch options query err', err)
    })
    // 设置分享参数
    pm.setExtParam('scene')
  },
  onCheckIsCanPlay(param) {
    // TODO: 碰到不可以解锁的剧集，会触发此事件，这里可以进行扣币解锁逻辑，如果用户无足够的币，可调用下面的this.isCanPlay设置
    console.log('onCheckIsCanPlay param', param)
    var serialNo = param.serialNo
    this.getEncryptData({serialNo: serialNo}).then(res => {
      // encryptedData是后台加密后的数据，具体实现见下面的加密章节
      this.pm.isCanPlay({
        data: res.encryptedData,
        serialNo: serialNo,
      })
    })
  },
  //跳转播放器界面获取加密数据
  getEncryptData(obj) {
    const { serialNo } = obj
    // TODO: 此接口请求后台，返回下面的setCanPlaySerialList接口需要的加密参数
    const { srcAppid, dramaId } = this.pm.getInfo()
    console.log('getEncryptData start', srcAppid, dramaId, serialNo)
    return new Promise((resolve, reject) => {
      // TODO: 开发者后台需要实现此接口，相关的代码node的示例可参考node目录
      wx.request({
        url: '放加密的接口地址',
        data: {
          srcAppid: srcAppid,
          dramaId: dramaId,
          serialNo: serialNo
        },
        success: (res) => {
          console.log('videoPlayer getCanPlayList res', res)
          resolve({
            encryptedData: res.data.encryptedData
          })
        },
        fail: (fail) => {
          reject(fail)
        }
      })
    })
  },

}
function PlayerManager() {
  var newProto = Object.assign({}, proto)
  for (const k in newProto) {
    if (typeof newProto[k] === 'function') {
      this[k] = newProto[k].bind(this)
    } else if (typeof newProto[k] === 'object') {
      if (!newProto[k]) {
        this[k] = newProto[k]
      } else {
        this[k] = deepClone(newProto[k])
      }
    }
  }
}

PlayerManager.navigateToPlayer = navigateToPlayer
module.exports = PlayerManager

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

三、更改getEncryptData

更改说明：我们的业务是SAAS平台，开发一套公司旗下的所有小程序均可用，我们是通过以下参数来去做的数据隔离
dramaId：主体公司ID，这个可以多个
sysOrgCode：微信小程序数据隔离ID，通过这个就可以裂变出多个小程序，最大限度节约成本
总结来说就是支持多主体公司旗下多小程序在同一平台运营并且数据隔离

代码示例：

getEncryptData(obj) {
		const {
			serialNo
		} = obj
		// TODO: 此接口请求后台，返回下面的setCanPlaySerialList接口需要的加密参数
		const {
			srcAppid,
			dramaId,
			codes
		} = this.pm.getInfo()
		console.log('getEncryptData start', srcAppid, dramaId, serialNo)
		return new Promise((resolve, reject) => {
			var codes = ''
			uni.login({
				//调用uni.login获取用户code
				provider: "weixin",
				success(res) {
					console.log(res)
					//到这一步的前提是后端的加密数据都已经准备好了
					uni.request({
						url: MYurl + '/api/wxApi/selectUnlockRegion',
						method: 'GET',
						data: {
							memberId: uni.getStorageSync('id'),//用户id
							dramaId: dramaId,//剧目id
							sysOrgCode: uni.getStorageSync('sysOrgCode'),//小程序
							tenantId: uni.getStorageSync('tenantId'),//主体公司
							code: res.code,//用户code
						},
						success: (res) => {
							resolve({
								encryptedData: res.data.result.encryptData,
								start_serial_no: res.data.result.freeList[0]
									.start_serial_no,
								end_serial_no: res.data.result.freeList[0]
									.end_serial_no
							})
							return
						},
						fail: (fail) => {
							reject(fail)
						}
					})
				}
			})

		})
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

四、页面进行调用，跳转至播放器自动播放剧集

如下图所示，当我们点击某个剧目的时候需要向后端传递srcAppid小程序ID和dramaId剧目ID之后调用PlayerManager.navigateToPlayer就会自动跳转到播放页面，这里的前提条件是剧目必须是审核通过的或者是获得授权的剧目才可以进入到插件后播放，如果都没有解锁的情况下可能是你的开始和结束可播放的剧集没有设置

代码示例：

openVideoDetail(lItems) {
	PlayerManager.navigateToPlayer({
		srcAppid: uni.getStorageSync('srcAppid'),
		dramaId: lItems.dramaId,
		// extParam: encodeURIComponent('a=b&c=d'), // 分享会携带的参数，可自定义
	})
},
1
2
3
4
5
6
7

体验可查看下方盼盼短剧，如果有不足或疑惑的地方欢迎大家一起讨论！后续将继续更新短剧播放器以及虚拟支付相关问题！