react-videoer
v0.0.9
Published
一个基于react的流媒体播放器
Downloads
11
Maintainers
Readme
属性/配置项
如下属性来自option
属性配置项.
| 参数 | 说明 | 类型 | 默认值 |
| --------------------- | ----------------------------------------- | ------------------------------------------------------------ | ------------- |
| videoSrc | 视频地址(必传) | string
| 必传 |
| mode | 视频缩放模式 | scaleToFill
(不保持纵横比缩放) widthFix
(宽度固定,高度自动变化,保持原视频宽高比不变) heightFix
(高度固定,宽度自动变化,保持原视频宽高比不变-) | scaleToFill
|
| height | 视频容器的 height | number
| - |
| width | 视频容器的 width | number
| - |
| autoPlay | 自动播放 | boolean
| false |
| theme | 主题 | string
| #ffb821 |
| poster | 视频封面图 | string
| - |
| setEndPlayContent | 自定义视频结束时显示的内容 | React.ReactNode
| - |
| setBufferContent | 自定义视频缓冲加载组件 | React.ReactNode
| - |
| setPauseButtonContent | 自定义视频暂停键 | React.ReactNode
| - |
| | | | |
| hideMouseTime | 多少毫秒,无任何操作,隐藏鼠标和控制器/ms | number
| 2000 |
| isShowMultiple | 是否显示播放倍数功能 | boolean
| true |
| | | | |
| | | | |
| isShowPicture | 是否显示画中画 | boolean
| true |
| | | | |
| | | | |
| isShowPauseButton | 是否显示暂停键 | boolean
| true |
| quality | 视频质量清晰度的选择列表 | qualityAttributes[]
| |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
方法
| 名称 | 说明 | 类型 |
| ----------- | ------------------------ | ----------------------- |
| load | 重新加载 | () => void |
| pause | 暂停 | () => void |
| play | 开始播放 | () => void |
| setVolume | 设置音量,[0-100] | (par:number
) => void |
| seek | 设置指定视频的播放位置/s | (par:number
) => void |
| setVideoSrc | 设置播放视频的地址 src | (par:string
) => void |
提示:
如上方法要借助ref
才能调用,如:xxx.current.load()
| 名称 | 说明 | 类型 | | ------------------- | ------------------------ | ------------------------------------ | | onProgressMouseDown | 滑动条按下不放,拖动回调 | (e: videoAttributes) => void | | onProgressMouseUp | 滑动条按下松开回调 | (e: videoAttributes) => void | | onPlay | 视频开始播放回调 | (e: videoAttributes) => void | | onPause | 视频暂停播放的回调 | (e: videoAttributes) => void | | onTimeChange | 视频在播放,时间变化回调 | (e: videoAttributes) => void | | onEndEd | 视频结束时回调 | (e: videoAttributes) => void | | onvolumechange | 音量改变时的回调 | (e: videoAttributes) => void | | onError | 视频播放失败的回调 | () => void | | onQualityChange | 视频清晰度改变时的回调 | (e:callBackType)=> void |