说明

基于flv.js和hls.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 ocean-player
//or
npm i ocean-player

例子

React

//React simple demo
import LMPlayer from 'ocean-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 'ocean-player'
const container = document.getElementById('root')
LMPlayer.createPlayer({
  container,
  isLive: true,
  file: `./video.mp4?${Math.random()}`,
  onInitPlayer: player => {
    //get api
    console.log(player)
  }
})

flv地址示例：
http://ip:port/staticResource/v2/video/live.flv/2147511361?Authorization=eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDExMDAwMDAwMSIsImV4dCI6MTY0MTgxNTMyOTMxOSwidWlkIjoiMTAxMDAzMDAwMDAxIiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDEwMDIwMDAwMDFdLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMTAwMDAxIiwidXNlclR5cGUiOjEwMDcwMiwiaWF0IjoxNjQxNTU2MTI5MzE5fQ.5SZZ8BzobAgjlHFAkYsoCAIr4TK90h3xrgO3SgjW850

注意：开流地址内，存在.flv或者protocol=flv，可识别为flv开流

浏览器本地存储（localStorage）相关配置：

key: PY_PLUS

value:

{ "mode": 0, "version": "v1.0.10", "unique": true, "reloadTimer": 10, "switchRate": true, "patternAuth": false, "palette": true, "connectOnce": false }

| name | type | required | description | | --------------------- | --------------- | -------- | -------------------------------------- | | mode | number | true | 视频开流模式 0：浏览器默认方式-仅支持264，1：客户端插件模式（264/265/svac），2：综合媒体方式(硬解) | | version | string | `` | 当前使用版本好 | | unique | boolean | false | 可选 默认值true，请求连接后是否添加时间戳 | | reloadTimer | number | false | 可选 默认值 5 ,拉流失败时重新拉取次数 | | switchRate | boolean | false | 可选 分辨率切换 | | palette | boolean | false | 可选 默认值 false 调色板 --录像画面调色 | | connectOnce | boolean | false | 可选，默认值false 初始化拉流是否单次，启用后reloadTimer失效 |

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

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