ocean-player

    0.3.75 • 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 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事件

    Install

    npm i ocean-player

    DownloadsWeekly Downloads

    92

    Version

    0.3.75

    License

    MIT

    Unpacked Size

    4.8 MB

    Total Files

    38

    Last publish

    Collaborators

    • feifeizheng