ppt-paint-for-animation v1.0.3

ppt动画sdk使用文档

1、引用地址（页面调用的js）：

2、初始化

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 |当前页面为最后一页