微信小程序插件开发指南

最新版本

版本: 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)
        }
      })

results matching ""

    No results matching ""