💡

最新版本1.60.132

浏览器要求Chrome内核

接入方式

Web播放器SDK提供两种接入方式： jssdk接入和url接入，两种接入方式最后的呈现的内容并无区别，区别在于适用于不同的技术场景，客户的技术开发团队可根据具体需要进行选择。

jssdk接入

以下步骤演示如何在一个简单的Web项目中接入和配置SDK，详情参见Demo源码。

1、引入jssdk

2、提供挂载元素

在body标签处添加一个用以挂载SDK的div节点，示例如下：

3、初始化

SDK根据提供的DOM节点，把SDK的UI界面渲染到节点上。

query参数说明

播放历史课堂需要签名后的query。详见生成query字符串。

options参数说明

名称	类型	是否必填	默认值	说明	版本
getFileName	(fileName: string, isPublic: boolean) => Promise<string>	否	-	如果历史课堂存储在客户自己的OSS，则必须传入该方法。该方法用来返回历史课堂目录下每个文件的访问地址。 `fileName`: 文件在历史课堂目录中的相对地址。 `isPublic`: true表示希望得到该文件公开的访问地址，即不需要签名、没有有效期的地址 `返回值`: promise的结果为文件访问地址。
getExtFileName	(info: Array) => Promise<string>	否	-	调用了insertObject方法插入资源后需要提供这个回调，详见云盘接入
getPreParseFileName	(info: Array, option: {suffix:string}) => Promise<string>	否	-	调用了insertObject方法插入预解析资源后需要提供这个回调，详见云盘接入	>=1.60.116

4、PlasoUpimePlayer的属性

名称	类型	说明
currentTime	number	当前播放时间，单位为秒。支持设置当前播放时间，如果需要跳转播放设置该属性即可
playbackRate	number	当前播放倍速。支持设置当前播放速度，支持的倍速取值如下 [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0, 2.5, 3.0]
duration	number	当前播放资源的总时长，单位为秒
ended	boolean	当前是否已经播放到结束当触发`ended`事件时`ended`属性将变成 true，此时调用`play()`方法将返回 rejected ，需要重新设置`currentTime`为有效的播放时间

5、PlasoUpimePlayer的方法

名称	类型	说明
setSrc	(query: string, options?: Object) => void	设置播放资源的路径，资源加载成功时会触发`canplay`事件，此时调用`play()`即可播放。 `query`: 播放历史课堂需要签名后的query。详见生成query字符串（如果历史课堂存储在客户自己的OSS可以不需要 query，只传空字符串） `options`: 详见options参数说明
play	() => Promise	开始播放当未设置播放路径、未加载完成时返回结果将是 rejected `ended`属性为 true 时调用`play()`的返回结果也是 rejected，需要先设置 `currentTime`到有效的时间点
pause	() => Promise	暂停播放
resize	() => void	调整播放器大小当挂载 SDK UI的dom节点大小发生变化时需要调用该方法重新调整播放器大小以适配容器
on	(eventName: string, listener: Function) => void	添加事件监听
off	(eventName: string, listener: Function) => void	取消事件监听 `listener`: 之前调用`on`方法绑定过的、待取消的事件监听函数，确保为同一个实例
destroy	() => void	销毁播放器

6、PlasoUpimePlayer的事件

名称	类型	说明
canplay	() => void	播放资源加载完成时触发。没有加载完成时调用`play()`无法播放
play	() => void	播放器由暂停状态转为播放状态时触发。
timeupdate	(time: number) => void	播放时间变化时触发。`time`: 当前播放时间，对应 currentTime
pause	() => void	播放器由播放状态转为暂停状态时触发。
ended	() => void	播放结束时触发

url接入

url接入方式由用户自己拼接好播放地址，通过跳转/弹出新页面等方式打开。

播放地址格式如下

可选参数见query参数表格，由这些参数生成签名后再组成新的query字符串作为url参数。

注意：url接入方式暂不支持播放通过insertObject插入的文件，如有此类文件，请使用jssdk接入方式。

附录

query参数表格

生成query字符串

1、从query参数表格选择所需的业务参数字段和合适的值

2、生成签名

详见签名示例

3、组装query字符串

将所选字段的key和value用=连接，然后再将每一个key=value对使用&相连，最后再加上signature=签名结果。下面是一个拼接好的query示例。

appId=xxx&appType=player&recordId=xxxxx&signature=1315A080E80FC7B674EDEB26BE0E4386DA5D452F&validBegin=1755148016&validTime=10800

特别说明

关于微信播放
白板中如果插入了视频, 且需要在微信中播放，请到微信开发组申请白名单，否则无法在微信中播放。

Web播放器

接入方式#

jssdk接入#

1、引入jssdk#

2、提供挂载元素#

3、初始化#

query参数说明#

options参数说明#

4、PlasoUpimePlayer的属性#

5、PlasoUpimePlayer的方法#

6、PlasoUpimePlayer的事件#

url接入#

附录#

query参数表格#

生成query字符串#

1、从query参数表格选择所需的业务参数字段和合适的值#

2、生成签名#

3、组装query字符串#

特别说明#