0.0.3 • Published 11 months ago
iotx-videoplayer v0.0.3
VideoPlayer
install
npm install iotx-videoplayer
引入cdn
<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; | - | 否 | 保存ptz控制 |
| onFetchRecordList | (param: {deviceId: string;startTime: number;endTime: number;}, pagination: {pageNo: number;pageSize: number;}) => Promise | - | 否 | 请求回放列表参数 |
| handleDataOnChange | (time): void | - | 否 | 日期变化回调 |
| handleRangeOnChange | (time, filters): void | - | 否 | 时间段变化回调 |
例子
<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 }]}
/>