lm-hplayer

video for html5 support flv m3u8

Usage no npm install needed!

<script type="module">
  import lmHplayer from 'https://cdn.skypack.dev/lm-hplayer';
</script>

README

说明

基于flv.jshls.js封装视频组件,支持React,也支持直接其他调用方式但是依赖React,ReactDOM,PropTypes

export { Player as default, Player, HistoryPlayer, createHistoryPlayer, createPlayer, Bar }
Component/Factory description
Player 视频组件,适用于 React
HistoryPlayer 历史视频组件,适用于 React
createPlayer 创建视频控件,适用于非 React
createHistoryPlayer 创建历史视频控件,适用于非 React
Bar 用于拓展组件 contraller_bar
EventName 返回支持的事件

安装


yarn add lm-player
//or
npm i lm-player

例子

React

//React simple demo
import LMPlayer from 'lm-player'
ReactDOM.render(
  <LMPlayer
    file={`./video.mp4?${Math.random()}`}
    isLive={false}
    autoplay={true}
    loop={true}
    poster="./poster.png"
    onInitPlayer={player => {
      console.log(player)
    }}
  />,
  document.getElementById('root')
)

React

//other simple demo
import LMPlayer from 'lm-player'
const container = document.getElementById('root')
LMPlayer.createPlayer({
  container,
  isLive: true,
  file: `./video.mp4?${Math.random()}`,
  onInitPlayer: player => {
    //get api
    console.log(player)
  }
})

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

支持事件

export default {
  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" //重连成功清楚错误次数
};

可通过onoffemit使用,另外拓展可通过__player添加原生video事件