ocean-player

0.3.81 • Public • Published

说明

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

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

Readme

Keywords

Package Sidebar

Install

npm i ocean-player

Weekly Downloads

5

Version

0.3.81

License

MIT

Unpacked Size

4.8 MB

Total Files

38

Last publish

Collaborators

  • feifeizheng