kmqakj-study-player

介绍

• kmqakj-study-player用于点播课的实时学时监管。
• 如果您需要的是的无内置播放器的 SDK，请先安装好插件后再看文档最后的“无内置播放器 SDK”。

运行环境：

• 主流的浏览器环境（edge、谷歌、火狐、safari 等），不支持在IE 浏览器中使用
• 不支持在移动端的浏览器上使用，可能会出现交互异常
• 支持 Vue、React 等主流框架，也可直接运行在原生 js 的项目上

---

微信小程序对接请看 微信小程序插件地址。

内置验证规则

• 小程序扫码人脸验证
• 验证码验证
• 活体验证
• 滑块验证
• 身份证后四位验证

安装

CDN

如果您的项目中没有使用模块化开发，请直接看cdn使用。

npm

npm i kmqakj-study-player

yarn

yarn add kmqakj-study-player

pnpm

pnpm add kmqakj-study-player

使用

注意：请确保 dom 加载完成后再实例化插件！！！

模块化

import { KmqakjStudyPlayer, type Params } from "kmqakj-study-player";
import "kmqakj-study-player/dist/style.css";

const player = new KmqakjStudyPlayer(Option); // 具体参数看下方说明

cdn 使用

版本号可以自行更改，请保证使用的是最新的版本，最新版修复了一些问题。

<link
  rel="stylesheet"
  href="https://unpkg.com/kmqakj-study-player@latest/dist/style.css"
/>
<script src="https://unpkg.com/kmqakj-study-player@latest/dist/index.iife.js"></script>
<script>
  const player = new KmqakjStudy.KmqakjStudyPlayer(Option);
</script>

参数详解

Option

类型定义如下：

interface Option {
  id: string;
  color?: string;
  baseUrl: string;
  params: Params;
}

各字段描述如下：

字段	类型	描述	是否必传
id	String	容器盒子的 id，该元素必须手动设置宽高，请确保该在该 dom 渲染完成后再去实例化插件	是
color	String	主题颜色，支持 css 的颜色值	否
baseUrl	String	服务器接口地址，如：http://loacalhost:3000	是
params	Object	见下方 params 描述	是

params

类型定义如下：

interface Params {
  videoUrl: string;
  appKey: string;
  courseCode: number | string;
  courseName: string;
  duration：number
  durationAll: number;
  planCode: number | string;
  planName: string;
  sectionCode: number | string;
  sectionName: string;
  trainPostCode: string | number;
  trainPostName: string;
  trainTypeEnum: "SEND_JXJY" | "SEND_GQPX";
  idCard: string;
  studentName: string;
  studyInfoLogId?: number | string;
  schoolCode?: string;
}

各字段描述如下：

字段	类型	描述	是否必传
videoUrl	String	视频播放的地址	是
appKey	String	学时监管的 appkey，授权使用	是
courseCode	String | Number	课程 id	是
courseName	String	课程名称	是
duration	Number	当前视频时长	是
durationAll	Number	该岗位的需修学时	是
planCode	String | Number	计划 id	是
planName	String	计划名称	是
sectionCode	String | Number	课程小节 id	是
sectionName	String	课程小节名称	是
trainPostCode	String | Number	培训岗位 code	是
trainPostName	String	培训岗位名称	是
trainTypeEnum	String	培训类型（值只能是下面两个）	是
	'SEND_JXJY'	继续教育
	'SEND_GQPX'	岗前培训
idCard	String	学员身份证	是
studentName	String	学员姓名	是
studyInfoLogId	Number | String	学习日志 id（有异常的学时记录，再次观看需要传该字段）	否
schoolCode	Number | String	机构 code	是
studyId	Number | String	学员 id	是

方法

destroy

此方法用于销毁播放器。以下是在vue3的使用示例：

onBeforeUnmount(() => {
  player?.destory();
  player = null;
  return true;
});

事件

使用示例：

import { KmqakjStudyPlayer, Event } from "kmqakj-study-player";
// cdn引用的Event直接使用KmqakjSdk.Event
const player = new KmqakjStudyPlayer(Option);
player.on(Event.PLAY, () => {
  console.log("player");
});

Event 参数说明：

事件名称	描述
PLAY	视频播放触发
PAUSE	视频暂停触发
END	视频播放结束触发
ERROR	视频播放错误触发

Event.ERROR说明：

player.on(Event.ERROR, (code: number) => {
  console.log(code);
});

code	描述
1001	资源请求被用户终止
1002	媒体请求网路错误
1003	媒体解码出错
1004	媒体资源格式不支持播放
1005	解封装过程出错
1006	重封转出错
1007	hls 解析错误
1008	MSE 出错

无内置播放器 SDK

无内置播放器SDK只提供了一些方法，界面需要自行开发。

基础使用

模块化使用

import { KmqakjStudySDK, type Params } from "kmqakj-study-player";

const sdk = new KmqakjStudySDK({
  baseUrl: "xxx",
});

const paramas: Params = {
  // params参数见上面Params
};
sdk.init(params);
...

CDN 使用

<script src="https://unpkg.com/kmqakj-study-player@latest/dist/index.iife.js"></script>
<script>
  const sdk = new KmqakjStudy.KmqakjStudySDK({
    baseUrl: "xxx",
  });
  const paramas = {
    // params参数见上面Params
  };
  sdk.init(params);
</script>

方法说明

所有方法都是返回Promise，需要自行判断异步操作。

init

初始化播放

sdk.init(params);

params字段描述如下：

字段	类型	描述	是否必传
appKey	String	学时监管的 appkey，授权使用	是
courseCode	String | Number	课程 id	是
courseName	String	课程名称	是
duration	Number	当前视频时长	是
durationAll	Number	该岗位的需修学时	是
planCode	String | Number	计划 id	是
planName	String	计划名称	是
sectionCode	String | Number	课程小节 id	是
sectionName	String	课程小节名称	是
trainPostCode	String | Number	培训岗位 code	是
trainPostName	String	培训岗位名称	是
trainTypeEnum	String	培训类型（值只能是下面两个）	是
	'SEND_JXJY'	继续教育
	'SEND_GQPX'	岗前培训
idCard	String	学员身份证	是
studentName	String	学员姓名	是
studyInfoLogId	Number | String	学习日志 id（有异常的学时记录，再次观看需要传该字段）	否
schoolCode	Number | String	机构 code	是
studyId	Number | String	学员 id	是

返回值：

{
    progress: "视频观看记录，单位（秒）",
    studyInfoId: "学习id",
    ruleType: "验证规则类型，("FACE", "人脸"),("LIVINGBODY", "活体"),("SLIDER", "滑块"),("IDCARD", "身份证"),("NUMBER", "数字")"，
    initVerify： "是否需要首验证 0否1是",
    validateId: '验证id'
    effectiveTm: "验证有效时间(秒)",
    sdkId: "唯一值"
}

play

视频播放的时候调用

sdk.play({
    studyInfoId: "xxx", // 学习Id，由init接口返回的，必传
    countHours： 1111, // 视频当前进度，必传，单位(秒)，
})

pause

视频暂停的时候调用

sdk.pause() {
   studyInfoId: "xxx", // 学习Id，由init接口返回的，必传
   countHours： 1111, // 视频当前进度，必传，单位(秒)
}

end

视频播放结束调用

sdk.end({
   studyInfoId: "xxx", // 学习Id，由init接口返回的，必传
   countHours： 1111, // 视频当前进度，必传，单位(秒)
})

progress

视频播放进度同步，建议每隔 30 秒调用一次

sdk.progress({
   studyInfoId: "xxx", // 学习Id，由init接口返回的，必传
   countHours： 1111, // 视频当前进度，必传,单位（秒）
   sdkId: 'xxxx' // 唯一值，由init接口返回，必传
})

返回值：

{
    validateId: '验证id',
    ruleType: '验证类型，("FACE", "人脸"),("LIVINGBODY", "活体"),("SLIDER", "滑块验证"),("IDCARD", "身份证后四位校验"),("NUMBER", "数字验证")',
    isValidate: "是否要弹框验证（0否1是）",
    effectiveTm: '验证有效时间(秒)'
}

getVerifyInfo

获取验证详情，校验方式为数字的时候调用，验证码换一张也调用该接口

sdk.getVerifyInfo({
  validateId: "xxxx", // 验证id，由progress返回，必传
});

返回值：base64 格式的图片

getVerifyInfoRefresh

倒计时结束验证超时后，重新获取验证方式

sdk.getVerifyInfoRefresh({
  validateId: "验证id，由progress返回，必传",
});

返回值：

{
  validateId: '验证id',
  effectiveTm: '超时时间',
  ruleType: "验证类型，同上"，
}

verify

校验验证，验证类型为滑块、身份证、数字的时候调用该接口校验，校验通过后即可继续播放。

sdk.verify({
  validateId: "验证id，由progress返回，必传",
  ruleValue: "验证值，滑块验证直接传TURE，必传",
});

getFaceVerifyInfo

获取验证详情，校验方式为滑人脸、活体验证的时候调用

sdk.getFaceVerifyInfo({
  validateId: "验证id，由progress返回，必传",
});

返回值：

{
  qrCode: "base64格式的小程序码图片";
}

verifyFace

查询人脸或活体小程序的验证结果，该接口需要轮训使用，建议 2 秒执行 1 次。

sdk.verifyFace({
    validateId: "验证id，由progress返回，必传",
    ruleType: "验证类型，("FACE", "人脸"),("LIVINGBODY", "活体")，必传"
})