ReactjsPlayer
基于 react hooks 的 video 播放组件，结构简单，代码简洁，扩展方便。
特点
ReactjsPlayer 遵循 少即是多（Less is more） 的设计原则，具有以下特点：
-
结构简单：使用
react hooks做状态管理，将不同的状态拆分到不同的react custom hooks中，ReactjsPlayer中进行组合 -
扩展方便：扩展时实现对应的
react custom hooks并在ReactjsPlayer中根据条件进行加载 -
代码简洁：只做播放器内部的状态管理和控制栏显示与控制
-
理解容易：
ReactjsPlayer事件基于vidoe媒体事件 进行扩展，减小理解成本 -
接口统一：
ReactjsPlayer与GrindPlayer封装了统一的状态和方法，并通过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
TODO
3.x 版本计划
- 使用 TypeScript 重构
- 使用 tsdx 负责打包
- Jest 自动化测试
- storybook
API
见 API 说明文档：API.md
注意事项
-
reactjs-player
position为absolute， 大小和位置依赖相对于 static 定位以外的第一个父元素，建议将父节点position设置为relative，通过控制父节点的大小和位置来控制 reactjs-player 的布局结果，可以参考 demo 中的实现 -
GrindPlayer 必须要大于 400x300 才能正常播放，请保证播放区域不小于 400x300，否则画面会出现显示不全的情况
Supported media
- HLS
- FLV
- RTMP
Contributing
非常欢迎你的贡献，你可以通过以下方式和我们一起共建
- 通过 Issue 报告 bug 或进行咨询。
- 提交 Pull Request 。
Licensing
ReactjsPlayer is MIT licensed.