云粒 videojs 视频播放器 SDK

依赖

  video.js
  flv.js
  vjs-flvjs

资源下载

  npm i yl-vjs-player-sdk

使用方法

  import YunliVjsPlayer from 'yl-vjs-player-sdk'

  var player = new YunliVjsPlayer({
    container: string | HtmlElement, //videojs容器，支持id和html元素
    yunliMode: boolean | 'live' | 'history', // 是否跟云粒视频后台整合,false或者不写为通用播放器
    duration: number, // yunliMode='history'时进度条的时长
  })

云粒视频播放器 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

其他配置项同videojs