axx-slide-sdk

提供爱学习在线课件编辑、播放相关 API

安装方式

$ npm install axx-slide-sdk

引用方式

ES:

import {EditorSDK, PlayerSDK} from 'axx-slide-sdk'

CJS:

const {EditorSDK, PlayerSDK} = require('axx-slide-sdk')

浏览器:

<script type="module">
  import {
    EditorSDK,
    PlayerSDK,
  } from './node_modules/axx-slide-sdk/dist/index.es.js';
</script>

player API

Demo

import { PlayerSDK, PlatformType } from 'axx-slide-sdk';

var player = new PlayerSDK('#app', {
  // #app 父容器ID
  coursewareId: ['43aafe33-bb50-49ca-abce-0e89249e38d3'], // 线上课件
  // 平台标示(必须)
  platform: PlatformType.AXX,
  // 参数(必须)
  params: {
    // 鉴权相关字段
    cwSign: '0c208589fba900b031b472b9518b84', // 签名信息
    cwPf: 'diy', // 平台标示
    cwExpired: '1600283339534', // 签名过期时间
    cwUser: 'user1',
    fullScreenHideController: false, // 默认可以不传递，如果为true，则在全屏时隐藏控制条，退出时显示控制条
  },
  sdkCheck?: boolean = false // 默认为false，如果为true则会检查sdk实例与绑定的课件播放器之间的消息互传是否匹配
});

Player 生命周期

export interface IPlayerLifeCycle {
  /**
   * 播放器挂载到dom节点上
   * 此时可以调用课件SDK进行操作
   *
   */
  onPlayerMounted?: (info: IPlayerInfo) => void;
}

Player 事件

enum IPlayerMessage {
  /**
   * 播放器翻页
   */
  ON_PLAYER_GO_PAGE = 'player-go-page',

  /**
   * 播放器翻页前
   */
  ON_PLAYER_BEFORE_GO_PAGE = 'player-before-go-page',

  /**
   * 动画开始前
   */
  ON_PLAYER_NEXT_STEP_START = 'player-next-step-start',

  /**
   * 播放器下一步
   */
  ON_PLAYER_NEXT_STEP = 'player-next-step',

  /**
   * 播放器键盘事件
   */
  ON_PLAYER_KEY_BOARD = 'player_key_board',

  /**
   * 播放器点击位置
   */
  ON_PLAYER_CLICK_POSITION = 'player-click-position',

  /**
   * 视频进度调整
   */
  ON_PLAYER_VIDEO_SEEK = 'ON_PLAYER_VIDEO_SEEK',

  /**
   * 视频播放、暂停
   */
  ON_PLAYER_VIDEO_PLAY_PAUSE = 'ON_PLAYER_VIDEO_PLAY_PAUSE',

  /**
   * 视频播放时间更新
   */
  ON_PLAYER_VIDEO_TIME_UPDATE = 'ON_PLAYER_VIDEO_TIME_UPDATE',

  /**
   * 播放器输出scrollTop
   */
  ON_PLAYER_SCROLL_TOP = 'player-scroll-top',

  /**
   * 播放器输出缩率图按钮点击
   */
  ON_PLAYER_CLICK_THUMB_BTN = 'player-click-thumb-btn',

  /**
   * 播放器输出目录按钮点击
   */
  ON_PLAYER_CLICK_CATALOG_BTN = 'player-click-catalog-btn',

  /**
   * 播放器点击随机提问按钮
   */
  ON_PLAYER_CLICK_RANDOM_BTN = 'player-click-random-btn',

  /**
   * 播放器点击开火车开始按钮
   */
  ON_PLAYER_CLICK_TRAIN_START = 'player-click-train-start',

  /**
   * 播放器点击开火车开始按钮
   */
  ON_PLAYER_CLICK_TRAIN_SKIP = 'player-click-train-skip',

  /**
   * 播放器点击全屏按钮（备授课需要）
   */
  ON_PLAYER_CLICK_FULLSCREEN = 'player-click-full-screen',

  /**
   * 播放器点击超链接
   */
  ON_PLAYER_CLICK_SUPERLINK = 'player-click-super-link',

  /**
   * 超级视频
   */
  ON_PLAYER_SUPER_VIDEO = 'player-super-video',

  /*
   * 播放器主动发送的事件，视频直播中的所有互动消息都走这个事件
   */
  ON_PLAYER_MESSAGE = 'player-message',

  /**
   * 是否允许课件穿透
   */
  ON_COURSEWARE_POINTER_ALLOW = 'courseware_pointer_allow',

  /**
   * 播放器 mouseenter or mouseleave 事件
   */
  ON_PLAYER_MOUSE_EVENT = 'player_mouse_event',
}

Player 方法

interface IPlayerSDK {
  /**
   * 获取当前课件的信息
   */
  getCurrentPageInfo(): Promise<any>;

  /**
   * 拿课件所有单页的缩略图信息
   * @param message
   * @param handle
   */
  getSlidesInfo(): Promise<Array<SlideInfo>>;

  /**
   * 拿课件单页缩略图信息
   * @param message
   * @param handle
   */
  getSlideInfo(index: number): Promise<SlideInfo>;

  /**
   * 加载缩略图的依赖css文件
   * @param appendToHead 是否将css link自动添加到head中, 缺省true
   */
  getThumbCSS(appendToHead: boolean): Promise<string[]>;

  /**
   * 监听课件事件变化
   *
   * @param {EditorMessage} message 消息体
   * @param {any} handle 捕获函数，具体参数参考文档
   */
  addEventListener(
    message: IPlayerMessage,
    handle: (...args: any[]) => any
  ): IPlayerSDK;

  /**
   * 移除监听课件事件
   *
   * @param {EditorMessage} message 消息体
   * @param {any} handle 捕获函数，具体参数参考文档
   */
  removeEventListener(
    message: IPlayerMessage,
    handle?: (...args: any[]) => any
  ): IPlayerMessage;

  /**
   * 重新加载播放器
   */
  reload(
    coursewareId: string[],
    params: IPlayerConfigParams,
    reloadIspring?: boolean,
    themeId?: string,
    reuseIframe?: boolean
  ): void;

  /**
   * 课件销毁
   */
  destroy(): void;

  /**
   * 跳转到课件某一页
   */
  goPage(n: number): Promise<IPlayerInfo>;

  /**
   * 跳转到某一步动画
   * @param n 跳转到的动画数
   * @param isEnd 是否直接播放完当前动画
   */
  goStep(n: number, isEnd?: boolean): Promise<IPlayerInfo>;

  /**
   * 点击缩率图
   */
  onThumbClick(): void;

  /**
   * 全屏(退出全屏Esc)，此方法可以主动调用
   */
  onFullScreen(): void;

  /**
   * 退出全屏操作，注意如果使用esc退出全屏，那么调用这需要主动调用此方法，将退出全屏的消息发送到课件内部，课件会继续处理退出全屏的后续曹组哦，比如显示底部工具条等（注意对ispring无效）
   */
  onCancelFullScreen(): void;

  /**
   * 是否全屏
   */
  isFullScreen(): boolean;

  /**
   * 下一步
   */
  goNextStep(isEnd?: boolean): Promise<IPlayerInfo>;

  /**
   * 上一页
   */
  goPrePage(): Promise<IPlayerInfo>;

  /**
   * 下一页
   */
  goNextPage(): Promise<IPlayerInfo>;

  /**
   * 通过坐标点击
   */
  clickByPointer(pointer: IClickPointer): Promise<any>;

  /**
   * 接收视频信息
   * @param msg
   */
  receiveVideoInfo(msg: any): Promise<any>;

  /**
   * 接收教师端信息
   * @param msg
   */
  receiveSlideInfo(msg: any): Promise<any>;

  /**
   * 设置播放器scrollTop
   */
  scrollTop(value: number, selector?: string): Promise<any>;

  /**
   * 设置禁止页面点击（禁止动画下一步，翻页等操作，无法控制视频）
   */
  setDisablePageClick(isDisable: boolean): Promise<any>;

  /**
   * 备授课控制播放条按钮显隐
   */
  setControllerButton(hidden: boolean): Promise<any>;

  /**
   * 备授课的业务埋点数据
   */
  injectSlideContent(data: any): Promise<any>;

  /**
   * 接收来自课件的消息
   * @param msg
   */
  receiveMessage(msg: any): Promise<any>;

  /**
   * 暂停课件的多媒体
   * @param resumePlay 恢复暂停的播放
   */
  pauseMedia(resumePlay: boolean): Promise<any>;

  /**
   * 停止课件的多媒体
   */
  stopMedia(): Promise<any>;

  /**
   * 切换课件清晰度
   * @deprecated
   */
  setImageQuality(quality: ImageQuality): Promise<any>;

  /**
   * 是否禁止视频可操作，包括点击播放、暂停、拖拽seek，控制音量等操作（仅支持在线课件，暂不支持ispring）,传入false不可操作，true为可操作
   */
  setAllowVideoPenetrate(value: Boolean): Promise<any>;
}

Editor API

Demo

import { EditorSDK, EditorMessage } from 'axx-slide-sdk';
const sdk = new EditorSDK('#app', {
  coursewareId: 'xxxx',
  params: {
    // 鉴权所需字段传入，同播放器
  },
});

// 注册 EditorMessage支持的事件
sdk.addEventListener(EditorMessage.ON_SLIDES_LOADED, ret => {
  // 获取所有的slide id
});

Editor 事件

enum EditorMessage {
  /**
   * 复制课件到剪贴板
   */
  ON_SLIDE_COPY_CLIP = 'slide-copy-clip',

  /**
   * 剪贴课件到剪贴板
   */
  ON_SLIDE_CUT_CLIP = 'slide-cut-clip',

  /**
   * 粘贴复制
   */
  ON_SLIDE_COPY_PASTE = 'slide-copy-paste',

  /**
   * 粘贴剪贴
   */
  ON_SLIDE_CUT_PASTE = 'slide-cut-paste',

  /**
   * 课件重命名
   */
  ON_SLIDE_RENAME = 'slide-rename',

  /**
   * 课件新增一页时执行
   */
  ON_SLIDE_ADD = 'slide-add',

  /**
   * 导入ppt课件
   */
  ON_SLIDE_IMPORT = 'slide-import',

  /**
   * 课件发生移动时执行
   */
  ON_SLIDE_MOVE = 'slide-move',

  ON_SLIDE_EXCHANGE = 'slide-exchange',

  /**
   * 课件选中一页时执行
   */
  ON_SLIDE_ACTIVE = 'slide-active',

  /**
   * 课件被删除时执行
   */
  ON_SLIDE_DELETE = 'slide-delete',

  /**
   * 组件发生任何变化时执行
   */
  ON_WIDGET_CHANGE = 'widget-change',

  /**
   * 课件加载完时
   */
  ON_SLIDES_LOADED = 'slides-loaded',

  /**
   * 课程重载时
   */
  ON_COURSE_RELOAD = 'course-reload',

  /**
   * 课件保存
   */
  ON_SLIDE_SAVE = 'slide-save',

  /**
   * 课件隐藏
   */
  ON_SLIDE_HIDE = 'slide-hide',

  /**
   * 课件显示
   */
  ON_SLIDE_SHOW = 'slide-show',

  /**
   * 课件克隆
   */
  ON_SLIDE_COPY = 'slide-clone',

  /**
   * 课件的名称被修改
   */
  ON_UPDATE_TITLE = 'update-title',

  /**
   * 调用方回调操作，表示编辑器希望关闭,但具体的行为需要调用方自己处理
   */
  ON_GO_BACK = 'go-back',
  /**
   * 版本发布回调
   */
  ON_VERSION_RELEASE = 'version-release',
  /**
   * 登录认证失败回调
   */
  ON_LOGIN_FAILED = 'login-failed',
}

Editor 方法

interface IEditorAPI {
  /**
   * 监听课件事件变化
   *
   * @param {EditorMessage} message 消息体
   * @param {any} handle 捕获函数，具体参数参考文档
   */
  addEventListener(
    message: EditorMessage,
    handle: (...args: any[]) => any
  ): IEditorAPI;

  /**
   * 移除监听课件事件
   *
   * @param {EditorMessage} message 消息体
   * @param {any} handle 捕获函数，具体参数参考文档
   */
  removeEventListener(
    message: EditorMessage,
    handle?: (...args: any[]) => any
  ): IEditorAPI;

  /**
   * 插入课件
   *
   * @param {string} title 标题
   * @param {BlankSlideTheme} theme 背景主题样式
   * @return {Promise<ISlideAPI>}
   */
  insertSlide(title: string, theme: BlankSlideTheme): Promise<ISlideAPI>;

  /**
   * 删除课件
   *
   * @param {SlideId} id
   * @return {Promise<ISlideAPI>}
   */
  deleteSlide(id: SlideId): Promise<ISlideAPI>;

  /**
   * 交换课件位置
   *
   * @param {SlideId} target
   * @param {SlideId} source
   */
  exchangeSlide(target: SlideId, source: SlideId): Promise<any>;

  /**
   * 向上移动某一页课件
   *
   * @param {SlideId} id
   * @return {Promise<ISlideAPI>}
   */
  moveUpSlide(id: SlideId): Promise<ISlideAPI>;

  /**
   * 向下移动某一页课件
   *
   * @param {SlideId} id
   * @return {Promise<ISlideAPI>}
   */
  moveDownSlide(id: SlideId): Promise<ISlideAPI>;

  /**
   * 高亮显示
   *
   * @param id
   * @return {Promise<ISlideAPI>}
   */
  activeSlide(id: SlideId): Promise<ISlideAPI>;

  /**
   * 保存课件
   */
  save(): Promise<ISlideAPI[]>;

  /**
   * 重载课件
   * @param coursewareId 课程ID
   * @param slideId 课件ID
   */
  reload(coursewareId: string, slideId?: string): void;

  /**
   * 预览
   */
  preview(): void;

  /**
   * 获取所以课件
   */
  fetchAll(): Promise<ISlideAPI[]>;
}

sdkId

=1.1.93播放器与课件交互及事件监听函数回调过程中会传递sdKId，用以标识不同的sdk实例