微信小程序插件开发指南
最新版本
版本: 1.0.1 日期: 2021-04-27
使用方式
小程序后台申请 “获得视频云”插件使用并填写appid: wx70d57361939e63ef,申请后请联系客服审核。
插件demo及文档地址
1.demo地址:https://hdgit.bokecc.com/ccvideo/VOD_WX_PluginDemo
2.在线文档地址(微信平台版):https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx70d57361939e63ef&token=630276714&lang=zh_CN#6-api
插件使用说明
1、引入插件
// 使用插件前,使用者要在 app.json 中声明需要使用的插件
"plugins": {
"ccvod": {
"version": "1.0.1",
"provider": "wx70d57361939e63ef"
}
}
// 使用插件提供的播放器组件。在 json 文件定义需要引入的自定义组件时,使用 plugin:// 协议指明插件的引用名和自定义组件名
"usingComponents": {
"ccvod": "plugin://ccvod/ccvod"
}
3、使用播放器组件
vid='{{vid}}' // 视频vid
siteid='{{siteid}}' // 用户id
custom_id='{{custom_id}}' // 自定义id
controls="{{true}}"
autoplay="{{false}}" // 是否自动播放
bindplay="bindPlay" // 事件绑定
bindpause="bindPause">
</ccvod>
4、组件支持的属性
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
vid | String | / | Y | 视频id |
siteid | String | / | Y | 用户id |
width | String | / | N | 播放器宽度,eg: width="100%" |
height | String | / | N | 播放器高度,eg: height="300px" |
custom_id | String | / | N | 自定义统计参数,需要自定义参数统计时配置 |
vc | String | / | N | 授权验证码, 使用授权验证时[必填] |
usingMarquee | Boolean | false | N | 是否使用跑马灯 |
marqueeText | String | / | N | 跑马灯文案 |
marqueeColor | String | / | N | 跑马灯文案颜色 |
banDrag | Boolean | false | N | 禁止拖拽播放 |
autoplay | Boolean | false | N | 是否自动播放 |
loop | Boolean | false | N | 是否循环播放 |
muted | Boolean | false | N | 是否静音播放 |
enableProgressGesture | Boolean | true | N | 是否开启控制进度的手势 |
controls | Boolean | false | N | 是否使用video自带controls |
poster | String | / | N | 自定义封面图,默认为接口设置的封面图 |
showFullscreenBtn | Boolean | true | N | 是否显示全屏按钮 |
showDownload | Boolean | false | N | 是否启用下载功能,注:仅mp4支持此功能 |
filePath | String | / | N | 下载视频时的临时路径,传参为wx.env.USER_DATA_PATH,用来下载完成时成功删除文件缓存,使用方法请参考示例 |
5、组件支持的事件
名称 | 说明 |
---|---|
bindplay | 当开始/继续播放时触发play事件 |
bindpause | 当暂停播放时触发 pause 事件 |
bindended | 当播放到末尾时触发 ended 事件 |
bindtimeupdate | 播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次 |
bindwaiting | 视频出现缓冲时触发 |
binderror | 视频播放出错时触发 |
bindprogress | 加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比 |
bindloadedmetadata | 视频元数据加载完成时触发。event.detail = {width, height, duration} |
bindfullscreenchange | 视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal |
binddownloadsucc | 视频下载成功时回调,可在此回调中删除临时文件缓存,使用方法请参考下载功能示例1 |
6、插件API
名称 | 参数 | 返回值 | 说明 |
---|---|---|---|
play | / | / | 播放视频 |
pause | / | / | 暂停视频 |
seek | (time) | / | 跳转到指定位置, time 单位/秒 |
getCurrentTime | / | Number | 获取视频当前的播放时刻,返回值单位/秒 |
getDuration | / | Number | 获取视频时长,返回值单位/秒 |
requestFullScreen | / | / | 进入全屏 |
exitFullScreen | / | / | 退出全屏 |
playbackRate | (Number) | / | 设置倍速播放 |
getCurrQuality | / | Number | 获取当前清晰度 |
changeQuality | (Number) | / | 切换清晰度 |
on | (event, callback) | / | 绑定事件监听,使用请参考以下绑定事件监听示例 |
download | (Object) | / | 下载视频, Object为{ filePath, success回调,fail回调 },使用请参考下载功能示例2 |
使用示例
1.API示例:
let ccPlayer = requirePlugin('ccvod');
Page({
onLoad: function() {
let ccVideo = ccPlayer.getVideoContext(this, wx); // 获取video
ccPlayer.play(); // 播放
ccPlayer.pause(); // 暂停
ccPlayer.seek(60); //跳转到指定位置,单位:秒
ccPlayer.playbackRate(1.5); // 设置播放倍速
}
})
2.绑定事件监听示例:
当前提供的事件有playerLoaded、getQualityList、getSpList
// 播放器加载完成
ccPlayer.on("playerLoaded", (data) => {
console.log(data)
});
// 自定义切换清晰度功能时,获取清晰度列表
ccPlayer.on("getQualityList", (data) => {
this.setData({
dfList: data, // 插件回调的清晰度数据
})
});
// 自定义切换倍速功能时,获取倍速列表
ccPlayer.on("getSpList", (data) => {
this.setData({
spList: data
})
});
3.下载视频功能示例:
实现下载功能有2种方式: 1、使用播放器插件内置按钮;2、 通过插件提供API来实现。
1、播放器内部下载功能示例
wxml
<ccvod
vid='{{vid}}' // 视频vid
siteid='{{siteid}}' // 用户id
showDownload="{{true}}" // 启动下载功能,仅mp4支持此功能
filePath="{{filePath}}" // 为删除临时缓存成功传值建议为wx.env.USER_DATA_PATH
binddownloadsucc="downLoadSucc"> // 下载视频成功回调
</ccvod>
// 下载成功回调:
downLoadSucc: function(e) {
let filePath = e.detail.filePath;
let fileMgr = wx.getFileSystemManager();
fileMgr.unlink({
filePath: filePath,
success: (res) => {
console.log(res)
},
fail: (err) => {
console.log(err)
},
})
}
2、下载API实现示例
ccPlayer.download({
filePath: wx.env.USER_DATA_PATH,
success: (filePath) => {
let fileMgr = wx.getFileSystemManager();
fileMgr.unlink({
filePath: filePath,
success: (res) => {
console.log(res)
},
fail: (err) => {
console.log(err)
},
})
},
fail: (err) => {
console.log(err)
}
})