对 flv.js@1.5.0 封装的 react 组件。
Using npm:
$ npm install --save @fan-z/reflv
or using yarn:
$ yarn add @fan-z/reflv
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
className | string | - | - |
style | object | - | - |
url | string | media URL, can be starts with 'https(s)' or 'ws(s)' (WebSocket) | - |
type | enum | media type, 'flv' or 'mp4' | - |
isLive | bool | whether the data source is a live stream | - |
cors | bool | whether to enable CORS for http fetching | - |
withCredentials | bool | whether to do http fetching with cookies | - |
hasAudio | bool | whether the stream has audio track | - |
hasVideo | bool | whether the stream has video track | - |
duration | bool | total media duration, in milliseconds | - |
filesize | number | total file size of media file, in bytes | - |
segments | arrayOf | Optional field for multipart playback, see MediaSegment | - |
config | object | @see https://github.com/Bilibili/flv.js/blob/master/docs/api.md#config | - |
reconnectTimes | number | 超时或其他异常重连次数 | 5 |
showCapture | Boolean | 是否显示截图按钮 | |
doingCapture | Function(base64,callback) | 截屏返回的图片(已转换64位) | |
extraIcon | 工具栏可配置扩展结构 | ReactNode | - |
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
onPause | Function | 暂停播放 | - |
onReload | Function | 重新载入视频 | - |
onCapture | Function(返回base64图片) | 画面抓拍 | - |
onFullscreen | Function() | 全屏 | - |
其他API | - | @see https://github.com/Bilibili/flv.js/blob/master/docs/api.md#interface-player-abstract |
🔥组件 🆕新增 🐞修复 🗑删除 💄优化 📝 🛠
2024-07-26
- 新增 "全屏"功能外部调用事件;
- 修复 按下"esc"时,未更新是否全屏状态
- 新增 extraIcon,可在工具拦配置扩展DOM
2024-02-18
- 新增 "画面截图"功能;按钮截图(可下载)或者事件调用截图,返回对应的base64位文件
2022-10-10
- 修复 文件销毁后监听异常
2022-10-10
- 优化 浏览器切换或者最小化时暂停播放,重开刚重新播放
2022-06-08
- 修复 组件销毁后重连次数未清0
- 添加 配置指定重连次数
reconnectTimes
2022-06-08
- 重写功能,去除video原始操作栏,使用自定义操作栏
- 新增 可使用ref获取flvjs的Player相关方法
- 更新 flv.js版本至@1.6.2
2022-01-23
- 修复 视频源更新后未重新渲染