微信小程序插件开发指南

最新版本

版本: 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、组件支持的属性

5、组件支持的事件

6、插件API

使用示例

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)
        }
      })