介绍

• 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是",
    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返回，必传",
});

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", "活体")，必传"
})