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 }]}
  />