ppt-paint-for-animation-test

# ppt动画sdk使用文档

1、引用地址（页面调用的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	当前页面为最后一页