ocean-player

说明

基于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事件