云粒视频播放器 react 组件,封装了视频相关接口请求

通用配置项

yunliMode

yunliMode?: boolean|'live'|'history'

是否使用云粒模式，主要差别：回放为hls流，带倍速和进度条,跟duration属性配合使用

不传或者值为false就是通用的videojs播放器

duration

duration?: number

需要跟yunliMode配合使用，进度条的持续时间，单位秒，只有yunliMode=‘history'的时候有效

yunliApiRoot

yunliApiRoot?: string

云粒视频控制系统接口前缀，比如：’http://192.168.1.102:8060'

snap

截屏配置

|字段 | 类型 | 默认值 | 描述 | | ----------- | -------- | ---------------------------------------- | | width? | number | video元素的宽 | 截屏的宽度 | | height? | number | video元素的高 | 截屏的高度 | | onSuccess? | (base64) => {} | 无 | 截屏成功的回调函数,参数为图片的base64数据 | | onError? | (error) => {} | 无 | 截屏失败的回调函数，参数为错误信息 | | autoSave? | boolean | true | 是否自动保存截屏 |

sources

sources?: {src: string, type: string}[ ]

视频播放地址，多个的话会播放第一个可以播放的源

changePlayRate

changePlayRate?: function(rate:number, player){}

播放器切换播放速率的事件函数，如果在options中传入，将会替换默认的函数

jumpVideoTime

jumpVideoTime?: function(time:number, player){}

播放器跳播的事件函数，如果在options中传入，将会替换默认的函数

getSnapShot

getSnapShot?: () => base64: string

获取截屏的图片数据，格式为base64编码

beginTime

beginTime?: string

开始时间，格式"YYYY-MM-DDTHH:MM:SS" 年月日时分秒; 注意补全0

备注：beginTime和endTime只有在yunliMode=‘history’时，同时设置beginTime和endTime
并且没有设置duration的时候才会触发；也就是说如果设置了duration，优先使用duration

endTime

endTime?: string

结束时间，格式"YYYY-MM-DDTHH:MM:SS" 年月日时分秒; 注意补全0

errorTexts

播放器错误信息中的文字信息

|字段|类型|默认值| | ----------- | -------- | ---------------------------------------- | | timeout | string | 连接超时 | | offline | string | 无网络 | | shutdown | string | 视频中断 | | notfound | string | 视频未找到 |

autoRetry

autoRetry?: boolean

是否一直重试并尝试重新播放{player.src(this.options_.sources)}，适合监控场景使用

当值为true时，waitingInterval时间设置不要太短，否则会在系统资源有限的时候引发重复loading状态

maxRetryTime

maxRetryTime:number默认值为3

最多重试次数，仅当autoRetry=false时有效

waitingInterval

waitingInterval:number默认值为5000毫秒

重试等待时间，单位毫秒

keepAlive

keepAlive:boolean 默认为true

是否保持心跳。值为true时，仅当yunliMode=‘live’|’history’的时候，且播放源中传入sessionID时有效

keepAliveInterval

keepAliveInterval: number 默认15000毫秒

保活心跳的频率

record

record: boolean 默认值false

是否开启录制功能

currentTime

currentTime: () => int

获取播放器当前播放时间，单位是秒

fillScreen

fillScreen: boolean, 默认false

是否填充满画面,如需启用，需要设置height,width,并且flued: false

云粒自有视频配置项

channelID

channelID？: string

云粒视频系统的频道标识

beginTime

beginTime?: string

开始时间，格式"YYYY-MM-DDTHH:MM:SS" 年月日时分秒; 注意补全0

endTime

endTime?: string

结束时间，格式"YYYY-MM-DDTHH:MM:SS" 年月日时分秒; 注意补全0

useCahe

useCache?: bool, 默认false

是否使用sessionStorage缓存播放地址；使用场景是在九宫格之类的多播放器共存，并且需要频繁切换摄像头的场景时，缓存当前频道的播放地址，避免多次请求删除播放地址，造成延时和资源浪费。如需开启，必须在组件外手动管理sessionStorage的内容，具体内容是key=channelID, value={ src: ‘’, type: ‘’, session: ‘’},播放器接受到channelID后会去sessionStorage中查找，如果有的话则不请求直接使用。

beforeRetry

beforeRetry?: function(player){}

历史视频播放完成后，再次播放前的钩子，可以重置播放地址

playRate

playRate?:number,默认1

历史视频播放倍率，会在请求历史视频时带入speed参数，只有yunliMode=‘history’时有效。

xhr

xhr?: Object,默认null

请求视频接口时候的xhr配置，可以设置是否带cookie和headers,不设置默认withCredentials=false,headers={‘Content-Type’: ‘application/json’} 示例：

	xhr: {
   	 	withCredentials: true,
		headers: {
			//设置headers
		}
  	},

globalModal

globalModal?boolean,默认false,

是否在组件更新时使用全局loading，一般九宫格切换视频时使用，防止连续切换。

afterFetchUrl

afterFetchUrl?: (data) => data

	data: {
		code: number,
		msg: string,
		result: {
			outputUrl: string,
			sessionID: string
		}
	}

请求播放地址后返回的值，用于修改播放地址，修改后按照原来的结构返回数据

fillScreen

fillScreen: boolean, 默认false

是否填充满画面,如需启用，需要设置height,width,并且flued: false

其他配置项同videojs