# VideoPlayer

## install
  npm install iotx-videoplayer
### 引入cdn

```html
<link rel="stylesheet" href="//g.alicdn.com/linkplatform/videojs-plugins/0.0.6??plugin-scale.css,plugin-refresh.css,plugin-end.css"></link>
<script src="//g.alicdn.com/linkplatform/videojs-plugins/0.0.6??tech-flv.js,plugin-hls-compat.js,tech-h265.js"></script>
```

## 组件api
	

| 属性                | 类型                                                                                                                           | 默认值 | 是否必填 | 备注                   |
|---------------------|--------------------------------------------------------------------------------------------------------------------------------|--------|---------|------------------------|
| getSource           | Promise<{[p: string]: any;url: string;}>                                                                                       | -      | 是       | 获取视频资源的Promise  |
| className           | string                                                                                                                         | -      | 否       | className              |
| isLive              | boolean                                                                                                                        | true   | 否       | 视频是否是直播         |
| isH265              | boolean                                                                                                                        | false  | 否       | 视频是否是h265编码     |
| allowPtzControl     | boolean                                                                                                                        | false  | 否       | 视频是否允许ptz控制    |
| allowDrawScale      | boolean                                                                                                                        | false  | 否       | 视频是否允许拉框缩放   |
| allowAudioBroadcast | boolean                                                                                                                        | false  | 否       | 视频是否允许语音广播   |
| hasSpeed            | boolean                                                                                                                        | false  | 否       | 视频是否有播放速度控制 |
| timeLineGroup       | Array<{[p: string]: any;id: string;content: string;}>                                                                          | false  | 否       | 路放回放资源组         |
| playbackStartTime   | moment.Dayjs                                                                                                                    | -      | 否       | 回放开始时间           |
| onInit              | (player) => void                                                                                                               | -      | 否       | 初始化结束回调         |
| onClick             | () => void                                                                                                                     | -      | 否       | 播放器点击回调         |
| onPlaySpeedChange   | (time) => void                                                                                                                 | -      | 否       | 倍速调节回调           |
| onRecordSend        | (data) => void                                                                                                                 | -      | 否       | 语音广播发送回调       |
| onZoomChange        | (action: any, options: any) => void                                                                                            | -      | 否       | 拉框缩放回调           |
| onCommand           | （{speed: number; command: string;}） => void                                                                                    | -      | 否       | ptz控制回调            |
| onAddPreset         | （values） => Promise<any>;                                                                                                      | -      | 否       | 保存ptz控制            |
| onFetchRecordList   | (param: {deviceId: string;startTime: number;endTime: number;}, pagination: {pageNo: number;pageSize: number;}) => Promise<any> | -      | 否       | 请求回放列表参数       |
| handleDataOnChange  | (time): void                                                                                                                   | -      | 否       | 日期变化回调           |
| handleRangeOnChange | (time, filters): void                                                                                                          | -      | 否       | 时间段变化回调         |

## 例子
  ```javascript
    <VideoPlayer
      getSource={() => Promise.resolve({ url: 'https://playtv-live.ifeng.com/live/06OLEGEGM4G_tv1.m3u8' })}
      allowPtzControl
      allowAudioBroadcast
      onZoomChange={console.log}
      onRecordSend={console.log}
      onCommand={console.log}
      // timeLineGroup={[
      //   {
      //     id: '123',
      //     content: 'adsd',
      //   },
      // ]}
      onAddPreset={(values) => {
        console.log(values);
        return Promise.resolve(1);
      }}
      // timeLineGroup={[{ ...device, id: `${device.deviceId}_${date.valueOf()}`, content: device.name }]}
    />
  ```