Nautical Poseidon Mythology

    reactjs-player

    2.2.0 • Public • Published

    ReactjsPlayer

    ReactjsPlayer

    npm reactjs-player Travis (.org) Coveralls github

    基于 react hooks 的 video 播放组件,结构简单,代码简洁,扩展方便。

    特点

    ReactjsPlayer 遵循 少即是多(Less is more) 的设计原则,具有以下特点:

    • 结构简单:使用 react hooks 做状态管理,将不同的状态拆分到不同的 react custom hooks 中,ReactjsPlayer 中进行组合

    • 扩展方便:扩展时实现对应的 react custom hooks 并在 ReactjsPlayer 中根据条件进行加载

    • 代码简洁:只做播放器内部的状态管理和控制栏显示与控制

    • 理解容易: ReactjsPlayer 事件基于 vidoe 媒体事件 进行扩展,减小理解成本

    • 接口统一:ReactjsPlayerGrindPlayer 封装了统一的状态和方法,并通过 ReactPlayerContext 导出

    • 使用相对复杂:不同于其他的 h5 播放器,ReactjsPlayer 将控制权交给使用者,无法做到一行代码播放所有兼容的格式

    Getting started

    git clone https://github.com/goblin-laboratory/reactjs-player.git
    cd reactjs-player
    yarn install
    
    cd packages/reactjs-player/
    yarn start
    
    cd packages/reactjs-player-demo/
    yarn start
    

    Usage

    Demo page: https://goblin-laboratory.github.io/reactjs-player/

    npm install reactjs-player --save
    # or
    yarn add reactjs-player
    
    import React, { Component } from 'react';
    import ReactjsPlayer from 'reactjs-player';
    
    const App = () => {
      return <ReactjsPlayer kernel="hlsjs" src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" />;
    };

    常用场景见说明文档:Usage.md

    API

    见 API 说明文档:API.md

    注意事项

    1. reactjs-player positionabsolute , 大小和位置依赖相对于 static 定位以外的第一个父元素,建议将父节点 position 设置为 relative,通过控制父节点的大小和位置来控制 reactjs-player 的布局结果,可以参考 demo 中的实现

    2. GrindPlayer 必须要大于 400x300 才能正常播放,请保证播放区域不小于 400x300,否则画面会出现显示不全的情况

    Supported media

    • HLS
    • FLV
    • RTMP

    Contributing

    非常欢迎你的贡献,你可以通过以下方式和我们一起共建 😃

    • 通过 Issue 报告 bug 或进行咨询。
    • 提交 Pull Request 。

    Licensing

    ReactjsPlayer is MIT licensed.

    Install

    npm i reactjs-player

    DownloadsWeekly Downloads

    119

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    5.05 MB

    Total Files

    112

    Last publish

    Collaborators

    • xiaosongxiaosong