sea-player v0.2.19

说明

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

export { Player as default, Player, HistoryPlayer, createHistoryPlayer, createPlayer, Bar }

安装

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通用

HistoryPlayer 独有

//historyList 结构
const historyList = { beginDate: 0, duration: 0, fragments: [] }

//fragments 结构
const fragments = [
    { begin: 0, file: xx, end: 180}
]

Api

接口

对象

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

可通过on，off，emit使用，另外拓展可通过__player添加原生video事件