Need private packages and team management tools?Check out npm Teams »

ppt-paint-for-animation

1.0.3 • Public • Published

# ppt动画sdk使用文档

1、引用地址(页面调用的js):

http://live.polyv.net/assets/ppt-animation/index.d6107526b75f5743ce38.js

2、初始化

字段 说明 默认值 是否必填
content ppt的dom结构ID #content
sendMessage 客户端使用,使用该函数发送信息到客户端 一个空函数
hasPaintbrush 是否有画笔,true表示有,false表示无 true
canEditPaint 是否可以画画笔,true表示可以画,false表示不可以 false
isAnimate 是否为动画,true表示有;false表示没有动画,为大图; true
autoId ppt对应的ID
pptType ppt类型,区分新旧ppt,如果为new,表示为新的ppt,即有动画的;不填则为旧ppt
new PPTH5({
    content: '#content',
    sendMessage: () => {},
    hasPaintbrush: true,
    canEditPaint: false
})

3、直播调用

进行直播时,初始化完PPTH5后,将监听socket消息获得的数据作为参数,调用drawMsgFromSocket函数。

const pptCtrl = new PPTH5();
socket.on('message',data => {
    const { EVENT } = JSON.parse(data);
    if (EVENT === 'onSliceOpen' || EVENT === 'onSliceStart' || EVENT === 'onSliceDraw' || EVENT === 'onSliceControl') {
        pptCtrl.drawMsgFromSocket(data);
    }
})

4、点播调用

进行点播时,初始化完PPTH5后,调用VODStart函数,请求ppt历史数据。

VODStart参数

字段 说明 默认值 是否必填
id 视频id,直播暂存文件为fileid,回放列表文件为vid
roomId 房间Id
type 视频类型,直播暂存为record,回放列表为playback playback

VODStart请求成功后,在回调里面请求VODPlay,参数为一个函数,该函数调用后可以获取当前视频播放时间。代码如下

const pptCtrl = new PPTH5();
const getCurrentPlayTime = (callback) => {
    callback({time: currentTime})  // 传入回调函数的参数为一个对象,对象属性time即为当前视频播放时间,单位为毫秒。
};
pptCtrl.VODStart({
    roomId: 200060,
    id: 11111,
    type: 'playback'
}, () => {
    pptCtrl.VODPlay(getCurrentPlayTime);
});

5、客户端调用

① 嵌入页面地址:http://live.polyv.net/front/ppt-animation 地址参数说明

字段 说明 默认值 是否必填
isAnimate 是否为动画,true表示有;false表示没有动画,为大图; true
autoId ppt对应的ID
pptType ppt类型,区分新旧ppt,如果为new,表示为新的ppt,即有动画的;不填则为旧ppt

② 操作ppt时调用函数getOptMsg,这个函数在嵌入页面里,客户端先获取这个函数。

getOptMsg参数

字段 说明 默认值 是否必填
sliceEvent 事件类型,changeSlice为跳页,gotoPreviousStep为上一个动画或者上一页(看ppt类型),gotoNextStep为下一个动画或者下一页(看ppt类型)
index 跳页事件changeSlice时,需要传的页数,从0开始

代码示例

getOptMsg({sliceEvent:'changeSlice', index: 1});  // 参数类型可以为对象,也可以为该对象的json字符串。

③ ppt操作后,触发的相关事件,为json字符串,格式如

字段 说明
sliceEvent 事件名称
sliceIndex 发生翻页时的页数

sliceEvent事件如下

字段 说明
slideChange 翻页事件,ppt页面跳转时触发
firstPage 当前页面为第一页
lastPage 当前页面为最后一页

Keywords

none

Install

npm i ppt-paint-for-animation

DownloadsWeekly Downloads

2

Version

1.0.3

License

ISC

Unpacked Size

367 kB

Total Files

23

Last publish

Collaborators

  • avatar