说明
基于flv.js和hls.js封装视频组件,支持
React
,也支持直接其他调用方式但是依赖React
,ReactDOM
,PropTypes
Component/Factory | description |
---|---|
Player |
视频组件,适用于 React |
HistoryPlayer |
历史视频组件,适用于 React |
createPlayer |
创建视频控件,适用于非 React |
createHistoryPlayer |
创建历史视频控件,适用于非 React |
Bar |
用于拓展组件 contraller_bar |
EventName |
返回支持的事件 |
安装
yarn add lm-player//ornpm i lm-player
例子
React
//React simple demoReactDOM
React
非//other simple democonst container = documentLMPlayer
Props
Player
通用
name | type | required | description |
---|---|---|---|
file |
boolean |
false |
视频url |
isLive |
boolean |
false |
默认值true ,标记是否是直播模式 |
errorReloadTimer |
number |
false |
默认值5,错误重连次数 |
type |
string |
false |
可选flv ,hls ,native ,强制设置格式 |
onInitPlayer |
function |
false |
参数包含所有暴露api |
draggable |
boolean |
false |
可拖拽,默认值true |
hideContrallerBar |
boolean |
false |
隐藏控制栏,默认值false |
scale |
boolean |
false |
可缩放,默认值true |
muted |
string |
false |
禁音,默认值muted |
autoPlay |
boolean |
false |
自动播放,默认值true |
playsInline |
boolean |
false |
默认值false |
preload |
string |
false |
默认值auto |
poster |
string |
false |
封面 |
loop |
boolean |
false |
默认值false |
snapshot |
function |
false |
返回截图base64 |
className |
string |
false |
- |
rightExtContents |
React.Element |
false |
控制栏右侧拓展 |
rightMidExtContents |
React.Element |
false |
控制栏右侧拓展 |
leftExtContents |
React.Element |
false |
控制栏左侧拓展 |
leftMidExtContents |
React.Element |
false |
控制栏左侧拓展 |
flvOptions |
object |
false |
见flv.js |
flvConfig |
object |
false |
见flv.js |
children |
React.Element |
false |
自定义拓展 |
HistoryPlayer
独有
name | type | required | description |
---|---|---|---|
historyList |
object |
false |
视频片断集合 |
defaultTime |
number |
false |
开始播放时间 |
//historyList 结构const historyList = beginDate: 0 duration: 0 fragments: //fragments 结构const fragments = begin: 0 file: xx end: 180
Api
接口
name | arguments | description |
---|---|---|
play |
- | 播放方法 |
reload |
- | 重连视频 |
pause |
- | 暂停播放 |
seekTo |
time:number |
调整播放进度 |
setVolume |
volume:number |
调整音量大小 |
mute |
- | 禁音 |
unmute |
- | 退出禁音 |
requestPictureInPicture |
- | 开启画中画 |
exitPictureInPicture |
- | 退出画中画 |
setPlaybackRate |
rate:number |
设置播放速率 |
getDuration |
- | 获取视频总时长 |
getCurrentTime |
- | 获取当前播放时间 |
getSecondsLoaded |
- | 获取缓存时间 |
getBufferedTime |
- | 获取当前视频缓存的起止时间 |
fastForward |
time 默认5秒 |
快进通过seekTo 方法实现 |
backWind |
time 默认5秒 |
快退通过seekTo 方法实现 |
snapshot |
- | 截图 |
requestFullScreen |
- | 全屏 |
cancelFullScreen |
- | 退出全屏 |
on |
eventName ,linstener |
监听事件 |
off |
eventName ,linstener |
移除监听事件 |
emit |
eventName ,data |
触发监听事件 |
对象
name | description |
---|---|
flv |
当使用flv 模式是返回flv 对象 |
hls |
当使用hls 模式是返回hls 对象 |
__player |
返回当前video 对象 |
event
支持事件
RELOAD: "reload" //手动视频重载 RELOAD_FAIL: "reloadFail" // 视频出错,重连失败 RELOAD_SUCCESS: "reloadSuccess" //视频出错,重连成功 ERROR: "error" //视频出错 ERROR_RELOAD: "errorRload" //视频出错,自动重连 HISTORY_PLAY_END: "historyPlayEnd" //历史视频列表播放结束 SEEK: "seek" //跳跃播放时间 TRANSFORM: "transform" //视频容器缩放 CHANGE_PLAY_INDEX: "changePlayIndex" //历史视频列表播放索引改变 HIDE_CONTRALLER:"hideContraller" SHOW_CONTRALLER:"showContraller" CLEAR_ERROR_TIMER:"clearErrorTimer" //重连成功清楚错误次数;
可通过
on
,off
,emit
使用,另外拓展可通过__player
添加原生video
事件