@fan-z/reflv

对 [email protected] 封装的 react 组件。

Install

Using npm:

$ npm install --save  @fan-z/reflv

or using yarn:

$ yarn add @fan-z/reflv

• flv.js github
• docs

API

| 参数 | 类型 | 说明 | 默认值 | | --- | --- | --- | --- | | 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 | - |

可使用 ref 获取flvjs的Player相关方法

| 参数 | 类型 | 说明 | 默认值 | | --- | --- | --- | --- | | 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|

更新日志

🔥组件 🆕新增 🐞修复 🗑删除 💄优化 📝 🛠

1.1.3

2024-07-26

• 新增 "全屏"功能外部调用事件；
• 修复 按下"esc"时，未更新是否全屏状态
• 新增 extraIcon，可在工具拦配置扩展DOM

1.1.2

2024-02-18

• 新增 "画面截图"功能；按钮截图（可下载）或者事件调用截图，返回对应的base64位文件

2022-10-10

• 修复 文件销毁后监听异常

1.1.1

2022-10-10

• 优化 浏览器切换或者最小化时暂停播放，重开刚重新播放 2022-06-08
• 修复 组件销毁后重连次数未清0
• 添加 配置指定重连次数reconnectTimes

1.1.0

2022-06-08

• 重写功能，去除video原始操作栏，使用自定义操作栏
• 新增 可使用ref获取flvjs的Player相关方法
• 更新 flv.js版本至@1.6.2

1.0.2

2022-01-23

• 修复 视频源更新后未重新渲染