使用之前，将播放器包放到前端项目的静态资源目录下，也就是webpack中的publicPath配置对应的目录

<script src="这里填播放器的包路径/index.js"></script>  // 一般通过打包工具进行配置
...
const { WsPlayer } = window;
const player = new WsPlayer(Configs)

初始媒体选项配置

播放器提供的回调事件 备注：此配置只是为了适配之前的绑定事件方式，新的事件绑定方式参考： on()

| | onDownloadEnd() | 下载模式可用，下载完毕回调事件 | | | onDownloadStop() | 下载模式可用，下载停止回调事件，在未下载完毕时调用播放器的销毁方法，会触发此事件 | | | onDownloadSplit(size) | 下载模式可用，当下载的缓存数据大于内存限制时，文件会进行分片保存下载，每次进行分片保存时，都会触发此事件 | size：保存的分片文件大小，以字节为单位 | | onDownloadProgress | 下载模式可用，下载进度更新回调事件 | info: 下载进度信息对象```javascript info: { time: 0, // 当前已下载的时间，单位 ms progress: 0, // 当前的下载进度，范围：[0,1] }

 |
| onUnablePlay | 回放模式可用，当前时间无法播放时触发 | 
```javascript
{
  currentTime: 0,  // 当前时间，单位 ms
}

|

初始水印配置

| | wrapText | string | 水印换行文本 | fasle | | | fontSize | string | 文字大小，接受css支持的font-size格式 | false | 40px | | rotate | number | 水印的旋转角度，单位：deg | false | 30 | | color | string | 水印字体颜色，接受css支持的color格式 | false | rgba(255,255,255,0.3) | | opacity | number | 水印内容的不透明度,有效值为0到1之间的数值 | false | 1 | | horizontalSpacing | number | 水印之间的水平间距，单位：px | false | 400 | | verticalSpacing | number | 水印之间的垂直间距，单位：px | false | 340 | | isCross | boolean | 相邻行的水印是否交错 | fasle | true | | offsetX | number | 水印整体x轴位置偏移量，单位：px | false | 0 | | offsetY | number | 水印整体y轴位置偏移量，单位：px | false | 0 | | useImage | boolean | 是否使用图片水印 | false | false | | imageUrl | string | 图片链接地址 | false | | | imageWidth | number | 指定图片的宽度，如果传递的数值小于等于0，则应用图片的原始宽度，单位: px | false | 0 | | imageHeight | number | 指定图片的高度，如果传递的数值小于等于0，则应用图片的原始高度，单位: px | false | 0 |

播放器会自主重连的情况：

1. 实时模式下ws连接关闭时，主动调用destroy方法导致的连接关闭不会发起重连
2. 回放模式下，由于seek操作导致的ws连接关闭
3. 下载模式下，未正常下载结束之前，服务器断开了ws连接 | 字段 | 类型 | 描述 | 是否必填 | 默认值 | | --- | --- | --- | --- | --- | | enabled | boolean | 是否开启重连机制 | false | true | | attempts | number | 重连最大次数 | fasle | 3 | | interval | number | 断开后进行重连的时间间隔，单位ms，不传递则断开时立即进行重连 | false | 0 |

import  "../lib/wsPlayer/index.js"

const { WsPlayer } = window;
const player = new WsPlayer({
        url: 'ws://10.5.1.74:8080/media/v0.1/stream/25/1/0/live',
        mode: "live",
        MSE: true,
        container: document.getElementById("canvasContainer"),
        mediaOptions: {
          speed: 1,
          muted: true
        },
        watermarkConfig: {
          text: '默认水印',
          fontSize: 30,
          rotate: 30,
          color: '#fff',
          horizontalSpacing: 100,
          verticalSpacing: 100,
          isCross: true,
        }
      })
play.on("timeUpdate",(value: number) => {
      setDuration(value);
})
player.play()
...
// 不使用时记得销毁
  player.destroy()

| | endRecordAll() | 结束所有录制操作 | | | | reconnect() | 重新连接媒体流 | | 如果调用成功，会返回一个promise对象，代表重连的结果 | | releaseConnection | 释放当前的媒体流的网络连接 | | | | on(eventName,callback) | 绑定指定事件 | eventName：事件名称，参考eventName callback：回调函数 | | | off(eventName,callback) | 解绑指定事件对应的回调函数，如果传入的callback为空，则解绑该事件绑定的所有回调函数 | 同上 | | | getMediaTimeMs() | 获取当前视频播放的时间 | | 当前视频的播放时间，单位 ms | | getDuration() | 获取当前视频的总时长 | | 当前视频的总时长，单位 ms | | getPaused() | 获取当前视频是否暂停中，返回一个布尔值，true代表暂停，false代表播放 | |

| | getTimeInfo(time) 备注：mse模式可用 | 获取指定视频时间位置相关的信息，返回一个object，对应的属性值： canplay: 当前时间是否能够播放 inRange: 是否在视频时长范围内 nextStartTime: 下一个可播放的开始时间 | time：要获取的视频时间，单位 ms | ```json { canplay: true, inRange: true, nextStartTime: 0, }

 |
| jumpToNextBuffer()
备注：mse模式可用 | 跳转到下一个可播放时间的开头 |  |  |
| replaceHttpSrc(url)
备注：mse模式可用 | 替换http串并重新播放，替换后是否播放取决于autoplay配置 | `url`：要替换的http串 |  |

### 事件
#### eventName
使用`WsPlayer.on()`方法监听播放器某个事件时，支持的eventName值

| **eventName value** | **描述** | **callback传入参数** |
| --- | --- | --- |
| timeUpdate | 播放器播放时间更新回调事件 | `time`：当前播放器的播放时间，单位 ms |
| connectSuccess | 播放器连接流媒体成功事件，http串和ws串都会触发 |  |
| connectClose | 流媒体连接关闭事件，http串不触发 | `[res](#lBjIG)`: 关闭信息 |
| error | 播放器内部错误事件 | `[error](#cOSJA)`: 错误信息 |
| play | 播放器播放事件 |  |
| pause | 播放器暂停事件 |  |
| ended | 播放器播放结束事件 |  |
| insufficientBuffer | 播放器缓冲数据不足以播放事件，客户端带宽不足，实时码流掉帧，或是seek到没有录像的时间，都有可能会触发此事件 |  |
| downloadStart | 下载模式可用，下载开始回调事件 | 
 |
| downloadEnd | 下载模式可用，下载完毕回调事件 | 
 |
| downloadStop | 下载模式可用，下载停止回调事件，在未下载完毕时停止了下载，会触发此事件 | 
 |
| downloadSplit | 下载模式可用，当下载的缓存数据大于内存限制时，文件会进行分片保存下载，每次进行分片保存时，都会触发此事件 | `size`：保存的分片文件大小，以字节为单位 |
| downloadProgress | 下载模式可用，下载进度更新回调事件 | `info`: 下载进度信息对象```javascript
info: {
  time: 0,  // 当前已下载的时间，单位 ms
  progress: 0, // 当前的下载进度，范围：[0,1]
}

| | unablePlay | 当前时间无法播放时触发 |

{
  currentTime: 0,  // 当前时间，单位 ms
}

| | bitRateUpdate | 实时码率更新回调事件 | bitRate: 当前的实时码率，单位 kbps | | mediaInfo | 媒体信息回调 | mediaInfo: 当前码流的媒体信息 |

此事件回调一个关闭信息，结构如下

此事件回调一个错误信息，结构如下

<script src="这里填播放器的包路径/index.js"></script>

...
const { StreamDownloader } = window;
const downloader = new StreamDownloader(Configs)

使用StreamDownloader.on()方法监听播放器某个事件时，支持的eventName值

| | downloadEnd | 下载完毕回调事件 | | | downloadStop | 下载停止回调事件，在未下载完毕时停止了下载，会触发此事件 | | | downloadSplit | 当下载的缓存数据大于内存限制时，文件会进行分片保存下载，每次进行分片保存时，都会触发此事件 | size：保存的分片文件大小，以字节为单位 | | downloadProgress | 下载进度更新回调事件 | info: 下载进度信息对象```javascript info: { time: 0, // 当前已下载的时间，单位 ms progress: 0, // 当前的下载进度，范围：[0,1] }

 |
| connectSuccess | 连接成功事件 |  |
| connectClose | 连接关闭事件 | [res](#lBjIG): 关闭信息 |
| error | 错误事件 | [error](#cOSJA): 错误信息 |